From 3e0145334af933b3cffc8bbbd1652b0a91d35570 Mon Sep 17 00:00:00 2001 From: simon louvet 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 51b5905..c3edb56 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 8b6f88d..06ca528 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 76ff45c..f765769 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 c284231..66c1699 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 8397b82..4e43230 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 * { - 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); + // 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); } - width: max-content; - padding: 2em; } + + .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%; + background-color: $color-yellow-light; + } + } + &[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 9d77e86..9b4afae 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 cde2f67..4bebda2 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);