composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-30 22:18:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3900 - Breadcrumbs: Improve behavior when items are too many for the screen width

Browse Source 
When the screen isn't large enough we now put the oldest entries in a dropdown menu like on a browser to access the previous pages.
This commit is contained in:
Molkobain
2021-09-07 10:21:47 +02:00
parent d1a05f41e5
commit f6fbd5a7a5
6 changed files with 318 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
css/backoffice/components/_breadcrumbs.scss
View File

@@ -16,6 +16,8 @@
* You should have received a copy of the GNU Affero General Public License
*/
$ibo-breadcrumbs--margin-right: 16px !default;
$ibo-breadcrumbs--item--text-color: $ibo-color-grey-800 !default;
$ibo-breadcrumbs--item-icon--margin-x: 8px !default;
@@ -27,9 +29,27 @@ $ibo-breadcrumbs--item-label--max-width: 100px !default;
$ibo-breadcrumbs--item-separator--margin-x: 12px !default;
$ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
$ibo-breadcrumbs--previous-items-list-toggler--text-color: $ibo-color-grey-700 !default;
$ibo-breadcrumbs--previous-items-list-toggler--margin-right: 2 * $ibo-breadcrumbs--item-separator--margin-x !default;
$ibo-breadcrumbs--previous-items-list--top: 37px !default;
$ibo-breadcrumbs--previous-items-list--padding-y: 8px !default;
$ibo-breadcrumbs--previous-items-list--background-color: $ibo-color-white-100 !default;
$ibo-breadcrumbs--previous-item--text-color: $ibo-breadcrumbs--item--text-color !default;
$ibo-breadcrumbs--previous-item--padding-x: 12px !default;
$ibo-breadcrumbs--previous-item--padding-y: 12px !default;
$ibo-breadcrumbs--previous-item-label--max-width: 200px !default;
.ibo-breadcrumbs{
position: relative;
margin-right: $ibo-breadcrumbs--margin-right;
@extend %ibo-full-height-content;
&.ibo-is-overflowing {
justify-content: right;
}
* {
display: flex;
align-items: center;
@@ -40,13 +60,6 @@ $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
@extend %ibo-font-ral-med-100;
&:not(:last-child){
&::after{
content: '\f054';
margin: 0 $ibo-breadcrumbs--item-separator--margin-x;
color: $ibo-breadcrumbs--item-separator--text-color;
@extend %fa-solid-base;
}
&:hover{
.ibo-breadcrumbs--item-icon{
> *{
@@ -78,3 +91,50 @@ $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
max-width: $ibo-breadcrumbs--item-label--max-width;
@extend %ibo-text-truncated-with-ellipsis;
}
.ibo-breadcrumbs--item,
.ibo-breadcrumbs--previous-items-list-toggler {
&:not(:last-child){
&::after{
content: '\f054';
margin: 0 $ibo-breadcrumbs--item-separator--margin-x;
color: $ibo-breadcrumbs--item-separator--text-color;
@extend %fa-solid-base;
}
}
}
.ibo-breadcrumbs--previous-items-list-toggler {
margin-right: $ibo-breadcrumbs--previous-items-list-toggler--margin-right;
color: $ibo-breadcrumbs--previous-items-list-toggler--text-color !important;
@extend %ibo-font-ral-med-100;
&:not(:last-child) {
&::after {
position: absolute; /* To be outside of the button */
right: -1 * $ibo-breadcrumbs--previous-items-list-toggler--margin-right;
}
}
}
.ibo-breadcrumbs--previous-items-list {
display: flex;
flex-direction: column;
align-items: stretch; /* For the items to occupy the full width */
position: fixed;
top: $ibo-breadcrumbs--previous-items-list--top;
padding: $ibo-breadcrumbs--previous-items-list--padding-y 0;
background-color: $ibo-breadcrumbs--previous-items-list--background-color;
@extend %ibo-elevation-300;
}
.ibo-breadcrumbs--previous-item {
color: $ibo-breadcrumbs--previous-item--text-color;
@extend %ibo-font-ral-med-100;
padding: $ibo-breadcrumbs--previous-item--padding-y $ibo-breadcrumbs--previous-item--padding-x;
.ibo-breadcrumbs--item-label {
max-width: 200px;
}
}