From 3e0145334af933b3cffc8bbbd1652b0a91d35570 Mon Sep 17 00:00:00 2001
From: simon louvet <smon.louvet.zen@gmail.com>
Date: Fri, 16 Nov 2018 11:33:39 +0100
Subject: [PATCH] ui migration to Sophie Design
---
src/dependencies.pug | 6 +-
src/index.pug | 57 +++++++--------
src/menu.pug | 61 ++++++++--------
src/styles/main.scss | 41 ++++++++---
src/styles/menu.scss | 142 +++++++++++++++++++++++++++-----------
src/styles/mixins.scss | 36 +++++-----
src/styles/variables.scss | 2 +-
7 files changed, 218 insertions(+), 127 deletions(-)
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 51b59050..c3edb56f 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -6,8 +6,8 @@ script(src="/lib/webcomponentsjs/webcomponents-loader.js")
script(src="/lib/oidc-client.js")
script(
src="/lib/sib-oidc/sib-oidc.js"
- data-authority='https://test-paris.happy-dev.fr/openid/',
- data-client_id='833925',
+ data-authority=`${sdn}/openid/`,
+ data-client_id='863031',
data-response_type='id_token token',
data-scope='openid profile email',
data-automaticSilentRenew='true',
@@ -36,4 +36,4 @@ link(rel='import', href='/lib/sib-router/sib-router.html')
//- cdn
link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")
link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html")
-link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
\ No newline at end of file
+link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
diff --git a/src/index.pug b/src/index.pug
index 8b6f88de..06ca5285 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -8,31 +8,32 @@ html(lang="en")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
link(rel="icon" type="image/png" href="/images/logo.png")
include dependencies.pug
- body
- header#header
- include header.pug
- #subContainer
- include menu.pug
- main#mainContainer
- //- #dashboard(hidden)
- include page-dashboard.pug
- #members(hidden)
- include page-members.pug
- #member(hidden)
- include page-member.pug
- #job-offers(hidden)
- include page-job-offers.pug
- #job-offer-create(hidden)
- include page-job-offer-create.pug
- //-#projects(hidden)
- include page-projects.pug
- #project(hidden)
- include page-project.pug
- //- #client-creation(hidden)
- include page-client-creation.pug
- //-#groups(hidden)
- include page-groups.pug
- #group(hidden)
- include page-group.pug
- //- #search(hidden)
- include page-search.pug
\ No newline at end of file
+ div.layer
+ body
+ header#header
+ include header.pug
+ #subContainer
+ include menu.pug
+ main#mainContainer
+ //- #dashboard(hidden)
+ include page-dashboard.pug
+ #members(hidden)
+ include page-members.pug
+ #member(hidden)
+ include page-member.pug
+ #job-offers(hidden)
+ include page-job-offers.pug
+ #job-offer-create(hidden)
+ include page-job-offer-create.pug
+ //-#projects(hidden)
+ include page-projects.pug
+ #project(hidden)
+ include page-project.pug
+ //- #client-creation(hidden)
+ include page-client-creation.pug
+ //-#groups(hidden)
+ include page-groups.pug
+ #group(hidden)
+ include page-group.pug
+ //- #search(hidden)
+ include page-search.pug
diff --git a/src/menu.pug b/src/menu.pug
index 76ff45cc..f7657690 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -1,27 +1,34 @@
-div
- nav#navbar
- sib-router#navbar-router(default-route='members')
- div(hidden)
- div#menu-items
- sib-route(name='members')
- div.icon-people Members
- sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
- sib-route(name='job-offers')
- div.icon-briefcase Job offers
- sib-route(hidden, name='job-offer-create')
- div
- div.icon-folder-alt Projects
- sib-display(
- data-src=`${sdn}/projects/`,
- data-fields='name',
- next='project'
- )
- sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
- div
- div.icon-bubbles Groups
- sib-display(
- data-src=`${sdn}/channels/`,
- data-fields='name',
- next='group'
- )
- sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
\ No newline at end of file
+nav#navbar
+ sib-router#navbar-router(default-route='members')
+ sib-route(name='members')
+ div.menu-notification
+ div 1
+ div.menu-label Members
+ div.menu-icon.icon-people
+ sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
+ sib-route(name='job-offers')
+ div.menu-notification
+ div 2
+ div.menu-label Job offers
+ div.menu-icon.icon-briefcase
+ sib-route(hidden, name='job-offer-create')
+ div
+ div.menu-notification
+ div.menu-label Projects
+ div.menu-icon.icon-folder-alt
+ sib-display(
+ data-src=`${sdn}/projects/`,
+ data-fields='name',
+ next='project'
+ )
+ sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
+ div
+ div.menu-notification
+ div.menu-label Groups
+ div.menu-icon.icon-bubbles
+ sib-display(
+ data-src=`${sdn}/channels/`,
+ data-fields='name',
+ next='group'
+ )
+ sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c2842311..66c16995 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -7,21 +7,24 @@
*,
*::before,
*::after {
- box-sizing: inherit;
+// box-sizing: inherit;
}
html {
- box-sizing: border-box;
+ //box-sizing: border-box;
font-family: Open Sans, sans-serif;
font-size: 13px;
background-color: $color-grey-light;
color: $color-grey;
}
-html,
-body {
- height: 100%;
-}
+
+
+// body {
+// height: 100%;
+// display:flex;
+// flex-direction: column;
+// }
h1,
h2,
@@ -64,14 +67,19 @@ h4 {
padding: 1em;
}
+
#header {
background-color: $color-white;
color: $color-black;
- position: relative;
- @include border-shadow(bottom);
+ //position: relative;
+ //@include border-shadow(bottom);
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border: solid $color-white;
border-width: 1px 0;
display: flex;
+ //flex-grow: 0;
+ //flex-basis : 150px;
+ flex-shrink: 0;
align-items: center;
padding: 1em 0;
> * {
@@ -128,12 +136,27 @@ h4 {
}
}
+
+.layer{
+ position:absolute;
+ bottom:0;top:0;right:0;left:0;
+ display:flex;
+ flex-direction: column;
+ align-items: stretch;
+ overflow-x: hidden;
+}
+
#subContainer {
display: flex;
+ flex-grow: 1;
+ align-items: stretch;
+ overflow: hidden;
}
#mainContainer {
- flex: 1 1 0px;
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow-y: auto;
}
.limiter {
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 8397b82a..4e43230c 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -2,78 +2,138 @@
// #navbar-router{}
#navbar {
- background-color: $color-white;
- color: $color-grey;
- max-width: 16rem;
- position: relative;
- min-height: 100%;
+ background-color: $color-purple-dark;
+ color: $color-white;
+ // max-width: 16rem;
+ // position: relative;
+ // min-height: 100%;
+ transition: flex-basis 0.5s ease-in-out;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 17em;
+ overflow: hidden;
+ flex-direction: column;
+
&.open {
transform: translateX(0);
}
- @include border-shadow(right);
+ //@include border-shadow(right);
}
-
@include media('width<phone') {
#button-toggle {
display: block;
}
+
#navbar {
- transform: translateX(-100%);
- transition: transform 0.5s ease;
- position: absolute;
- top: auto;
- z-index: 1;
+ //transform: translateX(-120%);
+ transition: flex-basis 0.5s ease-in-out;
+ flex-basis: 0px;
+ //position: absolute;
+ //top: auto;
+ //display: none;
+ //z-index: 1;
}
}
-#menu-items {
+sib-router {
+ display: flex;
+ flex-direction: column;
+
> * {
- display: block;
- border-top: 1px solid #ddd;
- &:last-child {
- border-bottom: 1px solid #ddd;
- }
- sib-route {
- display: block;
- cursor: pointer;
- }
+ display: flex;
+ flex-direction: row-reverse;
+ padding: 1em;
+ // border-top: 1px solid #ddd;
+ // &:last-child {
+ // border-bottom: 1px solid #ddd;
+ // }
cursor: pointer;
+ font-weight: bold;
+
&[active] {
+ background-color: $color-yellow-light;
color: $color-black;
- > div:before {
- background-color: $color-yellow-light;
- transform: perspective(1000px) translateZ(1px) scale(0.8);
+ font-weight: normal;
+
+ .menu-icon:before {
+ background-color: $color-purple-dark;
+ color: $color-yellow-light;
+ // transform: perspective(1000px) translateZ(1px) scale(0.8);
+ }
+ .menu-notification>div{
+ background-color: $color-purple-dark;
+ color: $color-yellow-light;
}
}
- > div {
- text-align: center;
- text-transform: uppercase;
+
+ .menu-icon {
+ //flex-basis: 2em;
+ width :4em;
+ flex-shrink: 0;
+ flex-grow: 0;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+
+
&:before {
- display: block;
- width: 2em;
- height: 2em;
- line-height: 2em;
- padding: 0;
- margin: -0.5em auto 0;
- font-size: 2em;
+ width: 1.9em;
+ height: 1.9em;
+ line-height: 1.9em;
+ font-size: 1.6em;
+ border-radius: 100%;
+ // transform: perspective(1000px) translateZ(1px) scale(1);
+ // will-change: transform;
+ // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
+ }
+ }
+
+ .menu-label {
+ //flex-basis: 8em;
+ width: 8em;
+ flex-shrink: 0;
+ flex-grow: 1;
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ text-transform: uppercase;
+ }
+
+ .menu-notification {
+ //flex-basis: 3em;
+ width: 2em;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ >div{
+ color : $color-black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 1.5em;
+ height: 1.5em;
border-radius: 100%;
- transform: perspective(1000px) translateZ(1px) scale(1);
- will-change: transform;
- transition: all 0.3s ease,
- transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
+ background-color: $color-yellow-light;
}
- width: max-content;
- padding: 2em;
}
+
&[id-prefix] {
display: none;
}
+
> sib-display {
display: block;
font-size: 0.9em;
color: #aaa;
+
> div {
margin-bottom: 1.5em;
+
> sib-display {
cursor: pointer;
display: block;
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 9d77e86c..9b4afae9 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -85,24 +85,24 @@
}
}
-@mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
- &:after {
- content: '';
- position: absolute;
- top: if(($border == bottom), auto, 0);
- left: if(($border == right), auto, 0);
- right: if(($border == left), auto, 0);
- bottom: if(($border == top), auto, 0);
- background-image: linear-gradient(to #{$border}, $color, transparent);
- #{$border}: -$size;
- opacity: $opacity;
- @if ($border == top or $border == bottom) {
- height: $size;
- } @else {
- width: $size;
- }
- }
-}
+// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
+// &:after {
+// content: '';
+// position: absolute;
+// top: if(($border == bottom), auto, 0);
+// left: if(($border == right), auto, 0);
+// right: if(($border == left), auto, 0);
+// bottom: if(($border == top), auto, 0);
+// background-image: linear-gradient(to #{$border}, $color, transparent);
+// #{$border}: -$size;
+// opacity: $opacity;
+// @if ($border == top or $border == bottom) {
+// height: $size;
+// } @else {
+// width: $size;
+// }
+// }
+// }
@mixin align($horizontal: center, $vertical: middle) {
text-align: $horizontal;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index cde2f673..4bebda26 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,9 +4,9 @@ $color-black: #36383b;
$color-grey: #898f95;
$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
-
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
+$color-purple-dark: #41394c;
%shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
--
GitLab