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/oidc-client.js")
script( script(
src="/lib/sib-oidc/sib-oidc.js" src="/lib/sib-oidc/sib-oidc.js"
data-authority='https://test-paris.happy-dev.fr/openid/', data-authority=`${sdn}/openid/`,
data-client_id='833925', data-client_id='863031',
data-response_type='id_token token', data-response_type='id_token token',
data-scope='openid profile email', data-scope='openid profile email',
data-automaticSilentRenew='true', data-automaticSilentRenew='true',

57
src/index.pug
View File

@ -8,31 +8,32 @@ html(lang="en")
meta(http-equiv="X-UA-Compatible", content="ie=edge") meta(http-equiv="X-UA-Compatible", content="ie=edge")
link(rel="icon" type="image/png" href="/images/logo.png") link(rel="icon" type="image/png" href="/images/logo.png")
include dependencies.pug include dependencies.pug
body div.layer
header#header body
include header.pug header#header
#subContainer include header.pug
include menu.pug #subContainer
main#mainContainer include menu.pug
//- #dashboard(hidden) main#mainContainer
include page-dashboard.pug //- #dashboard(hidden)
#members(hidden) include page-dashboard.pug
include page-members.pug #members(hidden)
#member(hidden) include page-members.pug
include page-member.pug #member(hidden)
#job-offers(hidden) include page-member.pug
include page-job-offers.pug #job-offers(hidden)
#job-offer-create(hidden) include page-job-offers.pug
include page-job-offer-create.pug #job-offer-create(hidden)
//-#projects(hidden) include page-job-offer-create.pug
include page-projects.pug //-#projects(hidden)
#project(hidden) include page-projects.pug
include page-project.pug #project(hidden)
//- #client-creation(hidden) include page-project.pug
include page-client-creation.pug //- #client-creation(hidden)
//-#groups(hidden) include page-client-creation.pug
include page-groups.pug //-#groups(hidden)
#group(hidden) include page-groups.pug
include page-group.pug #group(hidden)
//- #search(hidden) include page-group.pug
include page-search.pug //- #search(hidden)
include page-search.pug

61
src/menu.pug
View File

@ -1,27 +1,34 @@
div nav#navbar
nav#navbar sib-router#navbar-router(default-route='members')
sib-router#navbar-router(default-route='members') sib-route(name='members')
div(hidden) div.menu-notification
div#menu-items div 1
sib-route(name='members') div.menu-label Members
div.icon-people Members div.menu-icon.icon-people
sib-route(hidden, name='member', id-prefix=`${sdn}/members/`) sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
sib-route(name='job-offers') sib-route(name='job-offers')
div.icon-briefcase Job offers div.menu-notification
sib-route(hidden, name='job-offer-create') div 2
div div.menu-label Job offers
div.icon-folder-alt Projects div.menu-icon.icon-briefcase
sib-display( sib-route(hidden, name='job-offer-create')
data-src=`${sdn}/projects/`, div
data-fields='name', div.menu-notification
next='project' div.menu-label Projects
) div.menu-icon.icon-folder-alt
sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`) sib-display(
div data-src=`${sdn}/projects/`,
div.icon-bubbles Groups data-fields='name',
sib-display( next='project'
data-src=`${sdn}/channels/`, )
data-fields='name', sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
next='group' div
) div.menu-notification
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) 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/`)

41
src/styles/main.scss
View File

@ -7,21 +7,24 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: inherit; // box-sizing: inherit;
} }
html { html {
box-sizing: border-box; //box-sizing: border-box;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
font-size: 13px; font-size: 13px;
background-color: $color-grey-light; background-color: $color-grey-light;
color: $color-grey; color: $color-grey;
} }
html,
body {
height: 100%; // body {
} // height: 100%;
// display:flex;
// flex-direction: column;
// }
h1, h1,
h2, h2,
@ -64,14 +67,19 @@ h4 {
padding: 1em; padding: 1em;
} }
#header { #header {
background-color: $color-white; background-color: $color-white;
color: $color-black; color: $color-black;
position: relative; //position: relative;
@include border-shadow(bottom); //@include border-shadow(bottom);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border: solid $color-white; border: solid $color-white;
border-width: 1px 0; border-width: 1px 0;
display: flex; display: flex;
//flex-grow: 0;
//flex-basis : 150px;
flex-shrink: 0;
align-items: center; align-items: center;
padding: 1em 0; 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 { #subContainer {
display: flex; display: flex;
flex-grow: 1;
align-items: stretch;
overflow: hidden;
} }
#mainContainer { #mainContainer {
flex: 1 1 0px; flex-grow: 1;
flex-shrink: 1;
overflow-y: auto;
} }
.limiter { .limiter {

142
src/styles/menu.scss
View File

@ -2,78 +2,138 @@
// #navbar-router{} // #navbar-router{}
#navbar { #navbar {
background-color: $color-white; background-color: $color-purple-dark;
color: $color-grey; color: $color-white;
max-width: 16rem; // max-width: 16rem;
position: relative; // position: relative;
min-height: 100%; // 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 { &.open {
transform: translateX(0); transform: translateX(0);
} }
@include border-shadow(right); //@include border-shadow(right);
} }
@include media('width<phone') { @include media('width<phone') {
#button-toggle { #button-toggle {
display: block; display: block;
} }
#navbar { #navbar {
transform: translateX(-100%); //transform: translateX(-120%);
transition: transform 0.5s ease; transition: flex-basis 0.5s ease-in-out;
position: absolute; flex-basis: 0px;
top: auto; //position: absolute;
z-index: 1; //top: auto;
//display: none;
//z-index: 1;
} }
} }
#menu-items { sib-router {
display: flex;
flex-direction: column;
> * { > * {
display: block; display: flex;
border-top: 1px solid #ddd; flex-direction: row-reverse;
&:last-child { padding: 1em;
border-bottom: 1px solid #ddd; // border-top: 1px solid #ddd;
} // &:last-child {
sib-route { // border-bottom: 1px solid #ddd;
display: block; // }
cursor: pointer;
}
cursor: pointer; cursor: pointer;
font-weight: bold;
&[active] { &[active] {
background-color: $color-yellow-light;
color: $color-black; color: $color-black;
> div:before { font-weight: normal;
background-color: $color-yellow-light;
transform: perspective(1000px) translateZ(1px) scale(0.8); .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; .menu-icon {
text-transform: uppercase; //flex-basis: 2em;
width :4em;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
&:before { &:before {
display: block; width: 1.9em;
width: 2em; height: 1.9em;
height: 2em; line-height: 1.9em;
line-height: 2em; font-size: 1.6em;
padding: 0;
margin: -0.5em auto 0;
font-size: 2em;
border-radius: 100%; border-radius: 100%;
transform: perspective(1000px) translateZ(1px) scale(1); // transform: perspective(1000px) translateZ(1px) scale(1);
will-change: transform; // will-change: transform;
transition: all 0.3s ease, // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
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] { &[id-prefix] {
display: none; display: none;
} }
> sib-display { > sib-display {
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
color: #aaa; color: #aaa;
> div { > div {
margin-bottom: 1.5em; margin-bottom: 1.5em;
> sib-display { > sib-display {
cursor: pointer; cursor: pointer;
display: block; 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) { // @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
&:after { // &:after {
content: ''; // content: '';
position: absolute; // position: absolute;
top: if(($border == bottom), auto, 0); // top: if(($border == bottom), auto, 0);
left: if(($border == right), auto, 0); // left: if(($border == right), auto, 0);
right: if(($border == left), auto, 0); // right: if(($border == left), auto, 0);
bottom: if(($border == top), auto, 0); // bottom: if(($border == top), auto, 0);
background-image: linear-gradient(to #{$border}, $color, transparent); // background-image: linear-gradient(to #{$border}, $color, transparent);
#{$border}: -$size; // #{$border}: -$size;
opacity: $opacity; // opacity: $opacity;
@if ($border == top or $border == bottom) { // @if ($border == top or $border == bottom) {
height: $size; // height: $size;
} @else { // } @else {
width: $size; // width: $size;
} // }
} // }
} // }
@mixin align($horizontal: center, $vertical: middle) { @mixin align($horizontal: center, $vertical: middle) {
text-align: $horizontal; text-align: $horizontal;

2
src/styles/variables.scss
View File

@ -4,9 +4,9 @@ $color-black: #36383b;
$color-grey: #898f95; $color-grey: #898f95;
$color-grey-light2: #d8d8d8; $color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6; $color-grey-light: #f0f3f6;
$color-yellow: #ffb700; $color-yellow: #ffb700;
$color-yellow-light: #ffd759; $color-yellow-light: #ffd759;
$color-purple-dark: #41394c;
%shadow { %shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);