From 43825c7606943ac8092f7fa652a26eb711e33c16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 11 Mar 2019 19:48:51 +0100 Subject: [PATCH] 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. --- src/header.pug | 14 ++-- src/index.pug | 2 +- src/page-user-panel.pug | 14 ++++ src/scripts/index.js | 1 - src/styles/header.scss | 138 ++++++++++++++++++++++++++++++-------- src/styles/variables.scss | 1 + 6 files changed, 136 insertions(+), 34 deletions(-) create mode 100644 src/page-user-panel.pug diff --git a/src/header.pug b/src/header.pug index 572d134..82bd162 100644 --- a/src/header.pug +++ b/src/header.pug @@ -12,11 +12,15 @@ sib-notifications( bind-user ) -sib-display#profile( - data-fields='first_name, account.picture', - widget-account.picture='sib-display-img', - bind-user -) +details#user-controls + summary(tabindex='0' role='button') + sib-display#user-controls__profile( + 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 diff --git a/src/index.pug b/src/index.pug index c352223..3f08fcc 100644 --- a/src/index.pug +++ b/src/index.pug @@ -10,7 +10,7 @@ html(lang="en") include dependencies.pug body div.layer - header#header + header#header(role='banner') include header.pug #content include menu-left.pug diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug new file mode 100644 index 0000000..d3ee9b8 --- /dev/null +++ b/src/page-user-panel.pug @@ -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 diff --git a/src/scripts/index.js b/src/scripts/index.js index b44a96a..9b4fac6 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) { rightMenu.classList.toggle('offsite-is-closed'); }) }) - }); diff --git a/src/styles/header.scss b/src/styles/header.scss index 607ce0f..e8cbccf 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -72,6 +72,21 @@ } } +details { + cursor: pointer; + + summary { + + &::-moz-list-bullet { + list-style-type: none; + } + + &::-webkit-details-marker { + display: none; + } + } +} + details { position: relative; @@ -101,37 +116,106 @@ details { } } -#profile { - div { - display: flex; - flex-direction: row-reverse; - - > * { - vertical-align: middle; - } - - img { - border-radius: 100%; - height: 48px; - margin-right: 2rem; - object-fit: cover; - object-position: center; - width: 48px; - } +details#user-controls { - sib-display-div[name='first_name'] { - align-items: center; + summary:focus { + background-color: $color-purple-dark; + color: $color-white; + outline: none; + } + + #user-controls__profile { + div { display: flex; + flex-direction: row-reverse; + + > * { + vertical-align: middle; + } + + img { + border-radius: 100%; + height: 4.8rem; + margin-right: 2rem; + object-fit: cover; + object-position: center; + width: 4.8rem; + } - div[name='first_name'] { - align-items: flex-end; + sib-display-div[name='first_name'] { + align-items: center; display: flex; - font-size: 1.8rem; - font-weight: 600; - @include icon('arrow-down'); - - &::before { - margin-left: 1.5rem; + + div[name='first_name'] { + 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; + } + } } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 420b3a3..ad6a14d 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -15,6 +15,7 @@ $color-anti-flash-white: hsl(210, 25%, 95%); $color-text-base: hsl(213, 4%, 50%); $color-gainsboro: hsl(213, 13%, 86%); $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2); +$color-213-20-91: hsl(213, 20%, 91%); $color-bombay: hsl(215, 9%, 73%); $color-manatee: hsl(215, 6%, 63%); $color-dark-lava: hsl(216, 4%, 22%);