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(