update: classes for avatar, logo and flex added + css for elements from main header are outside the styles for that header
This commit is contained in:
gaelle morin
parent
21d078bda9
commit
af1d40cbd4
@ -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
|
||||
)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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")
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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 <sib-link next="admin-circle-list">administration</sib-link> ou contacte un administrateur.
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
div.content-box__info
|
||||
div.content-box__info.flex
|
||||
|
||||
include ../../templates/hubl-user-avatar.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 <sib-link next="admin-project-list">administration</sib-link> et demande une invitation.
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user