From af1d40cbd4b43f52cea95446c6cca5c3d70e1f2a Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 18 May 2020 10:47:43 +0200 Subject: [PATCH] update: classes for avatar, logo and flex added + css for elements from main header are outside the styles for that header --- src/header.pug | 4 +- src/index.pug | 2 +- src/styles/base/header.scss | 374 +++++++++--------- src/styles/base/main.scss | 32 +- src/styles/base/user-thumb.scss | 22 -- src/templates/hubl-captain.pug | 2 +- src/templates/hubl-circle-team.pug | 2 +- src/templates/hubl-project-team.pug | 2 +- src/views/admin/page-admin-circles-create.pug | 2 +- src/views/admin/page-admin-circles.pug | 6 +- .../admin/page-admin-projects-create.pug | 2 +- src/views/admin/page-admin-projects.pug | 6 +- src/views/admin/page-admin-users-create.pug | 2 +- src/views/admin/page-admin-users-edit.pug | 2 +- src/views/admin/page-admin-users.pug | 4 +- src/views/circle/page-circle-edit.pug | 4 +- src/views/circle/page-circle-left.pug | 2 +- src/views/circle/page-circle-profile.pug | 2 +- src/views/project/page-project-edit.pug | 2 +- src/views/project/page-project-left.pug | 2 +- src/views/project/page-project-profile.pug | 2 +- 21 files changed, 235 insertions(+), 243 deletions(-) diff --git a/src/header.pug b/src/header.pug index 6a7862b..507ea68 100644 --- a/src/header.pug +++ b/src/header.pug @@ -1,4 +1,4 @@ -#logo +.logo sib-link(next='members') img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) @@ -13,6 +13,8 @@ details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( fields='first_name, account.picture' + class-first_name='flex' + class-account.picture='avatar' widget-account.picture='hubl-user-avatar' bind-user ) diff --git a/src/index.pug b/src/index.pug index 65bc545..01d58d4 100644 --- a/src/index.pug +++ b/src/index.pug @@ -14,7 +14,7 @@ html(lang="en") if clientCSS link(rel='stylesheet', href=`${clientCSS}`) body - header#header.is-spaced(role='banner') + header#header.flex.is-spaced(role='banner') include header.pug main.notLoggedIn diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 25676b8..b2cfc39 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -5,7 +5,6 @@ background-color: var(--color-header-background); color: var(--color-black); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); - display: flex; flex-shrink: 0; position: relative; z-index: 1; @@ -14,220 +13,205 @@ padding: 0 2.5rem; } - #logo { + .logo { flex: 1 0 0; align-items: stretch; } +} - /* General styling for both notification and user's panel */ - details { - margin-right: 2.5rem; - position: relative; +/* General styling for both notification and user's panel */ +details { + margin-right: 2.5rem; + position: relative; - @include breakpoint(sm) { - margin-right: 0; + @include breakpoint(sm) { + margin-right: 0; + } + + summary { + + &::-moz-list-bullet { + list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ } + + &::-webkit-details-marker { + display: none; + } + } +} +/* End */ + +sib-notifications { + color: var(--color-bell); + + @include breakpoint(sm) { + padding: 0; + } + + .sib-notifications__container { + position: relative; - summary { + .sib-notifications__button { + @include icon('bell'); + font-size: 3rem; - &::-moz-list-bullet { - list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ + &::before { + margin-left: 0; } - &::-webkit-details-marker { + img { display: none; } - } - } - /* End */ - sib-notifications { - color: var(--color-bell); - - @include breakpoint(sm) { - padding: 0; - } - - .sib-notifications__container { - position: relative; - - .sib-notifications__button { - @include icon('bell'); - font-size: 3rem; - - &::before { - margin-left: 0; - } - - img { - display: none; - } - - .sib-notifications__counter { - left: 2.1rem; - position: absolute; - top: -3px; - } - } - - .sib-notifications__list { + .sib-notifications__counter { + left: 2.1rem; position: absolute; - right: 0; - top: 5.6rem; - } - } - } - - #user-controls { - padding: 0; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - summary { - padding: 18px; - cursor: pointer; - display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ - - &:focus { - background-color: var(--color-user-panel-header-background-open); - color: var(--color-user-panel-header-text-open); - outline: none; + top: -3px; } } - #user-controls__profile { - div { - display: flex; - flex-direction: row-reverse; - - > * { - vertical-align: middle; - } - - hubl-user-avatar { - align-items: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; - height: 4.8rem; - justify-content: center; - margin-right: 2rem; - overflow: hidden; - width: 4.8rem; - - @include breakpoint(sm) { - margin-right: 0; - } - } - - img { - background-color: white; - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - - sib-display-value[name='first_name'] { - @include icon('arrow-down'); - align-items: center; - display: flex; - flex-direction: row-reverse; - font-size: 1.8rem; - font-weight: 600; - - &::before { - margin-left: 1.5rem; - } - - @include breakpoint(sm) { - display: none; - } - } - } - } - - #user-controls__panel { - height: 0; + .sib-notifications__list { position: absolute; right: 0; - z-index: 1; - width: 100%; - top: 83px; - - > nav { - background-color: var(--color-user-panel-list-background); - box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); - position: absolute; - right: 0; - top: 0; - width: 100%; - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - - sib-link { - color: var(--color-grey-4); - display: block; - border-bottom: 1px solid var(--color-user-panel-list-border); - margin-right: 0; - padding: 1.6rem 1.3rem; - &:hover { - color: var(--color-user-panel-list-text-hover); - } - } - } - } - - button { - color: var(--color-grey-4); - padding: 1.6rem 1.3rem; - text-align: left; - width: 100%; - } - } - } - - &[open] { - background-color: var(--color-user-panel-header-background); - color: var(--color-user-panel-header-text); - - #user-controls__profile { - - div { - - sib-display-value[name='first_name'] { - @include icon('close'); - - &::before { - margin-left: 1.5rem; - } - } - } - } - } - } - - .mobile-menu-icon { - display: none; - - @include breakpoint(sm) { - display: block; - padding-left: 0; - font-size: 26px; + top: 5.6rem; } } } +#user-controls { + padding: 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + summary { + padding: 18px; + cursor: pointer; + display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ + + &:focus { + background-color: var(--color-user-panel-header-background-open); + color: var(--color-user-panel-header-text-open); + outline: none; + } + } + + #user-controls__profile { + div { + display: flex; + flex-direction: row-reverse; + + > * { + vertical-align: middle; + } + + hubl-user-avatar { + height: 4.8rem; + margin-right: 2rem; + width: 4.8rem; + + @include breakpoint(sm) { + margin-right: 0; + } + } + + sib-display-value[name='first_name'] { + @include icon('arrow-down'); + align-items: center; + flex-direction: row-reverse; + font-size: 1.8rem; + font-weight: 600; + + &::before { + margin-left: 1.5rem; + } + + @include breakpoint(sm) { + display: none; + } + } + } + } + + #user-controls__panel { + height: 0; + position: absolute; + right: 0; + z-index: 1; + width: 100%; + top: 83px; + + > nav { + background-color: var(--color-user-panel-list-background); + box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); + position: absolute; + right: 0; + top: 0; + width: 100%; + + ul { + list-style: none; + margin: 0; + padding: 0; + + li { + + sib-link { + color: var(--color-grey-4); + display: block; + border-bottom: 1px solid var(--color-user-panel-list-border); + margin-right: 0; + padding: 1.6rem 1.3rem; + + &:hover { + color: var(--color-user-panel-list-text-hover); + } + } + } + } + + button { + color: var(--color-grey-4); + padding: 1.6rem 1.3rem; + text-align: left; + width: 100%; + + &:hover { + color: var(--color-user-panel-list-text-hover); + } + } + } + } + + &[open] { + background-color: var(--color-user-panel-header-background); + color: var(--color-user-panel-header-text); + + #user-controls__profile { + + div { + + sib-display-value[name='first_name'] { + @include icon('close'); + + &::before { + margin-left: 1.5rem; + } + } + } + } + } +} + +.mobile-menu-icon { + display: none; + + @include breakpoint(sm) { + display: block; + padding-left: 0; + font-size: 26px; + } +} + diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index c342ba3..a166abb 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -162,6 +162,32 @@ h5 { padding: 3.2rem; } +.avatar { + align-items: center; + background-color: var(--color-avatar-background); + border-radius: 50%; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + object-position: center; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } +} + .content-box { @include window-style-modal(); display: flex; @@ -243,7 +269,6 @@ h5 { .content-box__info { @extend %padding-block; - display: flex; flex-direction: column; } @@ -272,7 +297,6 @@ h5 { .admin-header { align-items: center; - display: flex; justify-content: space-between; margin-bottom: 5rem; } @@ -300,6 +324,10 @@ h5 { text-align: center; } +.flex { + display: flex; +} + .space-between { display: flex; justify-content: space-between; diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss index 6dbbb39..99ffb81 100644 --- a/src/styles/base/user-thumb.scss +++ b/src/styles/base/user-thumb.scss @@ -24,33 +24,11 @@ /* Styles for elements of user-thumb*/ .user-thumb__picture { - align-items: center; align-self: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; grid-column: 1 / span 1; grid-row: 1 / span 2; height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; width: 7vh; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } } .user-thumb__name { diff --git a/src/templates/hubl-captain.pug b/src/templates/hubl-captain.pug index aacb117..9de7da3 100644 --- a/src/templates/hubl-captain.pug +++ b/src/templates/hubl-captain.pug @@ -6,7 +6,7 @@ sib-widget(name='hubl-captain') data-src="${await value}" fields='account.picture, sup(name), sub(profile.city, is_lead)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-profile.city='user-thumb__city' class-is_lead='user-thumb__lead' diff --git a/src/templates/hubl-circle-team.pug b/src/templates/hubl-circle-team.pug index 4e68749..61404d0 100644 --- a/src/templates/hubl-circle-team.pug +++ b/src/templates/hubl-circle-team.pug @@ -7,7 +7,7 @@ sib-widget(name='hubl-circle-team-template') fields='account.picture, sup(name, isadmin), sub(profile.city)' value-isadmin='${await value.is_admin}' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-isadmin='user-thumb__admin' class-profile.city='user-thumb__city' diff --git a/src/templates/hubl-project-team.pug b/src/templates/hubl-project-team.pug index dc496f3..4b8f453 100644 --- a/src/templates/hubl-project-team.pug +++ b/src/templates/hubl-project-team.pug @@ -7,7 +7,7 @@ sib-widget(name='hubl-project-team') fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' - class-user.account.picture='user-thumb__picture' + class-user.account.picture='avatar user-thumb__picture' class-user.name='user-thumb__name' class-isadmin='user-thumb__admin' diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index eeb1dd5..8acd491 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex sib-link(class="backlink right", next='admin-circle-list') Retour h1.centered Créer un canal diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index b79853f..2fc199b 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -18,7 +18,7 @@ data-src='${await value}' fields='account.picture, sup(name), sub(username)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-username='user-thumb__username' @@ -26,9 +26,9 @@ ) - div.content-box__info + div.content-box__info.flex - div.admin-header + div.admin-header.flex h3 Canaux diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index d672213..38ae911 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -2,7 +2,7 @@ sib-widget(name='hubl-template-project-title') template p ${value} -div.content-box__info +div.content-box__info.flex sib-link(class="backlink right" next='admin-project-list') Retour sib-widget(name="hubl-admin-project-add-user") diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index fb3ee37..a70260b 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -13,8 +13,8 @@ #admin-project-list(hidden) include ../../templates/hubl-user-avatar.pug - div.content-box__info - div.admin-header + div.content-box__info.flex + div.admin-header.flex h3 Projets sib-link( class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' @@ -42,7 +42,7 @@ data-src='${await value}' fields='account.picture, sup(name), sub(username)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-username='user-thumb__username' diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index f178ad9..8827165 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/src/views/admin/page-admin-users-create.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex sib-link(class='backlink right', next='admin-users-list') Retour h1.centered Ajouter un utilisateur à la plateforme diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index 940495e..751252a 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/src/views/admin/page-admin-users-edit.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex sib-link(class='backlink right', next='admin-users-list') Retour h1.centered diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index f737ba4..2a9d5a0 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -18,7 +18,7 @@ #admin-users-list(hidden) - div.content-box__info + div.content-box__info.flex div.admin-header h3 Utilisateurs sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') @@ -37,7 +37,7 @@ data-src=`${endpoints.users || endpoints.get.users}` fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-username='user-thumb__username' class-profile.city='user-thumb__city' diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 77b974e..8da2824 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex include ../../templates/hubl-user-avatar.pug @@ -9,7 +9,7 @@ div.content-box__info data-src='${await value.user}' fields='account.picture, sup(name), sub(profile.city)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-profile.city='user-thumb__city' diff --git a/src/views/circle/page-circle-left.pug b/src/views/circle/page-circle-left.pug index 098c61a..8ad8fe8 100644 --- a/src/views/circle/page-circle-left.pug +++ b/src/views/circle/page-circle-left.pug @@ -1,5 +1,5 @@ #circle-left(hidden) - div.content-box__info(style="padding: 15px") + div.content-box__info.flex(style="padding: 15px") p Tu as quitté ce canal. p Pour le rejoindre à nouveau, rends-toi dans le panneau administration ou contacte un administrateur. diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 2c583fb..d880640 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -4,7 +4,7 @@ sib-router(default-route='circle-profile', hidden) #circle-profile(hidden) include ../../templates/hubl-circle-team.pug - .content-box__info + .content-box__info.flex .space-between sib-display( diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 1358fc8..d775273 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex include ../../templates/hubl-user-avatar.pug diff --git a/src/views/project/page-project-left.pug b/src/views/project/page-project-left.pug index beb548c..71135fc 100644 --- a/src/views/project/page-project-left.pug +++ b/src/views/project/page-project-left.pug @@ -1,5 +1,5 @@ #project-left - div.content-box__info(style="padding: 15px") + div.content-box__info.flex(style="padding: 15px") p Tu as quitté ce projet. p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau administration et demande une invitation. diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 682af11..078e22b 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -7,7 +7,7 @@ sib-router(default-route='project-profile', hidden) include ../../templates/hubl-circle-team.pug include ../../templates/hubl-project-team.pug - .content-box__info + .content-box__info.flex .space-between sib-display(