From 9762f8b0f983523bcd058f2f72a666217dc76f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 11 Dec 2019 18:06:42 +0100
Subject: [PATCH] Left navbar: modifications according to the wireframe update
---
src/styles/base/main.scss | 11 +++----
src/styles/base/menu-left.scss | 59 +++++++++++++++++++++++++---------
2 files changed, 48 insertions(+), 22 deletions(-)
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 35409efd..77a273d6 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: 1rem 1rem 1rem 3.2rem;
+
+ .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: $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;
+ z-index: 1000;
+
+ .project-customer,
+ .project-name {
+ width: auto;
+ }
+ }
+ }
sib-display>div {
@@ -107,21 +144,11 @@
>div {
color: $color-244-10-70;
cursor: pointer;
- padding: 10px 10px 10px 32px;
- }
-
- sib-route[name='project'] {
- display: flex;
- flex: 3;
+ padding: 1rem 1rem 1rem 3.2rem;
+ }
- 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;
}
}
--
GitLab