From 1ade7ded23d036f2a304a661f09518485f9e5ba1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 27 Nov 2019 12:06:23 +0100 Subject: [PATCH 1/2] Left-nav bar: new styles + overflow and hovering to handle long names --- src/menu-left.pug | 47 ++++++++++++++------------- src/styles/base/main.scss | 11 +++---- src/styles/base/menu-left.scss | 59 +++++++++++++++++++++++++--------- 3 files changed, 72 insertions(+), 45 deletions(-) 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; } } From 4d40e538a2d73b57dd608c53996453d201320d29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 29 Nov 2019 14:28:23 +0100 Subject: [PATCH 2/2] modifications according to the changes in the wireframe --- src/menu-left.pug | 48 ++++++++++++++-------------- src/styles/abstracts/_variables.scss | 2 ++ src/styles/base/main.scss | 2 +- src/styles/base/menu-left.scss | 14 ++++---- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index c79856b..f65ce4b 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -19,30 +19,30 @@ nav#main__menu //- 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, 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 + //- 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 div.menu-chevron diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 53cbb47..bfb5c00 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -4,6 +4,7 @@ $color-45-95-54: hsl(45, 95%, 54%); $color-46-100-67: hsl(46, 100%, 67%); $color-46-100-50: hsl(46, 100%, 50%); $color-0-0-100: hsl(0, 0%, 100%); +$color-218-100-98: hsl(218, 100%, 98%); $color-210-17-91: hsl(210, 17%, 91%); $color-222-52-90: hsl(222, 52%, 90%); $color-210-25-95: hsl(210, 25%, 95%); @@ -22,5 +23,6 @@ $color-213-4-50: hsl(213, 4%, 50%); $color-213-13-86: hsla(213, 13%, 86%, 0.2); $color-0-0-29: hsl(0, 0%, 29%); $color-233-18-29: hsl(233, 18%, 29%); +$color-233-20-17: hsl(233, 20%, 17%); $color-216-4-22: hsl(216, 4%, 22%); $color-244-73-62: hsl(244, 73%, 62%); diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 45a44a7..7b459ab 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -101,7 +101,7 @@ h5 { flex: 1; font-size: 1.6rem; margin: 0 auto; - min-height: calc(100vh - 84px); + min-height: 100%; } &.with-padding { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index ae44b04..a3b7ac9 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -2,7 +2,7 @@ background-color: $color-233-18-29; color: $color-0-0-100; display: block; - height: calc(100vh - 82px); + height: auto; max-width: 250px; transition: flex-basis 0.5s ease-in-out; @@ -92,7 +92,7 @@ .sub-menu { sib-set-default[name='project'] { - padding: 10px; + padding: 1rem 1rem 1rem 3.2rem; .project-customer, .project-name { @@ -113,11 +113,9 @@ } &:hover { - background-color: #a2a8bb; - border-radius: 2px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); - color: #3D4057; - padding: 10px; + background-color: $color-233-20-17; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); + color: $color-218-100-98; /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ width: auto; @@ -148,7 +146,7 @@ } &[fields="project(customer.name, name), badge"]>div { - padding: 0 0 0 22px; + padding: 0; } }