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
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
21 changed files with 235 additions and 243 deletions
Show Stats 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') sib-link(next='members')
img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
@ -13,6 +13,8 @@ details#user-controls.notLoggedIn
summary(tabindex='0' role='button') summary(tabindex='0' role='button')
sib-display#user-controls__profile( sib-display#user-controls__profile(
fields='first_name, account.picture' fields='first_name, account.picture'
class-first_name='flex'
class-account.picture='avatar'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
bind-user bind-user
) )

2
src/index.pug
View File

@ -14,7 +14,7 @@ html(lang="en")
if clientCSS if clientCSS
link(rel='stylesheet', href=`${clientCSS}`) link(rel='stylesheet', href=`${clientCSS}`)
body body
header#header.is-spaced(role='banner') header#header.flex.is-spaced(role='banner')
include header.pug include header.pug
main.notLoggedIn main.notLoggedIn

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

@ -5,7 +5,6 @@
background-color: var(--color-header-background); background-color: var(--color-header-background);
color: var(--color-black); color: var(--color-black);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -14,10 +13,11 @@
padding: 0 2.5rem; padding: 0 2.5rem;
} }
#logo { .logo {
flex: 1 0 0; flex: 1 0 0;
align-items: stretch; align-items: stretch;
} }
}
/* General styling for both notification and user's panel */ /* General styling for both notification and user's panel */
details { details {
@ -108,14 +108,8 @@
} }
hubl-user-avatar { hubl-user-avatar {
align-items: center;
background-color: var(--color-avatar-background);
border-radius: 50%;
display: flex;
height: 4.8rem; height: 4.8rem;
justify-content: center;
margin-right: 2rem; margin-right: 2rem;
overflow: hidden;
width: 4.8rem; width: 4.8rem;
@include breakpoint(sm) { @include breakpoint(sm) {
@ -123,23 +117,9 @@
} }
} }
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'] { sib-display-value[name='first_name'] {
@include icon('arrow-down'); @include icon('arrow-down');
align-items: center; align-items: center;
display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 600; font-weight: 600;
@ -184,6 +164,7 @@
border-bottom: 1px solid var(--color-user-panel-list-border); border-bottom: 1px solid var(--color-user-panel-list-border);
margin-right: 0; margin-right: 0;
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;
&:hover { &:hover {
color: var(--color-user-panel-list-text-hover); color: var(--color-user-panel-list-text-hover);
} }
@ -196,6 +177,10 @@
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;
text-align: left; text-align: left;
width: 100%; width: 100%;
&:hover {
color: var(--color-user-panel-list-text-hover);
}
} }
} }
} }
@ -229,5 +214,4 @@
font-size: 26px; font-size: 26px;
} }
} }
}

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

@ -162,6 +162,32 @@ h5 {
padding: 3.2rem; 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 { .content-box {
@include window-style-modal(); @include window-style-modal();
display: flex; display: flex;
@ -243,7 +269,6 @@ h5 {
.content-box__info { .content-box__info {
@extend %padding-block; @extend %padding-block;
display: flex;
flex-direction: column; flex-direction: column;
} }
@ -272,7 +297,6 @@ h5 {
.admin-header { .admin-header {
align-items: center; align-items: center;
display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 5rem; margin-bottom: 5rem;
} }
@ -300,6 +324,10 @@ h5 {
text-align: center; text-align: center;
} }
.flex {
display: flex;
}
.space-between { .space-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@ -24,33 +24,11 @@
/* Styles for elements of user-thumb*/ /* Styles for elements of user-thumb*/
.user-thumb__picture { .user-thumb__picture {
align-items: center;
align-self: center; align-self: center;
background-color: var(--color-avatar-background);
border-radius: 50%;
display: flex;
grid-column: 1 / span 1; grid-column: 1 / span 1;
grid-row: 1 / span 2; grid-row: 1 / span 2;
height: 7vh; height: 7vh;
justify-content: center;
overflow: hidden;
position: relative;
width: 7vh; 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 { .user-thumb__name {

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

@ -6,7 +6,7 @@ sib-widget(name='hubl-captain')
data-src="${await value}" data-src="${await value}"
fields='account.picture, sup(name), sub(profile.city, is_lead)' 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-name='user-thumb__name'
class-profile.city='user-thumb__city' class-profile.city='user-thumb__city'
class-is_lead='user-thumb__lead' 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)' fields='account.picture, sup(name, isadmin), sub(profile.city)'
value-isadmin='${await value.is_admin}' 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-name='user-thumb__name'
class-isadmin='user-thumb__admin' class-isadmin='user-thumb__admin'
class-profile.city='user-thumb__city' 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)' fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
value-isadmin='${await value.is_admin}' 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-user.name='user-thumb__name'
class-isadmin='user-thumb__admin' 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 sib-link(class="backlink right", next='admin-circle-list') Retour
h1.centered Créer un canal h1.centered Créer un canal

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

@ -18,7 +18,7 @@
data-src='${await value}' data-src='${await value}'
fields='account.picture, sup(name), sub(username)' 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-name='user-thumb__name'
class-username='user-thumb__username' 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 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 template
p ${value} p ${value}
div.content-box__info div.content-box__info.flex
sib-link(class="backlink right" next='admin-project-list') Retour sib-link(class="backlink right" next='admin-project-list') Retour
sib-widget(name="hubl-admin-project-add-user") 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) #admin-project-list(hidden)
include ../../templates/hubl-user-avatar.pug include ../../templates/hubl-user-avatar.pug
div.content-box__info div.content-box__info.flex
div.admin-header div.admin-header.flex
h3 Projets h3 Projets
sib-link( sib-link(
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
@ -42,7 +42,7 @@
data-src='${await value}' data-src='${await value}'
fields='account.picture, sup(name), sub(username)' 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-name='user-thumb__name'
class-username='user-thumb__username' 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 sib-link(class='backlink right', next='admin-users-list') Retour
h1.centered Ajouter un utilisateur à la plateforme 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 sib-link(class='backlink right', next='admin-users-list') Retour
h1.centered h1.centered

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

@ -18,7 +18,7 @@
#admin-users-list(hidden) #admin-users-list(hidden)
div.content-box__info div.content-box__info.flex
div.admin-header div.admin-header
h3 Utilisateurs h3 Utilisateurs
sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
@ -37,7 +37,7 @@
data-src=`${endpoints.users || endpoints.get.users}` data-src=`${endpoints.users || endpoints.get.users}`
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' 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-name='user-thumb__name'
class-username='user-thumb__username' class-username='user-thumb__username'
class-profile.city='user-thumb__city' 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 include ../../templates/hubl-user-avatar.pug
@ -9,7 +9,7 @@ div.content-box__info
data-src='${await value.user}' data-src='${await value.user}'
fields='account.picture, sup(name), sub(profile.city)' 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-name='user-thumb__name'
class-profile.city='user-thumb__city' class-profile.city='user-thumb__city'

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

@ -1,5 +1,5 @@
#circle-left(hidden) #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 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. 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) #circle-profile(hidden)
include ../../templates/hubl-circle-team.pug include ../../templates/hubl-circle-team.pug
.content-box__info .content-box__info.flex
.space-between .space-between
sib-display( 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 include ../../templates/hubl-user-avatar.pug

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

@ -1,5 +1,5 @@
#project-left #project-left
div.content-box__info(style="padding: 15px") div.content-box__info.flex(style="padding: 15px")
p Tu as quitté ce projet. 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. 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-circle-team.pug
include ../../templates/hubl-project-team.pug include ../../templates/hubl-project-team.pug
.content-box__info .content-box__info.flex
.space-between .space-between
sib-display( sib-display(