autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui migration to Sophie Design

Browse Source
This commit is contained in:
simon louvet 2018-11-16 11:33:39 +01:00
parent 8217d9a874
commit 3e0145334a
7 changed files with 218 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dependencies.pug
View File

@ -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',

1
src/index.pug
View File

@ -8,6 +8,7 @@ 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
div.layer
body
header#header
include header.pug

23
src/menu.pug
View File

@ -1,16 +1,21 @@
div
nav#navbar
nav#navbar
sib-router#navbar-router(default-route='members')
div(hidden)
div#menu-items
sib-route(name='members')
div.icon-people 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.icon-briefcase 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.icon-folder-alt Projects
div.menu-notification
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-display(
data-src=`${sdn}/projects/`,
data-fields='name',
@ -18,7 +23,9 @@ div
)
sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
div
div.icon-bubbles Groups
div.menu-notification
div.menu-label Groups
div.menu-icon.icon-bubbles
sib-display(
data-src=`${sdn}/channels/`,
data-fields='name',

41
src/styles/main.scss
View File

@ -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 {

142
src/styles/menu.scss
View File

@ -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] {
color: $color-black;
> div:before {
background-color: $color-yellow-light;
transform: perspective(1000px) translateZ(1px) scale(0.8);
color: $color-black;
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;

36
src/styles/mixins.scss
View File

@ -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;

2
src/styles/variables.scss
View File

@ -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);