fix: merge conflicts

This commit is contained in:
Jure Ursic 2020-06-15 13:58:51 +02:00
commit 628fec9a94
56 changed files with 1667 additions and 1604 deletions

View File

@ -264,3 +264,21 @@ volumes:
when: manual
tags:
- deploy
communityhubl:
stage: deployment
environment:
name: communityhubl
url: https://community.hubl.world
before_script:
- npm ci --cache .npm --prefer-offline --only=production
script:
- echo "$APP_CONFIG_HUBL_COMMUNITY" > config.json
- echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
- npm run build
- scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community-hubl@astral.startinblox.com:~/front/
only:
- master
when: manual
tags:
- deploy

View File

@ -19,6 +19,11 @@
--color-h1: var(--color-title);
--color-h2: var(--color-title);
/* Depreciated */
--color-tag-group-text: #9BA0A7;
--color-tag-group-border: var(--color-primary);
--color-label-dark: var(--color-grey-6);
/* Header's elements */
--color-header-background: var(--color-white);
--color-bell: var(--color-complementary-darken);
@ -58,8 +63,6 @@
/* Tags */
--color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary);
--color-tag-group-text: #9BA0A7;
--color-tag-group-border: var(--color-primary);
/* Form elements */
--color-button-white: var(--color-white);
@ -78,7 +81,6 @@
--color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-complementary);
--color-label-light: var(--color-grey-6);
/* Skill */
@ -142,22 +144,27 @@
}
/* Button to delete a channel */
/* box-button is depreciated */
#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete,
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
background: var(--color-white);
border: 1px solid var(--color-complementary);
color: var(--color-complementary);
}
#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button,
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
color: var(--color-complementary);
}
#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover,
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
background: var(--color-complementary);
border: 1px solid var(--color-complementary);
color: var(--color-white);
}
#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button,
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
color: var(--color-white);
}

View File

@ -24,7 +24,7 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer)
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.4" defer)
//- script(type="module" src="/lib/sib-directory/dist/index.js" defer)
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
@ -33,7 +33,7 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
if endpoints.users || (endpoints.get && endpoints.get.users)
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer)
//- script(type="module" src="/lib/sib-chat/sib-chat.js" defer)
//-script(type="module" src="/lib/sib-chat/sib-chat.js" defer)
script(src="/scripts/index.js" defer)

View File

@ -1,11 +1,6 @@
#logo
sib-link(next='members')
img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
//- #search-bar
//- input#search-input(type='search')
//- i#search-icon.icon-magnifier(aria-hidden='true')
//- i#close-search-icon.icon-close(aria-hidden='true')
.logo
sib-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
sib-notifications.notLoggedIn(
nested-field="inbox"
@ -18,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
)
@ -29,6 +26,8 @@ details#user-controls.notLoggedIn
sib-link(next='profile') Mon profil
li
sib-link(next='admin') Administration
li
sib-link(next='about') A propos
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter
button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Se connecter

View File

@ -1,4 +1,4 @@
<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<svg class="alien" fill="#A59D9D" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 800 KiB

View File

@ -14,12 +14,16 @@ html(lang="en")
if clientCSS
link(rel='stylesheet', href=`${clientCSS}`)
body
header#header(role='banner')
include header.pug
main.notLoggedIn
include menu-left.pug
div#viewport
.wrapper
header#header.header.is-spaced(role='banner')
include header.pug
nav#main__menu.left-menu.jsLeftMenu
include menu-left.pug
main#viewport.content.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden).no-sidebar.with-padding
@ -51,6 +55,9 @@ html(lang="en")
#admin(hidden).with-sidebar
include page-admin.pug
#about.no-sidebar.with-padding
include page-about.pug
if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
#profile(hidden).no-sidebar
@ -63,4 +70,4 @@ html(lang="en")
type=`${provider.type}`
url=`${provider.url}`
id=`${provider.id}`
)
)

View File

@ -47,94 +47,95 @@ sib-widget(name='hubl-menu-fix-url-project')
order-by="customer.name"
)
nav#main__menu.jsLeftMenu
sib-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
sib-route.menu(name='dashboard')
div.menu-label Tableau de bord
div.menu-icon.icon-home
div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
sib-route.menu(name='members')
div.menu-label Annuaire des membres
div.menu-icon.icon-people
div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label Offres de mission
div.menu-icon.icon-briefcase
div.divider
if endpoints.events || (endpoints.get && endpoints.get.events)
sib-route.menu(name='events')
div.menu-label Evènements
div.menu-icon.icon-calendar
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects)
div
sib-link(next='admin-project-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Projets
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.project-tab(
bind-user
nested-field='projects'
fields='project'
empty-widget='hubl-create'
empty-value='projet'
widget-project='hubl-menu-fix-url-project'
order-by='project.customer.name'
next='project'
)
div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles)
div
sib-link(next='admin-circle-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Canaux
div.menu-icon.icon-folder-alt
sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
sib-display(
bind-user
nested-field='circles'
fields='circle'
empty-widget='hubl-create'
empty-value='canal'
widget-circle='hubl-menu-fix-url-circle'
order-by='circle.name'
next='circle'
)
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
sib-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
sib-route.menu(name='dashboard')
div.menu-label Tableau de bord
div.menu-icon.icon-home
div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
sib-route.menu(name='members')
div.menu-label Annuaire des membres
div.menu-icon.icon-people
div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label Offres de mission
div.menu-icon.icon-briefcase
div.divider
if endpoints.events || (endpoints.get && endpoints.get.events)
sib-route.menu(name='events')
div.menu-label Evènements
div.menu-icon.icon-calendar
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects)
div
sib-link(next='admin-project-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Messages
div.menu-icon.icon-envelope-letter
sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.nosub(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
fields='name, chatProfile.jabberID, badge'
search-fields="name"
search-label-name="Rechercher..."
search-widget-name="hubl-search-users"
widget-name='sib-display-div'
widget-badge='hubl-counter'
widget-chatProfile.jabberID='hubl-menu-jabberid'
action-badge='badge'
order-by='username'
next='messages'
paginate-by='10'
)
div.divider
div.menu-icon.icon-arrow-right-circle
div.menu-label Projets
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.project-tab(
bind-user
nested-field='projects'
fields='project'
empty-widget='hubl-create'
empty-value='projet'
widget-project='hubl-menu-fix-url-project'
order-by='project.customer.name'
next='project'
)
div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles)
div
sib-link(next='admin-circle-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Canaux
div.menu-icon.icon-folder-alt
sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.circle-tab(
bind-user
nested-field='circles'
fields='circle'
empty-widget='hubl-create'
empty-value='canal'
widget-circle='hubl-menu-fix-url-circle'
order-by='circle.name'
next='circle'
)
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Messages
div.menu-icon.icon-envelope-letter
sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.nosub.message-tab(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
fields='name, chatProfile.jabberID, badge'
search-fields="name"
search-label-name="Rechercher..."
search-widget-name="hubl-search-users"
widget-name='sib-display-div'
widget-badge='hubl-counter'
widget-chatProfile.jabberID='hubl-menu-jabberid'
action-badge='badge'
order-by='username'
next='messages'
paginate-by='10'
)
div.divider
sib-route(name='admin', hidden)
sib-route.menu(name='profile', hidden)
sib-route(name='admin', hidden)
sib-route.menu(name='profile', hidden)
sib-route(name='about', hidden)

17
src/page-about.pug Normal file
View File

@ -0,0 +1,17 @@
.views-container
h2 A propos
div.flex-content-white
div
div
h3 Cette application est développée par Startin'blox
p Startinblox est une coopérative qui développe des outils libres pour construire facilement et à moindre coût des applications fédérées et interopérables basées sur les derniers standards du web poussés par le projet SOLID.
p Sa mission est de redonner le pouvoir aux utilisateurs en leur permettant de reprendre la main sur leur outil numérique et de bénéficier dun effet de réseau au sein dun écosystème choisi afin de sémanciper des grandes plateformes.
div
a(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
div
div
h3 Contacte-nous
p Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ?
div
a(href="https://startinblox.com/fr/#home-contact" target="_blank").main-cta Contact

View File

@ -12,7 +12,7 @@ nav.jsRightMenu(role='navigation')
sib-router(default-route='admin-circles')
ul
li.jsOffsiteToggle
a Fold menu
a Replier le menu
if (endpoints.users || (endpoints.get && endpoints.get.users))
sib-route.active-color(name='admin-users')
li

View File

@ -1,7 +1,7 @@
.views-container.sidebar-is-closed
.content-box.full-width.with-form
.content-box.flex.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
sib-display(
bind-resources
fields='name, description'
@ -10,11 +10,11 @@
class-description='h1-aside description'
)
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
div
div.content-box__height
sib-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden)
include views/circle/page-circle-chat.pug
#circle-information(hidden)
#circle-information.content-box__height(hidden)
include views/circle/page-circle-profile.pug
nav.jsRightMenu(role='navigation')

View File

@ -1,5 +1,5 @@
.views-container
h2 Tableau de bord
h1 Tableau de bord
sib-dashboard(
data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
)

View File

@ -1,16 +1,17 @@
.content-box.full-width
.content-box.flex.full-width
sib-display.content-box__header(
bind-resources
fields='name, parenthesis, username, endParenthesis'
value-parenthesis=" ("
value-endParenthesis=")"
div.content-box__header
sib-display(
bind-resources
fields='name, parenthesis, username, endParenthesis'
value-parenthesis=" ("
value-endParenthesis=")"
class-parenthesis='name'
class-endParenthesis='name'
class-name='name'
class-username='name'
)
class-parenthesis='h1-like'
class-endParenthesis='h1-like'
class-name='h1-like'
class-username='h1-like'
)
.chat-view
sib-chat(

View File

@ -1,7 +1,7 @@
.views-container.sidebar-is-closed
.content-box.full-width.with-form
.content-box.flex.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
sib-display(
bind-resources
fields='const-title1, number, customer.name, name'
@ -9,27 +9,20 @@
class-const-title1='h1-like'
class-number='h1-like word-spacing-right'
class-customer.name='h1-like'
class-name='h1-aside name'
class-name='h1-aside'
value-const-title1='N°'
)
.mobile-sidebar-button.jsMobileSidebarOpenButton
button.icon-arrow-left-circle
span MENU
div
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
div.content-box__height
sib-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden)
include views/project/page-project-chat.pug
#project-information(hidden)
#project-information.content-box__height(hidden)
include views/project/page-project-profile.pug
#project-picture(hidden)
include views/project/page-project-picture.pug
dialog(id='project-contributions-help').modal
sib-link(next='project-profile')
button.icon-close
img(src='/images/contributions-help.png')
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
ul

View File

@ -8,25 +8,25 @@
@if $type==string {
@if $min==xs {
@media (max-width: 768px) {
@media (max-width: 576px) {
@content;
}
}
@else if $min==sm {
@media (max-width: 1024px) {
@media (max-width: 768px) {
@content;
}
}
@else if $min==md {
@media (max-width: 1200px) {
@media (max-width: 991px) {
@content;
}
}
@else if $min==lg {
@media (min-width: 1201px) {
@media (min-width: 992px) {
@content;
}
}

View File

@ -34,7 +34,7 @@
--color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black);
--color-bell: var(--color-secondary);
--color-avatar-background: var(--color-grey-11);
--color-avatar-background: var(--color-grey-10);
--color-title: var(--color-secondary);
--color-h1: var(--color-secondary);
--color-h2: var(--color-secondary);
@ -74,12 +74,12 @@
--color-scrollbar-right-track: var(--color-grey-9);
--color-scrollbar-left-background: var(--color-secondary);
--color-scrollbar-left-track: var(--color-grey-11);
--color-scrollbar-table-background: var(--color-grey-10);
--color-scrollbar-table-track: var(--color-secondary);
/* tags */
--color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary);
--color-tag-group-text: var(--color-primary);
--color-tag-group-border: var(--color-primary);
/* Form elements */
--color-button-white: var(--color-white);
@ -98,7 +98,6 @@
--color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-secondary);
--color-label-light: var(--color-grey-6);
/* skill */
@ -118,6 +117,14 @@
--color-backlink: var(--color-secondary);
--color-content-header: var(--color-grey-9);
/* directory */
--color-directory-primary: var(--color-primary)!important;
--color-directory-secondary: var(--color-secondary)!important;
--color-directory-complementary: var(--color-complementary)!important;
--color-directory-complementary-darken: var(--color-complementary-darken)!important;
--color-directory-white: var(--color-white)!important;
--color-directory-black: var(--color-black)!important;
}
/* Variables for event */

View File

@ -1,34 +0,0 @@
%grid-layer {
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]7em[middle]auto[end];
}
%flex-grid-layer {
display: flex;
flex-direction: column;
align-items: stretch;
}
%grid-layer-main {
@extend %flex-grid-layer;
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
%grid-layer-links {
@extend %flex-grid-layer;
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}
%containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}

View File

@ -0,0 +1,58 @@
#about{
$main-color: rgb(236, 94, 92);
$second-color: white;
h2,h3{
text-transform: uppercase;
}
h2{
margin-left: 1.5em;
}
.flex-content-white{
display: flex;
@media only screen and (max-width: 768px) {
flex-direction: column;
}
>div{
padding: 2em 2.5em;
text-align: center;
margin: 0 1.5em 3em 1.5em;
background: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.11);
display: flex;
flex-direction: column;
justify-content: space-between;
}
>div:first-child{
width: 60%;
}
>div:last-child{
width: 35%;
@media only screen and (max-width: 768px) {
width: 60%;
}
}
a{
text-decoration: none;
}
}
.main-cta{
background: $second-color none repeat scroll 0% 0%;
border: 1px solid $main-color;
border-radius: 55px;
color: $main-color;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
width: 25%;
font-size: 1.1rem;
align-self: center;
padding: 0.5rem 1.5rem;
}
.main-cta:hover{
background: $main-color none repeat scroll 0% 0%;
border : 1px solid $second-color;
color: $second-color;
}
}

View File

@ -1,61 +1,91 @@
#admin-circle-create,
#admin-project-create,
#admin-users-create,
#admin-users-edit {
.form form {
display: block;
height: fit-content;
margin-bottom: 75px;
transition: all .3s ease;
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
@include breakpoint(lg) {
display: flex;
flex-direction: column;
transition: all .3s ease;
}
}
.content-box {
.button-register>form>input[type=submit] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
.form-label {
/*flex: 1 1 auto;*/
label {
display: flex;
flex-direction: column; /* To align label and input vertically */
font-weight: 600;
margin-bottom: 0.8rem;
margin-top: 1.8rem;
text-transform: uppercase;
}
&.is-light label {
color: var(--color-label-light);
}
}
[name^='line-'] {
@include breakpoint(lg) {
display: flex;
justify-content: space-between;
}
}
.is-full-width {
box-sizing: border-box;
flex: 1 1 100%;
}
.is-half-width {
box-sizing: border-box;
flex: 0 1 calc(50% - 2.5rem);
}
.input-text-like input:not([type='file']):not([type='search']):not([type='submit']),
.input-text-like textarea {
-webkit-tap-highlight-color: var(--color-grey-7);
background-color: var(--color-input-background);
box-sizing: border-box;
border: 2px solid var(--color-input-background);
color: var(--color-input-text);
/*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1;
margin-top: 0.8rem;
min-width: 0;
padding: 1rem;
&:focus,
&:active {
border-bottom: 2px solid var(--color-input-active);
}
}
textarea {
height: 100px;
}
.content-box {
&.with-form {
h1 {
color: var(--color-title);
font-weight: bold;
font-size: 2rem;
&.centered {
text-align: center;
}
}
.fieldset {
border-bottom: 1px solid var(--color-fieldset-border);
color: var(--color-title);
display: flex;
flex: 1 0 100%;
font-size: 1.8rem;
font-weight: 600;
margin: 2.6rem 0 1.8rem;
padding-bottom: 0.8rem;
}
[name^='block-'] {
margin-bottom: 2.75rem;
}
[name$='border-top'] {
border-top: 1px solid var(--color-grey-10);
margin-top: 3rem;
}
form {
display: flex;
flex-direction: column;
}
sib-set-default:not([name='user-thumb']) {
clear: both;
/*sib-set-default:not([name='user-thumb']) {
clear: both;
display: flex!important;
flex-wrap: wrap;
max-width: 100%;
@ -64,380 +94,262 @@
float: left;
width: 50%;
}
}
}*/
}
}
label {
display: flex;
flex-direction: column;
/*sib-form[set-user-id-select] {
input:not([type='file']),
textarea {
-webkit-tap-highlight-color: var(--color-grey-7);
background-color: var(--color-input-background);
box-sizing: border-box;
border: 2px solid var(--color-input-background);
color: var(--color-input-text);
/*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1;
min-width: 0;
padding: 1rem;
input[type="submit"] {
margin-left: 0;
margin-top: 0;
}
select {
display: none;
}
}*/
/* WIDGETS SIB (let in .content-box to override default styles) */
sib-form-auto-completion,
hubl-status {
.ss-main {
font-weight: normal;
text-transform: none;
.ss-single-selected {
background-color: var(--color-input-background);
border: none;
border-radius: 0px;
color: var(--color-input-text);
font-weight: normal;
margin-top: 0.8rem;
min-height: 4.6rem;
padding-left: 1.2rem;
.ss-disabled {
color: var(--color-grey-5);
}
input:not([type="search"]):not([type="file"]),
textarea {
border: 2px solid var(--color-input-background);
.ss-arrow {
font-size: 1.8rem;
margin: 0 18px 0 0;
&:focus,
&:active {
border-bottom: 2px solid var(--color-input-active);
}
}
textarea {
height: 100px;
}
}
sib-form[set-user-id-select] {
input[type="submit"] {
margin-left: 0;
margin-top: 0;
}
select {
display: none;
}
}
/* CLASSES Peut-être à sortir de .content-box */
.block.select-add-member>form { /* circle-profile */
display: flex;
flex-direction: row;
margin-bottom: 2.6rem;
label {
margin-top: 0;
>.ss-main {
font-weight: normal;
min-width: 35vw;
text-transform: none;
>.ss-single-selected {
align-items: center;
background-color: var(--color-input-background);
border: none;
border-radius: 0px;
color: var(--color-input-text);
display: flex;
justify-content: flex-end;
min-height: 4.2rem;
padding-left: 1.2rem;
.ss-arrow {
font-size: 1.8rem;
margin: 0 18px 0 0;
span {
border: solid var(--color-input-icon);
border-width: 0 2px 2px 0;
}
}
}
.ss-list {
color: var(--color-select-list);
}
}
}
>input[type='submit'] {
@extend
.button,
.btn-margin-left,
.text-bold,
.text-uppercase,
.button-complementary,
.bordered;
margin-top: auto;
margin-bottom: auto;
}
}
.form-container>form {
margin-top: 2.7rem;
}
.form-edit>form {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
}
.form-label {
/*flex: 1 1 auto;*/
font-weight: 600;
&.is-dark label {
color: var(--color-label-dark);
margin-top: 3rem;
&>*:nth-child(2) {
margin-top: 0.8rem;
}
}
&.is-light label {
color: var(--color-label-light);
margin-top: 1.8rem;
text-transform: uppercase;
&>*:nth-child(2) {
margin-top: 0.8rem;
}
}
}
.is-full-width {
flex: 1 1 100%;
}
.is-half-width {
box-sizing: border-box;
flex: 0 0 50%;
&:nth-child(even) {
padding-left: 1.7rem;
}
&:nth-child(odd) {
padding-right: 1.7rem;
}
}
/* WIDGETS SIB */
sib-form-auto-completion.member-select, hubl-status {
align-self: flex-end;
>label:first-of-type>div {
font-weight: 600;
}
.ss-single-selected {
background-color: var(--color-input-background);
border: none;
border-radius: 0px;
color: var(--color-input-text);
display: flex;
font-weight: normal;
margin-top: 0.8rem;
min-height: 4.4rem;
padding-left: 1rem;
text-transform: none;
.ss-disabled {
color: var(--color-grey-5);
}
.ss-arrow span {
span {
border: solid var(--color-input-icon);
border-width: 0 2px 2px 0;
}
}
.ss-content .ss-list .ss-option {
color: var(--color-input-text);
font-weight: normal;
text-transform: none;
}
}
}
hubl-status {
align-self: auto;
}
.ss-list {
color: var(--color-select-list);
font-weight: normal;
text-transform: none;
}
}
sib-form-date {
input[type="date"] {
background-image: url("/images/calendar.svg");
background-position: right 12px top 50%;
background-repeat: no-repeat;
background-size: 1.4rem;
color: var(--color-input-icon);
cursor: default;
font-size: 1.4rem;
margin-top: 1.6rem;
max-width: 50vw;
padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
position: relative;
/* Additional styles for the select to add a member in circle-edit */
.block.select-add>form {
display: block;
&::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0;
position: absolute;
right: 8px;
}
@include breakpoint(lg) {
display: flex;
flex-direction: row;
margin-bottom: 2.6rem;
}
&::-webkit-clear-button {
cursor: pointer;
margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
margin-right: 5px;
}
label {
margin-top: 0;
}
&::-webkit-inner-spin-button {
display: none;
}
}
}
.ss-main {
min-width: 35vw;
}
sib-form-file {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.button-complementary,
.bordered;
margin: 10px 0;
width: 100%;
label {
align-items: baseline;
clear: both;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
div {
width: 100%;
}
input[type='text'] {
box-sizing: border-box;
flex: 0 0 50%;
}
input[type='file'] {
box-sizing: border-box;
flex: 0 0 20%;
color: var(--color-input-text);
cursor: pointer;
padding-left: 3rem;
}
}
}
sib-multiple-form {
margin-top: 1.8rem;
}
sib-multiple-select {
&.select-groups .ss-values .ss-disabled::before {
content: "Sélectionne des groupes";
}
&.select-skills .ss-values .ss-disabled::before {
content: "Select skills";
}
sib-form-auto-completion > label {
display: flex;
flex-direction: column;
.ss-main {
font-weight: normal;
margin-bottom: 7.8rem;
margin-top: 1.6rem;
max-width: 50vw;
text-transform: none;
.ss-multi-selected {
align-items: center;
background-color: var(--color-input-background);
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
min-height: 4.2rem;
padding-left: 1.2rem;
.ss-add {
font-size: 1.8rem;
margin: 0 18px 0 0;
span.ss-plus {
background: var(--color-input-icon);
&::after {
background: var(--color-input-icon);
}
}
}
.ss-values {
background: transparent;
position: absolute;
top: 6rem;
width: 100%;
.ss-disabled {
color: transparent;
font-size: 1.4rem;
left: calc(1.2rem - 5px);
position: absolute;
top: calc(-6rem + 7px);
&::before {
color: var(--color-grey-5);
font-weight: normal;
}
}
.ss-value {
@extend .skill;
display: flex;
.ss-value-delete {
font-weight: normal;
}
}
}
}
.ss-list {
color: var(--color-input-text);
}
}
}
}
/* CUSTOM WIDGETS */
hubl-member-form {
width: 100%;
form {
display: flex;
flex-direction: column;
[name='member-form__input'] {
margin-bottom: 1rem;
}
sib-form-auto-completion {
float: left;
}
input[type='submit'] {
background-color: var(--color-select-add-button-background);
border: 1px solid var(--color-select-add-button);
color: var(--color-select-add-button);
}
}
@include breakpoint(lg) {
margin: auto 0 auto 2.2rem;
width: auto;
}
}
}
/* End */
sib-form-date {
input[type="date"] {
background-image: url("/images/calendar.svg");
background-position: right 12px top 50%;
background-repeat: no-repeat;
background-size: 1.4rem;
color: var(--color-input-icon);
cursor: default;
font-size: 1.4rem;
margin-top: 1.6rem;
max-width: 50vw;
padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
position: relative;
&::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0;
position: absolute;
right: 8px;
}
&::-webkit-clear-button {
cursor: pointer;
margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
margin-right: 5px;
}
&::-webkit-inner-spin-button {
display: none;
}
}
}
sib-form-file {
label {
align-items: baseline;
clear: both;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
div {
width: 100%;
}
input[type='text'] {
box-sizing: border-box;
flex: 0 0 50%;
}
input[type='file'] {
box-sizing: border-box;
flex: 0 0 20%;
color: var(--color-input-text);
cursor: pointer;
padding-left: 3rem;
}
}
}
/*sib-multiple-select {
&.select-skills .ss-values .ss-disabled::before {
content: "Select skills";
}
sib-form-auto-completion > label {
display: flex;
flex-direction: column;
.ss-main {
font-weight: normal;
margin-bottom: 7.8rem;
margin-top: 1.6rem;
max-width: 50vw;
text-transform: none;
.ss-multi-selected {
align-items: center;
background-color: var(--color-input-background);
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
min-height: 4.2rem;
padding-left: 1.2rem;
.ss-add {
font-size: 1.8rem;
margin: 0 18px 0 0;
span.ss-plus {
background: var(--color-input-icon);
&::after {
background: var(--color-input-icon);
}
}
}
.ss-values {
background: transparent;
position: absolute;
top: 6rem;
width: 100%;
.ss-disabled {
color: transparent;
font-size: 1.4rem;
left: calc(1.2rem - 5px);
position: absolute;
top: calc(-6rem + 7px);
&::before {
color: var(--color-grey-5);
font-weight: normal;
}
}
.ss-value {
@extend .skill;
display: flex;
.ss-value-delete {
font-weight: normal;
}
}
}
}
.ss-list {
color: var(--color-input-text);
}
}
}
}*/
/* CUSTOM WIDGETS */
hubl-member-form {
width: 100%;
form {
display: flex;
flex-direction: column;
[name='member-form__input'] {
margin-bottom: 1rem;
}
sib-form-auto-completion {
float: left;
}
input[type='submit'] {
background-color: var(--color-select-add-button-background);
border: 1px solid var(--color-select-add-button);
color: var(--color-select-add-button);
}
}
}

View File

@ -1,95 +1,89 @@
#header {
max-height: 83px;
height: 83px;
max-height: 50px;
height: 50px;
display: flex;
align-items: center;
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;
// padding: 1.6rem 0.64rem;
padding: 0 2.5rem;
position: fixed;
z-index: 999;
width: -webkit-fill-available;
width: -moz-available;
@include breakpoint(lg) {
max-height: 83px;
height: 83px;
position: relative;
}
&.is-spaced {
padding: 0 0.8rem;
@include breakpoint(lg) {
padding: 0 2.5rem;
}
}
>*:not(:first-child) {
margin-left: 2rem;
@include breakpoint(lg) {
margin-left: 0;
}
}
.logo {
flex: 1 0 0;
align-items: stretch;
}
/* To remove the place taken by this element */
sib-widget[name='hubl-user-avatar'] {
display: contents;
}
}
/* General styling for both notification and user's panel */
details {
margin-right: 0;
position: relative;
z-index: 1;
#logo {
flex: 1 1 0;
}
#search-bar {
position: relative;
#search-input {
border-radius: 10em;
padding: 0.64rem 1.28rem;
border: 1px solid var(--color-grey-10);
height: 3.8rem;
width: 28rem;
-webkit-appearance: textfield;
& ~ #close-search-icon,
& ~ #search-icon {
color: var(--color-grey-10);
display: block;
font-size: 1.7rem;
margin: auto;
position: absolute;
right: 3.7rem;
top: 50%;
transform: translateY(-50%);
-webkit-text-stroke: 1px var(--color-grey-10);
}
& ~ #close-search-icon {
opacity: 0;
}
&:focus {
& ~ #close-search-icon {
opacity: 1;
}
& ~ #search-icon {
visibility: hidden;
}
}
}
}
sib-notifications {
color: var(--color-bell);
@include breakpoint(sm) {
padding: 0;
}
}
details {
@include breakpoint(lg) {
margin-right: 2.5rem;
position: relative;
}
@include breakpoint(sm) {
margin-right: 0;
summary {
&::-moz-list-bullet {
list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
}
summary {
&::-moz-list-bullet {
list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
}
&::-webkit-details-marker {
display: none;
}
&::-webkit-details-marker {
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;
font-size: 2.5rem;
@include breakpoint(lg) {
font-size: 3rem;
}
&::before {
margin-left: 0;
@ -100,169 +94,191 @@
}
.sib-notifications__counter {
left: 2.1rem;
left: 2rem;
position: absolute;
top: -3px;
top: 1px;
@include breakpoint(lg) {
left: 2.1rem;
top: -3px;
}
}
}
.sib-notifications__list {
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;
overflow-x: hidden;
position: fixed;
left: 0;
top: 4.5rem;
width: 100vw;
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;
@include breakpoint(md) {
border: 0;
border-radius: 0;
}
}
#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;
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);
@include breakpoint(lg) {
position: absolute;
left: auto;
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%;
}
top: 5.6rem;
width: 300px;
}
}
&[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;
}
}
}
#user-controls {
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
summary {
cursor: pointer;
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
@include breakpoint(lg) {
padding: 18px;
}
&:focus {
background-color: transparent;
color: var(--color-user-panel-header-text-open);
outline: none;
@include breakpoint(lg) {
background-color: var(--color-user-panel-header-background-open);
}
}
}
#user-controls__profile {
div {
display: flex;
flex-direction: row-reverse;
> * {
vertical-align: middle;
}
hubl-user-avatar {
height: 3.3rem;
margin-right: 0;
width: 3.3rem;
@include breakpoint(lg) {
height: 4.8rem;
margin-right: 2rem;
width: 4.8rem;
}
}
sib-display-value[name='first_name'] {
@include icon('arrow-down');
align-items: center;
display: none;
flex-direction: row-reverse;
font-size: 1.8rem;
font-weight: 600;
&::before {
margin-left: 1.5rem;
}
@include breakpoint(lg) {
display: flex;
}
}
}
}
#user-controls__panel {
height: 0;
position: absolute;
right: 0;
z-index: 1;
/* Quick fix for mobile version */
width: 215px;
top: 42px;
@include breakpoint (lg) {
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: block;
padding-left: 0;
font-size: 24px;
@include breakpoint(lg) {
display: none;
}
}

View File

@ -9,23 +9,12 @@
body {
background-color: var(--color-main-background);
box-sizing: border-box;
color: var(--color-main-text);
font-size: 1.6rem;
min-height: 100vh;
overflow-wrap: break-word;
overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
}
main {
display: flex;
z-index: 0;
overflow: hidden;
height: calc(100vh - 83px); /* 83px = height of the header */
position: relative;
width: 100%;
backface-visibility: hidden;
/*will-change: overflow;*/
/* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available;
min-height: -webkit-fill-available;
}
.notLoggedIn {
@ -33,8 +22,88 @@
}
}
/* Fix for sib-dashboard fixture */
sib-dashboard section {
padding: 1rem !important;
@include breakpoint(lg) {
padding: 4.2rem !important;
}
.icon {
display: inline-block;
}
}
.wrapper {
display: grid;
grid-template-areas:
"header"
"content";
@include breakpoint(lg) {
grid-template-columns: 265px auto;
grid-template-areas:
"header header"
"leftmenu content";
}
}
.header {
grid-area: header;
}
.left-menu {
grid-area: leftmenu;
@include breakpoint(lg) {
height: calc(100vh - 83px); /* 83px = nav height */
position: sticky;
top: 0;
overflow-x: hidden;
overflow-y: auto;
}
&.jsLeftMenu {
display: none;
@include breakpoint(lg) {
display: block;
}
}
&.jsLeftMenu[open] {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
width: 80vw;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
@include breakpoint(lg) {
display: none;
}
}
}
.content {
grid-area: content;
@include breakpoint(lg) {
position: sticky;
top: 0;
overflow-y: auto;
height: calc(100vh - 83px);
overflow-x: hidden;
}
}
/* Add scrollbar to the left and right menu, and to the content */
nav, .views-container {
nav, .views-container, .table-wrapper {
overflow: auto;
height: auto;
-webkit-overflow-scrolling: touch;
@ -81,6 +150,26 @@ nav {
}
}
/* Custom scrollbar of the table */
.table-wrapper {
scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
&::-webkit-scrollbar-track {
background-color: var(--color-scrollbar-table-background);
border-radius: 10px;
}
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-table-track);
border-radius: 10px;
}
}
/* Quick fix. Will be removed later */
#admin-circles,
#admin-projects,
@ -143,6 +232,7 @@ h2, .h2-like {
h3 {
color: var(--color-title);
font-size: 1.7rem;
margin: 0;
}
h4 {
@ -153,17 +243,44 @@ h5 {
font-size: 2rem;
}
%padding-main {
padding: 1.3rem;
.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%;
}
}
%padding-block {
padding: 3.2rem;
.customer-logo {
box-sizing: border-box;
display: flex;
height: 8.5vh;
justify-content: flex-end;
margin-top: 20px;
text-align: end;
width: 15vw;
}
.content-box {
@include window-style-modal();
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
@ -175,19 +292,34 @@ h5 {
margin: 0 auto;
min-height: 100%;
}
&.with-padding {
@extend %padding-main;
}
}
/* Header inside circle, project view */
.content-box__header {
border-bottom: 1px solid var(--color-content-header);
padding: 3rem;
padding: 1.8rem 0 1.4rem;
margin: 0 1.6rem;
@include breakpoint(sm) {
background: var(--color-grey-10);
@include breakpoint(lg) {
padding: 3rem;
margin: 0;
}
.mobile-sidebar-button {
float: right;
color: var(--color-secondary);
font-size: 1.8rem;
font-weight: bold!important;
&::before {
font-size: 2.2rem;
font-weight: normal;
margin-right: 1.2rem;
}
@include breakpoint(lg) {
display: none;
}
}
sib-display {
@ -196,57 +328,62 @@ h5 {
}
}
.mobile-sidebar-button {
@include breakpoint(sm) {
float: right;
color: var(--color-secondary);
font-size: 1.8rem;
font-weight: bold!important;
/* For sib-display on project, circle, or private message view */
sib-display {
width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
&::before {
font-size: 2.2rem;
font-weight: normal;
margin-right: 1.2rem;
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 20px);
.h1-aside {
font-size: 1.8rem;
&:not(:empty)::before {
color: var(--color-grey-4);
content: ' - ';
font-size: 2rem;
font-weight: bold;
}
}
}
@include breakpoint($min: 1025px, $max: 0) {
display: none;
.description {
color: var(--color-grey-4);
}
.name {
color: var(--color-grey-4);
font-weight: normal;
}
}
}
}
div {
.content-box__height {
min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
.h1-aside {
font-size: 1.8rem;
&:not(:empty)::before {
color: var(--color-grey-4);
content: ' - ';
font-size: 2rem;
font-weight: bold;
}
}
.description {
color: var(--color-grey-4);
}
.name {
color: var(--color-grey-4);
font-weight: normal;
}
@include breakpoint(lg) {
min-height: calc(100vh - 83px - 84px);
}
}
.content-box__info {
@extend %padding-block;
display: flex;
flex-direction: column;
padding: 1rem;
@include breakpoint(lg) {
padding: 3.2rem;
}
* {
box-sizing: border-box;
}
}
.modal {
/*.modal {
color: var(--color-white);
margin: 75px;
padding: 40px;
@ -267,6 +404,40 @@ h5 {
color: var(--color-secondary);
}
}
}*/
.admin-header {
/* Quick fix for alignment on mobile before admin content rework */
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
/*end */
@include breakpoint(lg) {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 5rem;
}
h3 {
/* Quick fix for alignment on mobile before admin content rework */
margin-bottom: 20px;
/* end */
@include breakpoint(lg) {
margin-top: 0;
}
}
sib-ac-checker,
sib-link {
width: 100%;
@include breakpoint(lg) {
width: auto;
}
}
}
.backlink {
@ -288,32 +459,37 @@ h5 {
}
}
.name {
color: var(--color-grey-1);
font-size: 2rem;
font-weight: bold;
.centered {
text-align: center;
}
.username {
.flex {
display: flex;
}
&::before {
content: '@';
.desktop-button__end {
display: block;
@include breakpoint(lg) {
display: flex;
justify-content: flex-end;
}
}
.space-between {
display: flex;
justify-content: space-between;
padding-bottom: 1.4rem;
&.with-padding {
padding-bottom: 1.4rem;
}
}
.position-end {
text-align: end;
}
.mobile-vertical-align {
flex-direction: column;
.section {
border-bottom: 1px solid var(--color-grey-10);
padding: 4.5rem;
@include breakpoint(lg) {
flex-direction: row;
}
}
.word-spacing-left {
@ -324,8 +500,14 @@ h5 {
margin-right: 0.60rem;
}
// Compatibility layer for non-updated components
@import 'compat';
.mobile-margin__bottom {
margin-bottom: 1rem;
@include breakpoint(lg) {
margin-bottom: 0;
}
}
// Other base components
@import 'form';
@import 'table';
@ -356,8 +538,33 @@ a,
font-size: 1.4rem;
}
&.btn-margin-left {
margin-left: 2.2rem;
&.mobile-full-width {
margin-bottom: 1rem;
padding-left: 5rem;
width: -webkit-fill-available;
width: -moz-available;
@include breakpoint(lg) {
margin-bottom: 0;
padding-left: 2.5rem;
width: auto;
}
&::before {
margin-left: -2.6rem;
@include breakpoint(lg) {
margin-left: 0;
}
}
}
&.desktop-btn-margin__left {
margin: 0;
@include breakpoint(lg) {
margin-left: 2.2rem;
}
}
&.small {

View File

@ -1,10 +1,6 @@
#main__menu {
background-color: var(--color-menu-background);
color: var(--color-menu-text);
display: block;
max-width: 250px;
min-height: calc(100vh - 83px); /* 83px = nav height */
flex: 1;
/*transition: flex-basis 0.5s ease-in-out;*/
&.open {
@ -14,35 +10,39 @@
.unread {
font-weight: bolder;
}
sib-router {
.menu-wrapper {
&.is-closed {
.sub-menu {
display: none;
}
.menu-chevron {
transform: rotate(180deg);
}
}
}
sib-link {
width: 100%;
}
.menu {
cursor: pointer;
display: flex;
flex-direction: row-reverse;
font-weight: bold;
padding: 1.2rem;
&[active] {
background-color: var(--color-menu-highlight-primary);
.menu-icon:before {
background-color: var(--color-menu-icon-background-active);
}
.menu-notification > sib-display > div:first-child {
.menu-notification>sib-display>div:first-child {
background-color: var(--color-menu-badge-background);
}
}
@ -55,7 +55,7 @@
flex-shrink: 0;
font-size: 1.7rem;
width: 3.2em;
&:before {
border-radius: 100%;
height: 1.9em;
@ -63,7 +63,7 @@
width: 1.9em;
}
}
.menu-label {
display: flex;
flex-direction: column;
@ -84,55 +84,93 @@
justify-content: center;
width: 2em;
}
> sib-display {
>sib-display {
display: block;
}
}
.sub-menu {
/* Specific styles for the "Projects" tab */
/* Ellipsis for project tab */
.project-tab>div>sib-display>div:nth-child(1) {
sib-set-default[name='project'] {
flex: 3;
.project-customer,
.project-name {
box-sizing: border-box;
display: block;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) {
width: 150px;
}
}
.project-customer,
.project-name>div {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-customer {
font-weight: bold;
width: 150px;
@include breakpoint(lg) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.project-name {
display: block;
padding-left: 14px;
width: calc(150px - 10px);
/* 10px = padding of the sib-set-default = better alignment */
}
}
hubl-counter {
margin-top: 16px;
}
}
/* End of specific styles of "Projects" tab */
/* Ellipsis for circle tab */
.circle-tab>div>sib-display>div {
sib-display-div[name='name'] {
flex: 3;
>div[name='name'] {
box-sizing: border-box;
padding-left: 0.2em;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
}
}
}
/* Ellipsis for message tab */
.message-tab>div>sib-display>div>sib-display-div>div {
box-sizing: border-box;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) {
width: 150px;
}
}
sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
margin: auto;
margin-left: 30px;
margin-bottom: 10px;
width: calc(80vw - 71px);
display: block;
background-color: var(--color-secondary);
color: var(--color-grey-6);
border: 1px solid var(--color-grey-4);
border-radius: 3px;
padding: 4px;
@include breakpoint(lg) {
margin: auto;
width: auto;
}
}
sib-display.nosub>nav {
@ -141,15 +179,19 @@
display: grid;
grid-template-columns: auto 50% auto;
grid-template-areas: "left middle right";
>* {
color: var(--color-grey-6);
}
>[data-id="prev"] {
grid-area: left;
}
>[data-id="next"] {
grid-area: right;
}
>span {
grid-area: middle;
}
@ -158,6 +200,7 @@
hubl-menu-publicprivate {
display: inline-block;
text-align: center;
div {
font-family: simple-line-icons;
width: 20px;
@ -176,16 +219,16 @@
color: var(--color-white);
margin: 1rem 1rem 2.2rem 3.2rem;
}
&>sib-display {
&:last-child>div {
margin-bottom: 2.2rem;
}
>div {
color: var(--color-grey-6);
cursor: pointer;
>hubl-menu-fix-url-circle>sib-display>div,
>hubl-menu-fix-url-project>sib-display>div {
padding: 1rem 1rem 1rem 3rem;
@ -207,37 +250,39 @@
}
&.menu-notification {
> sib-display > div > sib-display > div > hubl-menu-fix-url-circle,
> sib-display > div > sib-display > div > hubl-menu-fix-url-project {
>sib-display>div>sib-display>div>hubl-menu-fix-url-circle,
>sib-display>div>sib-display>div>hubl-menu-fix-url-project {
flex: 1;
}
> sib-display > div > sib-display > div,
> sib-display > div > sib-display > div > hubl-menu-fix-url-circle > sib-display > div,
> sib-display > div > sib-display > div > hubl-menu-fix-url-project > sib-display > div {
display: flex;
sib-display-div {
flex: 3;
}
hubl-counter {
height: 20px;
width: 20px;
margin-right: 1em;
div.counter:not([data-nb-unread="0"]) {
text-align: center;
display: block;
background-color: var(--sib-notifications-theme, gray);
border-radius: 50%;
font-size: 12px;
line-height: 20px;
width: 20px;
height: 20px;
padding-bottom: 0;
color: var(--color-secondary);
}
}
>sib-display>div>sib-display>div,
>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div,
>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div {
display: flex;
justify-content: space-between;
}
hubl-counter {
height: 20px;
width: 20px;
margin-right: 1em;
div.counter:not([data-nb-unread="0"]) {
text-align: center;
display: block;
background-color: var(--sib-notifications-theme, gray);
border-radius: 50%;
font-size: 12px;
line-height: 20px;
width: 20px;
height: 20px;
padding-bottom: 0;
color: var(--color-secondary);
}
}
}
}
.divider {
height: 1px;
@ -245,27 +290,6 @@
opacity: 0.2;
}
}
&.jsLeftMenu {
display: none;
@include breakpoint(lg) {
display: block;
}
}
&.jsLeftMenu[open] {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
}
// Temporary fix for badges
@ -283,4 +307,4 @@ sib-fix-badge {
text-align: center;
font-weight: bold;
padding-bottom: 0;
}
}

View File

@ -1,156 +1,229 @@
#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#project-edit,
#admin-project-list,
#admin-project-create,
#admin-users-list {
/* Display and positioning of the table and its elements */
[widget="hubl-team-template-edit"]>div {
flex: 1;
}
.table-wrapper {
overflow: auto;
position: relative;
width: 100%;
.table {
border-collapse: collapse;
display: table;
margin-bottom: 20px;
overflow: auto;
table-layout: fixed;
width: 100%;
max-width: 100%;
}
.table-header {
display: flex;
flex: 1;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
.table-header {
display: table-header-group;
text-align: center;
vertical-align: middle;
&.grey-color {
background: var(--color-table-header-background);
color: var(--color-table-header-text);
}
>* {
border-right: 1px solid var(--color-table-border);
padding: 2.1rem 0;
text-align: center;
width:25%;
}
>*:last-of-type {
border-right: 1px solid --color-table-header-background;
}
&>div {
display: table-cell;
white-space: nowrap;
}
}
.table-body, .table-header {
.table-body {
display: table-row-group;
>div:first-of-type>sib-display>div,
hubl-team-template-edit[name='members'] {
display: flex;
border-left: 1px solid var(--color-table-border);
}
&>div {
display: contents;
.border {
border-bottom: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
&>sib-display {
display: table-row;
.cell {
text-align: center;
word-wrap: break-word;
white-space: nowrap;
}
&>div {
display: contents;
.w25 {
width: 25%;
}
.w33 {
width: 33.3333%;
}
.w50 {
width: 50%;
}
.w66 {
width: 66.6666%;
}
.w75 {
width: 75%;
}
.hashtag::before {
content: '#';
}
}
.cell-with-buttons {
align-items: center;
display: flex;
justify-content: center;
[name='button'] {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered,
.btn-margin-left;
}
}
}
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
padding-top: 2.5rem;
}
sib-multiple {
display: flex;
align-items: center;
justify-content: center;
}
.user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */,
[name='user-thumb'] {
@extend %user-thumb__grid;
padding: 0 2.2rem;
>.user-thumb__picture {
@extend %user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
.user-thumb__name {
@extend %user-thumb__name;
}
.user-thumb__groups {
@extend %user-thumb__groups;
&>* {
border-bottom: 1px solid var(--color-table-border);
display: table-cell;
vertical-align: middle;
}
}
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
&>sib-multiple {
display: contents;
>.user-thumb__username:not(:empty) {
@extend %user-thumb__username;
}
&>div {
display: contents;
>.user-thumb__city:not(:empty) {
@extend %user-thumb__city;
&>hubl-team-template-edit {
display: table-row;
&>* {
border-bottom: 1px solid var(--color-table-border);
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
}
}
}
sib-ac-checker {
align-items: center;
display: flex;
justify-content: center;
}
}
}
/* Styles of the table and its elements */
.table {
border-bottom: 1px solid var(--color-table-border);
border-left: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.table-header {
font-size: 1.6rem;
font-weight: 600;
&.grey-color {
background: var(--color-table-header-background);
color: var(--color-table-header-text);
}
>*:not(:last-child) {
border-right: 1px solid var(--color-white);
padding: 2.1rem 0;
text-align: center;
}
}
.table-body,
.table-header {
.border {
border-right: 1px solid var(--color-table-border);
}
}
.table-body,
.table-header {
/* Fix. Could disappear when we can add .class on set fields */
[name^='cell-1'] {
@extend .w280;
@extend .border;
}
.w280 {
width: 280px;
}
.w70 {
width: 70px;
}
.w262 {
width: 262px;
}
.W152 {
width: 152px;
}
.w355 {
width: 355px;
}
.hashtag::before {
content: '#';
}
}
/* Styles of specific cells */
.cell-with-buttons {
text-align: center;
[name='button'] {
input[type='submit'] {
@extend
.button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered,
.desktop-btn-margin__left;
}
}
}
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
padding-left: 2rem;
text-align: left;
}
/* Styles of elements inside cells */
.user-thumb>div,
[name='user-thumb'] {
vertical-align: middle;
text-align: left;
@extend %user-thumb__grid;
padding: 0 2.2rem;
>.user-thumb__picture {
@extend .user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
}
}
.table sib-ac-checker {
text-align: center;
}
.circle-join {
position: relative;
width: 181px;
margin: 0 auto;
min-width: 181px;
input {
height: 29px;
left: -1px;
position: absolute;
top: -1px;
width: 102%;
padding-left: 14px !important;
}
&.button.with-icon::before {
margin-left: 6px;
}
}
.circle-leave {
position: relative;
width: 40%;
min-width: 40%;
&>button {
height: 29px;
padding-left: 13px;
position: absolute;
left: 1px;
top: -1px;
width: 106%;
}
&.button.with-icon::before {
font-size: 1.6rem;
margin-right: 2rem !important;
margin-left: -50px;
}
}

View File

@ -1,8 +1,9 @@
/* The grids */
%user-thumb__grid {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
grid-template-rows: repeat(2, auto);
}
%user-thumb__grid-sup {
@ -21,58 +22,26 @@
margin-top: 0.50rem;
}
%user-thumb__picture {
align-items: center;
/* Styles for elements of user-thumb*/
.user-thumb__picture {
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 {
.user-thumb__name {
color: var(--color-user-thumb-name);
font-weight: 600;
margin-right: 1rem;
}
%user-thumb__groups {
display: flex;
margin-bottom: 1px;
margin-left: 0.6rem;
[name='groups'],
[name='user.groups'] {
@extend %tag-role;
}
}
%user-thumb__admin {
.user-thumb__admin:not(:empty) {
@extend %tag-admin;
}
%user-thumb__username {
.user-thumb__username {
align-items: center;
display: flex;
@ -81,7 +50,7 @@
}
}
%user-thumb__city {
.user-thumb__city:not(:empty) {
@include mdi('atom');
align-items: center;
display: flex;
@ -93,7 +62,7 @@
}
}
%user-thumb__lead {
.user-thumb__lead:not(:empty) {
@include icon('eyeglass');
align-items: center;
display: flex;
@ -106,3 +75,23 @@
margin-right: 0.50rem;
}
}
/* Apply the grids to all user-thumbs */
.user-thumb>div,
[name='user-thumb'] {
@extend %user-thumb__grid;
>[name='sup'] {
@extend %user-thumb__grid-sup;
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
}
}
/* Add extra spaces to user-thumbs that are inside a table */
.user-thumb.is-spaced>div,
[name='user-thumb'] {
padding: 0.8rem 2.2rem;
}

View File

@ -1,7 +1,6 @@
@import 'chat';
@import 'comment';
@import 'filters';
@import 'howto';
@import 'sidebar';
@import 'skills';
@import 'tags';

View File

@ -1,16 +1,19 @@
.chat-view {
padding: 0;
height: calc(100vh - 84px - 83px);
height: calc(100vh - 106px);
position: relative;
overflow: hidden;
@include breakpoint(lg) {
height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */
}
> sib-chat {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: calc(100vh - 84px - 83px);
z-index: 0;
}
}

View File

@ -1,14 +0,0 @@
.howto {
padding: 0.85rem;
margin-bottom: 1.7rem;
margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}

View File

@ -1,8 +1,13 @@
.no-sidebar {
flex: 1;
margin-top: 50px;
@include breakpoint(lg) {
margin-top: 0;
}
&.with-padding {
@extend %padding-main;
padding: 1.3rem;
}
}
@ -11,14 +16,20 @@
display: flex;
flex-direction: row;
align-items: stretch;
margin-top: 50px;
overflow: hidden;
@include breakpoint(lg) {
margin-top: 0;
}
.views-container {
flex: 1 0 0;
/*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed {
@include breakpoint(769px, 0) {
@include breakpoint(lg) {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
@ -141,9 +152,10 @@
}
&.jsRightMenu {
display: none;
@include breakpoint(sm) {
display: none;
@include breakpoint(lg) {
display: block;
}
}
@ -157,7 +169,7 @@
&.jsRightMenu[open] {
@include breakpoint(sm) {
@include breakpoint(md) {
display: block;
background: var(--color-right-menu-background);
bottom: 0;
@ -165,9 +177,13 @@
min-width: 60%;
position: fixed;
right: 0;
top: 83px;
top: 50px;
z-index: 1;
}
@include breakpoint(lg) {
top: 83px;
}
}
}
}

View File

@ -1,19 +1,13 @@
%tag-role {
border: 1px solid var(--color-tag-group-border);
border-radius: 3px;
color: var(--color-tag-group-text);
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.6rem;
padding: 0.2rem 0.98rem;
}
%tag-admin {
border: 1px solid var(--color-tag-admin-border);
border-radius: 3px;
color: var(--color-tag-admin-text);
font-size: 1.4rem;
font-weight: 400;
margin-left: 0.6rem;
padding: 0.35rem 0.98rem;
}
display: none;
@include breakpoint(lg) {
border: 1px solid var(--color-tag-admin-border);
border-radius: 3px;
color: var(--color-tag-admin-text);
font-size: 1.4rem;
font-weight: 400;
margin-left: 0.6rem;
padding: 0.35rem 0.98rem;
}
}

View File

@ -8,8 +8,9 @@
@import 'abstracts/mixins';
@import 'components/icons/index';
@import 'base/main';
@import 'base/about';
div#viewport {
#viewport {
display: flex;
flex: 1;
/*height: auto;
@ -18,8 +19,6 @@ div#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'layout/project/index';
@import 'layout/circle/index';
@import 'layout/user/index';
@import 'layout/events/index';
@import 'layout/dashboard/index';

View File

@ -1,2 +0,0 @@
@import 'circle-profile';
@import 'circle-admin';

View File

@ -1,9 +0,0 @@
.admin-header {
display: flex;
justify-content: space-between;
margin-bottom: 5rem;
.admin-header__title {
@extend h3;
}
}

View File

@ -1,43 +0,0 @@
#circle-information {
.box-button {
display: flex;
justify-content: flex-end;
}
.block {
/* peut-être à mettre dans main.scss */
.user-thumb>div {
@extend %user-thumb__grid;
>.user-thumb__picture {
@extend %user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
.user-thumb__name {
@extend %user-thumb__name;
}
.tag-group {
@extend %user-thumb__groups;
}
.tag-admin:not(:empty) {
@extend %tag-admin;
}
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
>.user-thumb__city:not(:empty) {
@extend %user-thumb__city;
}
}
}
}
}

View File

@ -1 +0,0 @@
@import 'project-profile';

View File

@ -1,115 +0,0 @@
#project-profile {
.button-question__position {
position: relative;
bottom: 5px;
}
.button-question__color {
color: var(--color-secondary);
}
.customer-box {
display: flex;
margin: 1.6rem 0;
>* {
border: 1px solid var(--color-grey-8);
flex: 0 1 50%;
padding: 1.7rem 2rem;
&:first-child {
li:last-child {
margin-top: 3rem;
p {
margin-top: 0.8rem;
}
}
}
&:last-child {
border-left: none;
li {
margin-bottom: 1.5rem;
}
}
}
}
.customer-logo {
box-sizing: border-box;
display: flex;
height: 8.5vh;
justify-content: flex-end;
margin-top: 20px;
text-align: end;
width: 15vw;
}
.user-thumb>div {
/* Maybe move it in main.scss. /!\ some fields are different */
@extend %user-thumb__grid;
>.user-thumb__picture {
@extend %user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
.user-thumb__name {
@extend %user-thumb__name;
}
sib-multiple {
@extend %user-thumb__groups;
}
.tag-admin:not(:empty) {
@extend %tag-admin;
}
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
>.user-thumb__city:not(:empty) {
@extend %user-thumb__city;
}
>.user-thumb__lead:not(:empty) {
@extend %user-thumb__lead;
}
}
}
ul {
list-style: none;
padding-left: 0;
li {
margin-bottom: 0.5em;
span::before {
color: var(--color-primary);
font-size: 2.2rem;
margin: 0 1rem 0 0;
}
span {
font-weight: bold;
&.link-color {
color: var(--color-complementary);
}
&.norm-weight {
font-weight: normal;
}
}
}
}
}

View File

@ -1,2 +1 @@
@import 'user-profile';
@import 'admin-users';

View File

@ -1,6 +0,0 @@
/* Fix. Could disappear when we can add .class on set fields */
sib-set-default[name='cell-1'] {
@extend .w75;
@extend .cell;
@extend .border;
}

View File

@ -4,11 +4,10 @@ sib-widget(name='hubl-captain')
template
sib-display.user-thumb(
data-src="${await value}"
fields='account.picture, sup(name), sub(profile.city, is_lead)'
fields='account.picture, sup(name), sub(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'
widget-account.picture='hubl-user-avatar'

View File

@ -2,26 +2,19 @@ include hubl-user-avatar.pug
sib-widget(name='hubl-circle-team-template')
template
sib-display.user-thumb(
sib-display.user-thumb.is-spaced(
data-src='${await value.user}'
fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
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='tag-admin'
class-groups='tag-group'
class-isadmin='user-thumb__admin'
class-profile.city='user-thumb__city'
widget-account.picture='hubl-user-avatar'
widget-isadmin='hubl-circle-user-admin'
widget-groups='hubl-circle-user-groups'
multiple-groups=''
)
sib-widget(name='hubl-circle-user-admin')
template ${(await value) != "false" ? "Administrateur" : ""}
sib-widget(name='hubl-circle-user-groups')
template ${await value.name}

View File

@ -1,17 +0,0 @@
sib-widget(name='hubl-customer')
template
div.customer-box
div
h3 Client :
ul
li #[span Nom de l'entreprise : ]${await value.name}
li ${await value.companyRegister ? `<span>Immatriculation de l'entreprise : </span> ${await value.companyRegister}` : ``}
li ${await value.address ? `<span>Adresse : </span><br/><p>${await value.address}</p>`: ``}
div
h3 Contact :
ul
li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""}
li
span(class='link-color norm-weight mdi-email-outline')
a(href='mailto:${await value.email}') ${await value.email}
span ${await value.phone ? `<li><span class='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}

View File

@ -1,3 +0,0 @@
sib-widget(name='hubl-groups-name')
template ${value.name}

View File

@ -2,28 +2,21 @@ include hubl-user-avatar.pug
sib-widget(name='hubl-project-team')
template
sib-display.user-thumb(
sib-display.user-thumb.is-spaced(
data-src='${await value}'
fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)'
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='tag-admin'
class-user.groups='tag-group'
class-isadmin='user-thumb__admin'
class-user.profile.city='user-thumb__city'
class-name='user-thumb__lead'
widget-user.account.picture='hubl-user-avatar'
widget-isadmin='hubl-project-user-admin'
widget-user.groups='hubl-project-user-groups'
multiple-user.groups=''
)
sib-widget(name='hubl-project-user-admin')
template ${(await value) == "false" ? "" : "Administrateur"}
sib-widget(name='hubl-project-user-groups')
template ${await value.name}

View File

@ -1,23 +1,23 @@
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
sib-form(
sib-form.form.button-register(
data-src=`${endpoints.circles || endpoints.post.circles}`
fields='status, name, description'
class-status='form-label is-light is-full-width color'
class-name='form-label is-light is-full-width input-text-like'
class-description='form-label is-light is-full-width input-text-like'
label-status='Statut du canal'
widget-status='hubl-status'
class-name='form-label is-light is-full-width'
class-description='form-label is-light is-full-width'
class-status='form-label is-light is-full-width member-select color'
label-name='Nom du canal *'
label-description='Sous-titre du canal *'
widget-status='hubl-status'
next='admin-circle-list'
submit-button='Enregistrer'

View File

@ -1,24 +1,25 @@
.content-box.full-width.with-form
.content-box.flex.full-width.with-form
sib-router(default-route='admin-circle-list', hidden)
sib-route(name='admin-circle-list')
sib-route(name='admin-circle-create')
sib-route(name='circle-left')
div.content-box__header
div.content-box__header.flex.space-between
h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
include ../circle/page-circle-left.pug
#admin-circle-list(hidden)
#admin-circle-list.content-box__height(hidden)
include ../../templates/hubl-user-avatar.pug
sib-widget(name='hubl-circle-owner')
template
sib-display.user-thumb(
sib-display.user-thumb.is-spaced(
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,78 +27,79 @@
)
div.content-box__info
div.content-box__info.flex
div.admin-header
div.admin-header.flex
div.admin-header__title Canaux
h3 Canaux
sib-link(
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
next='admin-circle-create'
) Créer un canal
.table
.table-wrapper
.table
div.table-header.grey-color
div.w33 Nom
div.w33 Administrateurs
div.w33 Rejoindre
div.table-header.grey-color
div.w280 Nom
div.w280 Administrateurs
div.w280 Rejoindre
sib-widget(name='hubl-admin-circle-leave-button')
template
sib-delete(
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter'
)
sib-widget(name='hubl-admin-circle-leave-button')
template
sib-delete(
class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter'
)
sib-display(
class='table-body'
sib-display(
class='table-body'
bind-user
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
bind-user
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
class-circle.name='w33 cell border cell-with-name'
class-circle.owner='w33 cell border cell-with-id-card'
class-leaveButton='w33 cell border cell-with-buttons'
class-circle.name='w280 border cell-with-name'
class-circle.owner='w280 border cell-with-id-card'
class-leaveButton='w280 border cell-with-buttons'
action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner'
action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner'
order-by="circle.name"
)
order-by="circle.name"
)
sib-widget(name='hubl-admin-circle-join-button')
template
sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}'
sib-widget(name='hubl-admin-circle-join-button')
template
sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}'
fields='user.username'
value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden'
fields='user.username'
value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden'
submit-button='Rejoindre'
)
submit-button='Rejoindre'
)
sib-display(
class='table-body'
sib-display(
class='table-body'
data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members'
data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members'
class-name='w33 cell border cell-with-name'
class-owner='w33 cell border cell-with-id-card'
widget-owner='hubl-circle-owner'
class-name='w280 border cell-with-name'
class-owner='w280 border cell-with-id-card'
widget-owner='hubl-circle-owner'
class-members='w33 cell border cell-with-buttons'
widget-members="hubl-admin-circle-join-button"
class-members='w280 border cell-with-buttons'
widget-members="hubl-admin-circle-join-button"
order-by="name"
)
order-by="name"
)
#admin-circle-create(hidden)
#admin-circle-create.content-box__height(hidden)
include page-admin-circles-create.pug

View File

@ -1,8 +1,4 @@
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")
@ -18,10 +14,10 @@ div.content-box__info
h1 Créer un nouveau projet
sib-form(
sib-form.form.button-register(
data-src=`${endpoints.projects || endpoints.post.projects}`
fields='status,line-1(customer.name, name), description, line-10(captain)'
fields='status, line-1(customer.name, name), description, line-10(captain)'
label-status='Statut du canal*'
widget-status='hubl-status'
@ -38,11 +34,11 @@ div.content-box__info
class-customer.name='form-label is-light is-half-width'
label-name='Nom du projet*'
class-name='form-label is-light is-half-width'
class-name='form-label is-light is-half-width input-text-like'
label-captain='Capitaine du projet*'
range-captain=`${endpoints.users || endpoints.get.users}`
class-captain='member-select form-label is-light is-half-width'
class-captain='form-label is-light is-half-width'
widget-captain='sib-form-auto-completion'
next='project-picture'

View File

@ -1,21 +1,22 @@
.content-box.full-width.with-form
.content-box.flex.full-width.with-form
sib-router(default-route='admin-project-list', hidden)
sib-route(name='admin-project-list')
sib-route(name='admin-project-create')
sib-route(name='project-left')
div.content-box__header
div.content-box__header.flex.space-between
h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
#project-left(hidden)
include ../project/page-project-left.pug
#admin-project-list(hidden)
#admin-project-list.content-box__height(hidden)
include ../../templates/hubl-user-avatar.pug
div.content-box__info
div.admin-header
div.admin-header__title Projets
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'
next='admin-project-create'

View File

@ -1,18 +1,17 @@
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
sib-form(
sib-form.form.button-register(
data-src=`${endpoints.users || endpoints.post.users}`
range-groups=`${endpoints.groups || endpoints.get.groups}`
fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
class-first_name='form-label is-light is-half-width'
class-last_name='form-label is-light is-half-width'
class-username='form-label is-light is-half-width'
class-email='form-label is-light is-half-width'
class-first_name='form-label is-light is-half-width input-text-like'
class-last_name='form-label is-light is-half-width input-text-like'
class-username='form-label is-light is-half-width input-text-like'
class-email='form-label is-light is-half-width input-text-like'
label-first_name='Prénom *'
label-last_name='Nom *'

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
@ -8,16 +8,15 @@ div.content-box__info
fields='name'
)
sib-form(
sib-form.form.button-register(
bind-resources=''
range-groups=`${endpoints.groups || endpoints.get.groups}`
fields='line-1(first_name, last_name), line-2(username, email)'
class-first_name='form-label is-light is-half-width'
class-last_name='form-label is-light is-half-width'
class-username='form-label is-light is-half-width'
class-email='form-label is-light is-half-width'
class-first_name='form-label is-light is-half-width input-text-like'
class-last_name='form-label is-light is-half-width input-text-like'
class-username='form-label is-light is-half-width input-text-like'
class-email='form-label is-light is-half-width input-text-like'
label-first_name='Prénom *'
label-last_name='Nom *'

View File

@ -1,11 +1,12 @@
.content-box.full-width.with-form
.content-box.flex.full-width.with-form
sib-router(default-route='admin-users-list', hidden)
sib-route(name='admin-users-list')
sib-route(name='admin-users-create')
sib-route(name='admin-users-edit')
div.content-box__header
div.content-box__header.flex.space-between
h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
sib-widget(name='hubl-sib-action-custom')
template
@ -16,51 +17,45 @@
next="${value}"
)
sib-widget(name='hubl-user-admin-groups-display')
template
sib-display(
data-src="${value}"
fields="name"
)
#admin-users-list(hidden)
div.content-box__info
div.admin-header
div.admin-header__title Utilisateurs
#admin-users-list.content-box__height(hidden)
div.content-box__info.flex
div.admin-header.flex
h3 Utilisateurs
sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
sib-link(
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
next='admin-users-create'
) Ajouter un utilisateur
.table
div.table-header.grey-color
div.w75 Nom
div.w25
sib-display(
class='table-body'
data-src=`${endpoints.users || endpoints.get.users}`
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
.table-wrapper
.table
div.table-header.grey-color
div.w280 Nom
div.w70
sib-display(
class='table-body'
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-name='user-thumb__name'
class-username='user-thumb__username'
class-profile.city='user-thumb__city'
widget-account.picture='hubl-user-avatar'
class-account.picture='avatar user-thumb__picture'
class-name='user-thumb__name'
class-username='user-thumb__username'
class-profile.city='user-thumb__city'
widget-account.picture='hubl-user-avatar'
label-actions='Edit'
action-actions='admin-users-edit'
class-actions='w25 cell border cell-with-buttons'
widget-actions='hubl-sib-action-custom'
label-actions='Edit'
action-actions='admin-users-edit'
class-actions='w70 border cell-with-buttons'
widget-actions='hubl-sib-action-custom'
order-by='username'
)
order-by='username'
)
#admin-users-create(hidden)
#admin-users-create.content-box__height(hidden)
include page-admin-users-create.pug
#admin-users-edit(hidden)
#admin-users-edit.content-box__height(hidden)
include page-admin-users-edit.pug

View File

@ -7,12 +7,12 @@ div.content-box__info
sib-widget(name='hubl-team-template-edit')
template
sib-display.user-thumb(
class='w66 cell border cell-with-id-card user-thumb'
sib-display.user-thumb.is-spaced(
class='w355 cell border cell-with-id-card user-thumb'
data-src='${await value.user}'
fields='account.picture, sup(name, groups), sub(profile.city)'
class-account.picture='user-thumb__picture'
class-account.picture='user-thumb__picture avatar'
class-name='user-thumb__name'
class-groups='user-thumb__groups'
class-profile.city='user-thumb__city'
@ -24,7 +24,7 @@ div.content-box__info
)
sib-ac-checker(
class='w33 cell border'
class='W152 cell border'
permission="acl:Delete"
data-src="${value['@id']}"
)
@ -36,7 +36,7 @@ div.content-box__info
//- Only to show the table grid
sib-ac-checker(
class='w33 cell border'
class='W152 cell border'
no-permission="acl:Delete"
data-src="${value['@id']}"
)
@ -46,10 +46,10 @@ div.content-box__info
sib-ac-checker(permission='acl:Write', bind-resources)
h1 Modifie ton canal
sib-form.form-edit(
sib-form.form.button-register(
bind-resources
fields='status, block-circle__info(name, owner), description'
fields='status, line-1(name, owner), description'
range-owner=`${endpoints.users || endpoints.get.users}`
label-status='Statut du canal'
@ -59,9 +59,9 @@ div.content-box__info
label-owner='Administrateur ou administratrice'
label-description='Sous-titre du canal *'
class-name='form-label is-light is-half-width'
class-name='form-label is-light is-half-width input-text-like'
class-owner='form-label is-light is-half-width member-select color'
class-description='form-label is-light is-full-width'
class-description='form-label is-light is-full-width input-text-like'
class-status='form-label is-light is-full-width member-select color'
widget-owner='sib-form-auto-completion'
@ -75,32 +75,32 @@ div.content-box__info
h2 Liste des membres:
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
sib-form.block.select-add-member(
sib-form.block.select-add(
bind-resources
nested-field='members'
fields='user'
range-user=`${endpoints.users || endpoints.get.users}`
class-user='team form-label is-dark'
class-user='team form-label is-light'
label-user=''
widget-user='sib-form-auto-completion'
submit-button='Ajouter un membre'
)
.table
.table-wrapper
.table
div.table-header.grey-color
div.w355 Nom
div.W152 Accès
div.table-header.grey-color
div.w66 Nom
div.w33 Accès
//-class='table-body'
sib-display(
class='table-body'
bind-resources
fields='members'
//-class='table-body'
sib-display(
class='table-body'
bind-resources
fields='members'
multiple-members=''
widget-members='hubl-team-template-edit'
)
multiple-members=''
widget-members='hubl-team-template-edit'
)

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.

View File

@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden)
include ../../templates/hubl-circle-team.pug
.content-box__info
.space-between
sib-display(
.flex.space-between.with-padding.mobile-vertical-align
sib-display.mobile-margin__bottom(
bind-resources
fields='creationDateSet(title, creationDate)'
@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden)
widget-creationDate='sib-display-date'
)
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
div.box-button
div.flex.desktop-button__end
sib-ac-checker(permission='acl:Delete', bind-resources)
sib-delete(
class='button text-bold text-uppercase button-primary bordered with-icon icon-trash'
class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
bind-resources
data-label='Supprimer le canal'
)
@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden)
sib-widget(name='hubl-circle-leave-button')
template
sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter le canal'
)
sib-widget(name='hubl-circle-join-button')
template
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
sib-form(
data-src=''
nested-field='members'
@ -80,5 +80,5 @@ sib-router(default-route='circle-profile', hidden)
#circle-edit(hidden)
#circle-edit.content-box__height(hidden)
include page-circle-edit.pug

View File

@ -1,4 +1,4 @@
.content-box.with-padding.full-width.chat-view
.content-box.flex.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',

View File

@ -1,16 +1,12 @@
div.content-box__info
include ../../templates/hubl-user-avatar.pug
sib-widget(name='hubl-fieldset-title')
template
label ${label}
sib-link(class='backlink right', bind-resources, next='project-profile') Retour
h1 Modifie ton projet
sib-form.form-edit(
sib-form.form.button-register(
bind-resources
fields='status, block-project__info(customer.name, name), description'
@ -47,13 +43,13 @@ div.content-box__info
h2 Liste des membres :
sib-form.block.select-add-member(
sib-form.block.select-add.button-add(
bind-resources
nested-field='members'
fields='user'
range-user=`${endpoints.users || endpoints.get.users}`
class-user='team form-label is-dark'
class-user='team form-label is-light'
label-user=''
widget-user='sib-form-auto-completion'

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.

View File

@ -5,13 +5,12 @@ sib-router(default-route='project-profile', hidden)
#project-profile(hidden)
include ../../templates/hubl-captain.pug
include ../../templates/hubl-circle-team.pug
include ../../templates/hubl-customer.pug
include ../../templates/hubl-project-team.pug
.content-box__info
.content-box__info.flex
.space-between
sib-display(
.flex.space-between.with-padding.mobile-vertical-align
sib-display.mobile-margin__bottom(
bind-resources
fields='creationDateSet(title, creationDate)'
@ -71,14 +70,10 @@ sib-router(default-route='project-profile', hidden)
sib-widget(name='hubl-project-leave-button')
template
sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter le groupe'
)
#project-edit(hidden)
#project-edit.content-box__height(hidden)
include page-project-edit.pug