From 1ade7ded23d036f2a304a661f09518485f9e5ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 27 Nov 2019 12:06:23 +0100
Subject: [PATCH] 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 c2d902d4..c79856b1 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 283f1be3..45a44a75 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 6dbea233..ae44b04e 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;
}
}
--
GitLab