Skip to content
Snippets Groups Projects
Commit 3e014533 authored by simon louvet's avatar simon louvet
Browse files

ui migration to Sophie Design

parent 8217d9a8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/dependencies.pug
+ 3
− 3
View file @ 3e014533
......@@ -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")
src/index.pug
+ 29
− 28
View file @ 3e014533
......@@ -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
src/menu.pug
+ 34
− 27
View file @ 3e014533
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/`)
src/styles/main.scss
+ 32
− 9
View file @ 3e014533
......@@ -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 {
......
src/styles/menu.scss
+ 101
− 41
View file @ 3e014533
......@@ -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;
......
src/styles/mixins.scss
+ 18
− 18
View file @ 3e014533
......@@ -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;
......
src/styles/variables.scss
+ 1
− 1
View file @ 3e014533
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment