diff --git a/src/menu-left.pug b/src/menu-left.pug index c2d902d..c79856b 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -18,29 +18,30 @@ nav#main__menu //- div.menu-icon.icon-briefcase //- sib-route(name='job-offer-create', hidden) //- sib-route(name='job-offer-edit', use-id, hidden) - //- div.divider - //- div.menu-wrapper - //- div.menu - //- div.menu-chevron - //- div.menu-icon.icon-arrow-up - //- div.menu-label Projects - //- div.menu-icon.icon-folder-alt - //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - //- div.sub-menu.menu-notification - //- sib-display( - //- data-src=`${endpoints.projects}` - //- fields='project(customer.name, dash, name), badge' - //- empty-widget='hd-create' - //- empty-value='project' - //- value-dash=' - ' - //- search-fields='team' - //- search-widget-team='sib-form-hidden' - //- search-value-team='-' - //- hd-inherit-user-id='search-value-team' - //- hd-inherit-widgets - //- widget-badge='hd-counter' - //- action-badge='badge' - //- ) + div.divider + div.menu-wrapper + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-up + div.menu-label Projects + div.menu-icon.icon-folder-alt + sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + div.sub-menu.menu-notification + sib-display( + data-src=`${endpoints.projects}` + fields='project(customer.name, name), badge' + class-customer.name='project-customer' + class-name='project-name' + empty-widget='hd-create' + empty-value='project' + search-fields='team' + search-widget-team='sib-form-hidden' + search-value-team='-' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets + widget-badge='hd-counter' + action-badge='badge' + ) div.divider div.menu-wrapper div.menu diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 283f1be..45a44a7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -20,12 +20,11 @@ $breakpoints: (phone: 480px, background-color: $color-210-25-95; color: $color-213-4-50; font-size: 1.6rem; - overflow: hidden; - overflow-wrap: break-word; - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; + overflow-y: scroll; + } + + html { + overflow-y: scroll; } main { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 6dbea23..ae44b04 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -2,8 +2,8 @@ background-color: $color-233-18-29; color: $color-0-0-100; display: block; - overflow: auto; - flex: 0 0 16em; + height: calc(100vh - 82px); + max-width: 250px; transition: flex-basis 0.5s ease-in-out; &.open { @@ -90,6 +90,43 @@ } .sub-menu { + + sib-set-default[name='project'] { + padding: 10px; + + .project-customer, + .project-name { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .project-customer { + font-weight: bold; + width: 150px; + } + + .project-name { + padding-left: 14px; + width: calc(150px - 10px); /* 10px = padding of the sib-set-default = better alignment */ + } + + &:hover { + background-color: #a2a8bb; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + color: #3D4057; + padding: 10px; + /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ + width: auto; + + .project-customer, + .project-name { + width: auto; + } + } + } sib-display>div { @@ -108,20 +145,10 @@ color: $color-244-10-70; cursor: pointer; padding: 10px 10px 10px 32px; - } - - sib-route[name='project'] { - display: flex; - flex: 3; - - sib-display-value { - display: block; - height: 20px; - } - - sib-display-value[name='dash'] { - margin: 0 0.4em; - } + } + + &[fields="project(customer.name, name), badge"]>div { + padding: 0 0 0 22px; } }