feature: ellipsis - refactoring

This commit is contained in:
gaelle morin 2020-12-18 18:29:54 +01:00
parent d34a0dceba
commit d772bbb8d7
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
2 changed files with 42 additions and 14 deletions

View File

@ -30,6 +30,7 @@ nav {
margin-right: 3px;
opacity: 0.8;
vertical-align: top;
width: 12px;
div {
font-family: simple-line-icons;
@ -37,27 +38,47 @@ nav {
}
}
.sub-menu-name {
margin-right: 14px;
}
/* Ellipsis */
.ellipsis {
/* Ellipsis for project tab */
.project-tab {
hubl-menu-fix-url-circle,
hubl-menu-fix-url-project {
display: block;
}
.ellipsis-content,
.ellipsis-content>div {
@media(min-width: 1024px) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.sub-menu-name {
margin-right: 15px;
}
/* Ellipsis for project tab */
.circle-tab,
.project-tab {
.project-customer,
.project-name {
display: block;
width: calc(80vw - 96px);
@media(min-width: 1024px) {
width: calc(100% - 10px);
width: 100%;
}
}

View File

@ -49,10 +49,17 @@ solid-widget(name='hubl-menu-fix-url-circle')
solid-link.segment.lg-full(data-src="${value}" next="circle")
solid-display(
data-src='${value}'
fields='status, name, jabberID, badge'
class-status='sub-menu-icon'
class-name='sub-menu-name ellipsis'
class-badge='sub-menu-badge'
fields='segment(status, circle(name, jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium"
class-status='segment sub-menu-icon'
class-circle='segment lg-three-quarter sub-menu-name'
class-name='segment ellipsis-content'
class-badge='segment badge'
value-badge='${value}'
widget-status='hubl-menu-publicprivate'
widget-badge='hubl-counter'
@ -73,8 +80,8 @@ solid-widget(name='hubl-menu-fix-url-project')
class-project='segment lg-three-quarter sub-menu-name'
class-customer.name='segment project-customer'
class-name='segment project-name'
class-customer.name='segment ellipsis-content'
class-name='segment ellipsis-content'
class-badge='segment badge text-top'
@ -141,7 +148,7 @@ solid-router#navbar-router(default-route='dashboard')
div
div
div
solid-display.project-tab.text-color-white(
solid-display.ellipsis.text-color-white(
bind-user
nested-field='projects'
fields='project'
@ -170,7 +177,7 @@ solid-router#navbar-router(default-route='dashboard')
div
div
div
solid-display.circle-tab.segment.lg-full(
solid-display.ellipsis.text-color-white(
bind-user
nested-field='circles'
fields='circle'