ui + feature(header): issue #105 - User panel

- Transform it into HTML5 component detail + summary.
- Add/remove styles.
- Add "animation" on menu-header
- Make it clear for keyboard users + some accessibility.
- Refactoring, code moved.
- Add JS.
This commit is contained in:
Gaëlle Morin 2019-03-11 19:48:51 +01:00
parent 15db82087a
commit 43825c7606
6 changed files with 136 additions and 34 deletions

View File

@ -12,11 +12,15 @@ sib-notifications(
bind-user bind-user
) )
sib-display#profile( details#user-controls
data-fields='first_name, account.picture', summary(tabindex='0' role='button')
widget-account.picture='sib-display-img', sib-display#user-controls__profile(
bind-user data-fields='first_name, account.picture',
) widget-account.picture='sib-display-img',
bind-user
)
#user-controls__panel
include page-user-panel.pug
button#login(onclick="document.querySelector('sib-auth').login();") login button#login(onclick="document.querySelector('sib-auth').login();") login

View File

@ -10,7 +10,7 @@ html(lang="en")
include dependencies.pug include dependencies.pug
body body
div.layer div.layer
header#header header#header(role='banner')
include header.pug include header.pug
#content #content
include menu-left.pug include menu-left.pug

14
src/page-user-panel.pug Normal file
View File

@ -0,0 +1,14 @@
nav(role="user's functionalities menu")
sib-router
ul
sib-route(name='')
li
a(href='#') My profile
sib-route(name='')
li
a(href='#') Settings
sib-route(name='')
li
a Admin
sib-route
button(role='log out') Log out

View File

@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
rightMenu.classList.toggle('offsite-is-closed'); rightMenu.classList.toggle('offsite-is-closed');
}) })
}) })
}); });

View File

@ -72,6 +72,21 @@
} }
} }
details {
cursor: pointer;
summary {
&::-moz-list-bullet {
list-style-type: none;
}
&::-webkit-details-marker {
display: none;
}
}
}
details { details {
position: relative; position: relative;
@ -101,37 +116,106 @@ details {
} }
} }
#profile { details#user-controls {
div {
display: flex;
flex-direction: row-reverse;
> * { summary:focus {
vertical-align: middle; background-color: $color-purple-dark;
} color: $color-white;
outline: none;
}
img { #user-controls__profile {
border-radius: 100%; div {
height: 48px;
margin-right: 2rem;
object-fit: cover;
object-position: center;
width: 48px;
}
sib-display-div[name='first_name'] {
align-items: center;
display: flex; display: flex;
flex-direction: row-reverse;
div[name='first_name'] { > * {
align-items: flex-end; vertical-align: middle;
}
img {
border-radius: 100%;
height: 4.8rem;
margin-right: 2rem;
object-fit: cover;
object-position: center;
width: 4.8rem;
}
sib-display-div[name='first_name'] {
align-items: center;
display: flex; display: flex;
font-size: 1.8rem;
font-weight: 600;
@include icon('arrow-down');
&::before { div[name='first_name'] {
margin-left: 1.5rem; align-items: flex-end;
display: flex;
font-size: 1.8rem;
font-weight: 600;
@include icon('arrow-down');
&::before {
margin-left: 1.5rem;
}
}
}
}
}
#user-controls__panel {
height: 0;
position: absolute;
right: 0;
z-index: 1;
> nav {
background-color: $color-white;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
top: 0;
width: 208px;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
border-bottom: 1px solid $color-213-20-91;
margin-right: 0;
padding: 1.6rem 1.3rem;
a {
color: $color-text-base;
text-decoration: none;
}
}
}
button {
color: $color-text-base;
margin: 1.6rem 1.3rem;
}
}
}
&[open] {
background-color: $color-purple-dark;
color: $color-white;
#user-controls__profile {
div {
sib-display-div[name='first_name'] {
div[name='first_name'] {
@include icon('close');
&::before {
margin-left: 1.5rem;
}
}
} }
} }
} }

View File

@ -15,6 +15,7 @@ $color-anti-flash-white: hsl(210, 25%, 95%);
$color-text-base: hsl(213, 4%, 50%); $color-text-base: hsl(213, 4%, 50%);
$color-gainsboro: hsl(213, 13%, 86%); $color-gainsboro: hsl(213, 13%, 86%);
$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2); $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
$color-213-20-91: hsl(213, 20%, 91%);
$color-bombay: hsl(215, 9%, 73%); $color-bombay: hsl(215, 9%, 73%);
$color-manatee: hsl(215, 6%, 63%); $color-manatee: hsl(215, 6%, 63%);
$color-dark-lava: hsl(216, 4%, 22%); $color-dark-lava: hsl(216, 4%, 22%);