autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: classes for avatar, logo and flex added + css for elements from main header are outside the styles for that header

Browse Source
This commit is contained in:
gaelle morin
2020-05-18 10:47:43 +02:00
parent 21d078bda9
commit af1d40cbd4
21 changed files with 235 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/header.pug
View File

@ -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
)

2
src/index.pug
View File

@ -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

374
src/styles/base/header.scss
View File

@ -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;
}
}

32
src/styles/base/main.scss
View File

@ -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;

22
src/styles/base/user-thumb.scss
View File

@ -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 {

2
src/templates/hubl-captain.pug
View File

@ -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'

2
src/templates/hubl-circle-team.pug
View File

@ -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'

2
src/templates/hubl-project-team.pug
View File

@ -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'

2
src/views/admin/page-admin-circles-create.pug
View File

@ -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

6
src/views/admin/page-admin-circles.pug
View File

@ -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
src/views/admin/page-admin-projects-create.pug
View File

@ -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")

6
src/views/admin/page-admin-projects.pug
View File

@ -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'

2
src/views/admin/page-admin-users-create.pug
View File

@ -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

2
src/views/admin/page-admin-users-edit.pug
View File

@ -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

4
src/views/admin/page-admin-users.pug
View File

@ -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'

4
src/views/circle/page-circle-edit.pug
View File

@ -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'

2
src/views/circle/page-circle-left.pug
View File

@ -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.

2
src/views/circle/page-circle-profile.pug
View File

@ -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(

2
src/views/project/page-project-edit.pug
View File

@ -1,4 +1,4 @@
div.content-box__info
div.content-box__info.flex
include ../../templates/hubl-user-avatar.pug

2
src/views/project/page-project-left.pug
View File

@ -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.

2
src/views/project/page-project-profile.pug
View File

@ -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(