Merge branch 'master' of git.startinblox.com:applications/hubl

This commit is contained in:
Jure Ursic 2020-06-23 15:21:03 +02:00
commit a0efcea093
58 changed files with 1694 additions and 1740 deletions

View File

@ -264,3 +264,21 @@ volumes:
when: manual when: manual
tags: tags:
- deploy - 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-h1: var(--color-title);
--color-h2: 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 */ /* Header's elements */
--color-header-background: var(--color-white); --color-header-background: var(--color-white);
--color-bell: var(--color-complementary-darken); --color-bell: var(--color-complementary-darken);
@ -58,8 +63,6 @@
/* Tags */ /* Tags */
--color-tag-admin-text: var(--color-complementary); --color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary); --color-tag-admin-border: var(--color-complementary);
--color-tag-group-text: #9BA0A7;
--color-tag-group-border: var(--color-primary);
/* Form elements */ /* Form elements */
--color-button-white: var(--color-white); --color-button-white: var(--color-white);
@ -78,7 +81,6 @@
--color-select-add-button: var(--color-button-secondary); --color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white); --color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-complementary);
--color-label-light: var(--color-grey-6); --color-label-light: var(--color-grey-6);
/* Skill */ /* Skill */
@ -142,22 +144,27 @@
} }
/* Button to delete a channel */ /* 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 { #circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
background: var(--color-white); background: var(--color-white);
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
color: 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 { #circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
color: var(--color-complementary); 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 { #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
background: var(--color-complementary); background: var(--color-complementary);
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
color: var(--color-white); 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 { #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
color: var(--color-white); color: var(--color-white);
} }
@ -209,3 +216,7 @@
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
color: var(--color-white); color: var(--color-white);
} }
#members-list .send-display sib-link::before {
background-color: var(--color-directory-complementary)!important;
}

View File

@ -18,14 +18,12 @@ if endpoints.events || (endpoints.get && endpoints.get.events)
//- script(type="module" src="/lib/sib-event/sib-event.js" defer) //- script(type="module" src="/lib/sib-event/sib-event.js" defer)
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.4" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3" defer) //- script(type="module" src="/lib/sib-job-board/dist/index.js" defer)
//- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer)
//- 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)) 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/index.js" defer) //- script(type="module" src="/lib/sib-directory/dist/index.js" defer)
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer) script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer)
@ -33,7 +31,7 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
if endpoints.users || (endpoints.get && endpoints.get.users) 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="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) script(src="/scripts/index.js" defer)

View File

@ -1,11 +1,6 @@
#logo .logo
sib-link(next='members') sib-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) img(src=`${clientLogo || '/images/logo.png'}` style=`max-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')
sib-notifications.notLoggedIn( sib-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"
@ -18,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
) )

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> <metadata>
<rdf:RDF> <rdf:RDF>
<cc:Work rdf:about=""> <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 if clientCSS
link(rel='stylesheet', href=`${clientCSS}`) link(rel='stylesheet', href=`${clientCSS}`)
body body
header#header(role='banner')
include header.pug
main.notLoggedIn .wrapper
include menu-left.pug
div#viewport 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) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden).no-sidebar.with-padding #dashboard(hidden).no-sidebar.with-padding

View File

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

View File

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

View File

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

View File

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

View File

@ -1,25 +1,7 @@
.content-box.full-width .content-box.full-width
#job-offer-board #job-offers.job-offers__container
.job-offers__container
sib-job-board( sib-job-board(
data-src=`${endpoints.joboffers || endpoints.get.joboffers}`, data-src=`${endpoints.joboffers || endpoints.get.joboffers}`,
post-data-src=`${endpoints.joboffers || endpoints.post.joboffers}`,
range-skills=`${endpoints.skills || endpoints.get.skills}` range-skills=`${endpoints.skills || endpoints.get.skills}`
) )
div.job-offers__newoffer
sib-link(next="job-offer-create").plus-button
div.icon-plus
div Post a new offer
#job-offer-create(hidden)
sib-link(class="backlink", next="job-offers") Back
include views/job-offer/page-job-offer-create.pug
#job-offer-edit(hidden)
sib-link(class="backlink", next="job-offers") Back
include views/job-offer/page-job-offer-edit.pug
sib-router(default-route='job-offer-board')
sib-route(name='job-offer-board')
sib-route(name='job-offer-create')
sib-route(name='job-offer-edit')

View File

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

View File

@ -1,7 +1,7 @@
.views-container.sidebar-is-closed .views-container.sidebar-is-closed
.content-box.full-width.with-form .content-box.flex.full-width.with-form
div.content-box__header 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( sib-display(
bind-resources bind-resources
fields='const-title1, number, customer.name, name' fields='const-title1, number, customer.name, name'
@ -9,25 +9,18 @@
class-const-title1='h1-like' class-const-title1='h1-like'
class-number='h1-like word-spacing-right' class-number='h1-like word-spacing-right'
class-customer.name='h1-like' class-customer.name='h1-like'
class-name='h1-aside name' class-name='h1-aside'
value-const-title1='N°' value-const-title1='N°'
) )
.mobile-sidebar-button.jsMobileSidebarOpenButton button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
button.icon-arrow-left-circle div.content-box__height
span MENU
div
sib-ac-checker(permission='acl:Read', bind-resources) sib-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden) #project-chat(hidden)
include views/project/page-project-chat.pug include views/project/page-project-chat.pug
#project-information(hidden) #project-information.content-box__height(hidden)
include views/project/page-project-profile.pug include views/project/page-project-profile.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') nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat') sib-router(default-route='project-chat')
ul ul

View File

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

View File

@ -34,7 +34,7 @@
--color-highlight-primary: var(--color-primary); --color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black); --color-user-panel: var(--color-black);
--color-bell: var(--color-secondary); --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-title: var(--color-secondary);
--color-h1: var(--color-secondary); --color-h1: var(--color-secondary);
--color-h2: var(--color-secondary); --color-h2: var(--color-secondary);
@ -74,12 +74,12 @@
--color-scrollbar-right-track: var(--color-grey-9); --color-scrollbar-right-track: var(--color-grey-9);
--color-scrollbar-left-background: var(--color-secondary); --color-scrollbar-left-background: var(--color-secondary);
--color-scrollbar-left-track: var(--color-grey-11); --color-scrollbar-left-track: var(--color-grey-11);
--color-scrollbar-table-background: var(--color-grey-10);
--color-scrollbar-table-track: var(--color-secondary);
/* tags */ /* tags */
--color-tag-admin-text: var(--color-complementary); --color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: 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 */ /* Form elements */
--color-button-white: var(--color-white); --color-button-white: var(--color-white);
@ -98,7 +98,6 @@
--color-select-add-button: var(--color-button-secondary); --color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white); --color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-secondary);
--color-label-light: var(--color-grey-6); --color-label-light: var(--color-grey-6);
/* skill */ /* skill */
@ -118,10 +117,29 @@
--color-backlink: var(--color-secondary); --color-backlink: var(--color-secondary);
--color-content-header: var(--color-grey-9); --color-content-header: var(--color-grey-9);
/* job board */
--color-job-board-primary: var(--color-primary) !important;
--color-job-board-secondary: var(--color-secondary)!important;
--color-job-board-complementary: var(--color-complementary)!important;
--color-job-board-complementary-darken: var(--color-complementary-darken)!important;
--color-job-board-white: var(--color-white)!important;
--color-job-board-black-1: var(--color-black)!important;
--color-job-board-grey-10: #E4E8ED !important; // for some reason with the var it doesh't work var(--color-grey-12) !important;
/* 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 */ /* Variables for event */
$color-212-4-50: hsl(212.7,4.3%,50%); $color-212-4-50: hsl(212.7,4.3%,50%);
$color-0-0-22: hsl(0,0%,22.7%); $color-0-0-22: hsl(0,0%,22.7%);
$color-203-87-19: hsl(203, 87.8%, 19.2%); $color-203-87-19: hsl(203, 87.8%, 19.2%);
$color-357-67-45: hsl(357,67.5%,45.9%); $color-357-67-45: hsl(357,67.5%,45.9%);

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

@ -44,7 +44,7 @@
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
width: 25%; width: 50%;
font-size: 1.1rem; font-size: 1.1rem;
align-self: center; align-self: center;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;

View File

@ -1,61 +1,91 @@
#admin-circle-create, .form form {
#admin-project-create, display: block;
#admin-users-create, height: fit-content;
#admin-users-edit { margin-bottom: 75px;
transition: all .3s ease;
input[type='submit'] { @include breakpoint(lg) {
@extend .button, display: flex;
.text-bold, flex-direction: column;
.text-uppercase, transition: all .3s ease;
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
} }
} }
.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 { &.with-form {
h1 { /*sib-set-default:not([name='user-thumb']) {
color: var(--color-title); clear: both;
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;
display: flex!important; display: flex!important;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 100%; max-width: 100%;
@ -64,380 +94,262 @@
float: left; float: left;
width: 50%; width: 50%;
} }
} }*/
}
}
label { /*sib-form[set-user-id-select] {
display: flex;
flex-direction: column;
input:not([type='file']), input[type="submit"] {
textarea { margin-left: 0;
-webkit-tap-highlight-color: var(--color-grey-7); margin-top: 0;
background-color: var(--color-input-background); }
box-sizing: border-box;
border: 2px solid var(--color-input-background); select {
color: var(--color-input-text); display: none;
/*flex: 1 1 0; Problem on Firefox for input type date*/ }
line-height: 1; }*/
min-width: 0;
padding: 1rem;
/* 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"]), .ss-arrow {
textarea { font-size: 1.8rem;
border: 2px solid var(--color-input-background); margin: 0 18px 0 0;
&:focus, span {
&: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 {
border: solid var(--color-input-icon); border: solid var(--color-input-icon);
border-width: 0 2px 2px 0; 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 { .ss-list {
align-self: auto; color: var(--color-select-list);
} font-weight: normal;
text-transform: none;
}
}
sib-form-date { /* Additional styles for the select to add a member in circle-edit */
input[type="date"] { .block.select-add>form {
background-image: url("/images/calendar.svg"); display: block;
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 { @include breakpoint(lg) {
cursor: pointer; display: flex;
opacity: 0; flex-direction: row;
position: absolute; margin-bottom: 2.6rem;
right: 8px; }
}
&::-webkit-clear-button { label {
cursor: pointer; margin-top: 0;
margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ }
margin-right: 5px;
}
&::-webkit-inner-spin-button { .ss-main {
display: none; min-width: 35vw;
} }
}
}
sib-form-file { input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.button-complementary,
.bordered;
margin: 10px 0;
width: 100%;
label { @include breakpoint(lg) {
align-items: baseline; margin: auto 0 auto 2.2rem;
clear: both; width: auto;
display: flex; }
flex-direction: row; }
flex-wrap: wrap; }
max-width: 100%; /* End */
div { sib-form-date {
width: 100%; input[type="date"] {
} background-image: url("/images/calendar.svg");
background-position: right 12px top 50%;
input[type='text'] { background-repeat: no-repeat;
box-sizing: border-box; background-size: 1.4rem;
flex: 0 0 50%; color: var(--color-input-icon);
} cursor: default;
font-size: 1.4rem;
input[type='file'] { margin-top: 1.6rem;
box-sizing: border-box; max-width: 50vw;
flex: 0 0 20%; padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
color: var(--color-input-text); padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
cursor: pointer; position: relative;
padding-left: 3rem;
} &::-webkit-calendar-picker-indicator {
} cursor: pointer;
} opacity: 0;
position: absolute;
sib-multiple-form { right: 8px;
margin-top: 1.8rem; }
}
&::-webkit-clear-button {
sib-multiple-select { cursor: pointer;
margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
&.select-groups .ss-values .ss-disabled::before { margin-right: 5px;
content: "Sélectionne des groupes"; }
}
&::-webkit-inner-spin-button {
&.select-skills .ss-values .ss-disabled::before { display: none;
content: "Select skills"; }
} }
}
sib-form-auto-completion > label {
display: flex; sib-form-file {
flex-direction: column;
label {
.ss-main { align-items: baseline;
font-weight: normal; clear: both;
margin-bottom: 7.8rem; display: flex;
margin-top: 1.6rem; flex-direction: row;
max-width: 50vw; flex-wrap: wrap;
text-transform: none; max-width: 100%;
.ss-multi-selected { div {
align-items: center; width: 100%;
background-color: var(--color-input-background); }
border: none;
border-radius: 0px; input[type='text'] {
display: flex; box-sizing: border-box;
justify-content: flex-end; flex: 0 0 50%;
min-height: 4.2rem; }
padding-left: 1.2rem;
input[type='file'] {
.ss-add { box-sizing: border-box;
font-size: 1.8rem; flex: 0 0 20%;
margin: 0 18px 0 0; color: var(--color-input-text);
cursor: pointer;
span.ss-plus { padding-left: 3rem;
background: var(--color-input-icon); }
}
&::after { }
background: var(--color-input-icon);
} /*sib-multiple-select {
}
} &.select-skills .ss-values .ss-disabled::before {
content: "Select skills";
.ss-values { }
background: transparent;
position: absolute; sib-form-auto-completion > label {
top: 6rem; display: flex;
width: 100%; flex-direction: column;
.ss-disabled { .ss-main {
color: transparent; font-weight: normal;
font-size: 1.4rem; margin-bottom: 7.8rem;
left: calc(1.2rem - 5px); margin-top: 1.6rem;
position: absolute; max-width: 50vw;
top: calc(-6rem + 7px); text-transform: none;
&::before { .ss-multi-selected {
color: var(--color-grey-5); align-items: center;
font-weight: normal; background-color: var(--color-input-background);
} border: none;
} border-radius: 0px;
display: flex;
.ss-value { justify-content: flex-end;
@extend .skill; min-height: 4.2rem;
display: flex; padding-left: 1.2rem;
.ss-value-delete { .ss-add {
font-weight: normal; font-size: 1.8rem;
} margin: 0 18px 0 0;
}
} span.ss-plus {
} background: var(--color-input-icon);
.ss-list { &::after {
color: var(--color-input-text); background: var(--color-input-icon);
} }
} }
} }
}
.ss-values {
/* CUSTOM WIDGETS */ background: transparent;
position: absolute;
hubl-member-form { top: 6rem;
width: 100%; width: 100%;
form { .ss-disabled {
display: flex; color: transparent;
flex-direction: column; font-size: 1.4rem;
left: calc(1.2rem - 5px);
[name='member-form__input'] { position: absolute;
margin-bottom: 1rem; top: calc(-6rem + 7px);
}
&::before {
sib-form-auto-completion { color: var(--color-grey-5);
float: left; font-weight: normal;
} }
}
input[type='submit'] {
background-color: var(--color-select-add-button-background); .ss-value {
border: 1px solid var(--color-select-add-button); @extend .skill;
color: var(--color-select-add-button); 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 { #header {
max-height: 83px; max-height: 50px;
height: 83px; height: 50px;
display: flex;
align-items: center; align-items: center;
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;
// padding: 1.6rem 0.64rem; position: fixed;
padding: 0 2.5rem; 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; position: relative;
z-index: 1;
#logo { @include breakpoint(lg) {
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 {
margin-right: 2.5rem; margin-right: 2.5rem;
position: relative; }
@include breakpoint(sm) { summary {
margin-right: 0;
&::-moz-list-bullet {
list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
} }
summary { &::-webkit-details-marker {
display: none;
&::-moz-list-bullet {
list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
}
&::-webkit-details-marker {
display: none;
}
} }
} }
}
/* End */
sib-notifications {
color: var(--color-bell);
@include breakpoint(sm) {
padding: 0;
}
.sib-notifications__container { .sib-notifications__container {
position: relative; position: relative;
.sib-notifications__button { .sib-notifications__button {
@include icon('bell'); @include icon('bell');
font-size: 3rem; font-size: 2.5rem;
@include breakpoint(lg) {
font-size: 3rem;
}
&::before { &::before {
margin-left: 0; margin-left: 0;
@ -100,169 +94,191 @@
} }
.sib-notifications__counter { .sib-notifications__counter {
left: 2.1rem; left: 2rem;
position: absolute; position: absolute;
top: -3px; top: 1px;
@include breakpoint(lg) {
left: 2.1rem;
top: -3px;
}
} }
} }
.sib-notifications__list { .sib-notifications__list {
position: absolute; overflow-x: hidden;
right: 0; position: fixed;
top: 5.6rem; left: 0;
} top: 4.5rem;
} width: 100vw;
#user-controls {
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
summary { @include breakpoint(md) {
padding: 18px; border: 0;
cursor: pointer; border-radius: 0;
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
&:focus {
background-color: var(--color-user-panel-header-background-open);
color: var(--color-user-panel-header-text-open);
outline: none;
} }
}
#user-controls__profile {
div {
display: flex;
flex-direction: row-reverse;
> * {
vertical-align: middle;
}
hubl-user-avatar { @include breakpoint(lg) {
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);
position: absolute; position: absolute;
left: auto;
right: 0; right: 0;
top: 0; top: 5.6rem;
width: 100%; width: 300px;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
sib-link {
color: var(--color-grey-4);
display: block;
border-bottom: 1px solid var(--color-user-panel-list-border);
margin-right: 0;
padding: 1.6rem 1.3rem;
&:hover {
color: var(--color-user-panel-list-text-hover);
}
}
}
}
button {
color: var(--color-grey-4);
padding: 1.6rem 1.3rem;
text-align: left;
width: 100%;
}
} }
} }
}
&[open] { }
background-color: var(--color-user-panel-header-background);
color: var(--color-user-panel-header-text); #user-controls {
padding: 0;
#user-controls__profile { -webkit-touch-callout: none;
-webkit-user-select: none;
div { -moz-user-select: none;
-ms-user-select: none;
sib-display-value[name='first_name'] { user-select: none;
@include icon('close');
summary {
&::before { cursor: pointer;
margin-left: 1.5rem; display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
}
} @include breakpoint(lg) {
} padding: 18px;
} }
}
} &:focus {
background-color: transparent;
.mobile-menu-icon { color: var(--color-user-panel-header-text-open);
display: none; outline: none;
@include breakpoint(sm) { @include breakpoint(lg) {
display: block; background-color: var(--color-user-panel-header-background-open);
padding-left: 0; }
font-size: 26px; }
} }
#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 { body {
background-color: var(--color-main-background); background-color: var(--color-main-background);
box-sizing: border-box;
color: var(--color-main-text); color: var(--color-main-text);
font-size: 1.6rem; font-size: 1.6rem;
min-height: 100vh; /* Fix for viewport height bug in webkit for mobile */
overflow-wrap: break-word; height: -webkit-fill-available;
overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */ min-height: -webkit-fill-available;
}
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;*/
} }
.notLoggedIn { .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 */ /* Add scrollbar to the left and right menu, and to the content */
nav, .views-container { nav, .views-container, .table-wrapper {
overflow: auto; overflow: auto;
height: auto; height: auto;
-webkit-overflow-scrolling: touch; -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 */ /* Quick fix. Will be removed later */
#admin-circles, #admin-circles,
#admin-projects, #admin-projects,
@ -143,6 +232,7 @@ h2, .h2-like {
h3 { h3 {
color: var(--color-title); color: var(--color-title);
font-size: 1.7rem; font-size: 1.7rem;
margin: 0;
} }
h4 { h4 {
@ -153,17 +243,44 @@ h5 {
font-size: 2rem; font-size: 2rem;
} }
%padding-main { .avatar {
padding: 1.3rem; 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 { .customer-logo {
padding: 3.2rem; box-sizing: border-box;
display: flex;
height: 8.5vh;
justify-content: flex-end;
margin-top: 20px;
text-align: end;
width: 15vw;
} }
.content-box { .content-box {
@include window-style-modal(); @include window-style-modal();
display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
margin: 2rem 1rem 5rem 2rem; margin: 2rem 1rem 5rem 2rem;
@ -175,19 +292,34 @@ h5 {
margin: 0 auto; margin: 0 auto;
min-height: 100%; min-height: 100%;
} }
&.with-padding {
@extend %padding-main;
}
} }
/* Header inside circle, project view */ /* Header inside circle, project view */
.content-box__header { .content-box__header {
border-bottom: 1px solid var(--color-content-header); border-bottom: 1px solid var(--color-content-header);
padding: 3rem; padding: 1.8rem 0 1.4rem;
margin: 0 1.6rem;
@include breakpoint(sm) { @include breakpoint(lg) {
background: var(--color-grey-10); 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 { sib-display {
@ -196,57 +328,62 @@ h5 {
} }
} }
.mobile-sidebar-button { /* For sib-display on project, circle, or private message view */
@include breakpoint(sm) { sib-display {
float: right; width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
color: var(--color-secondary);
font-size: 1.8rem;
font-weight: bold!important;
&::before { div {
font-size: 2.2rem; overflow: hidden;
font-weight: normal; text-overflow: ellipsis;
margin-right: 1.2rem; 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) { .description {
display: none; 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 { @include breakpoint(lg) {
font-size: 1.8rem; min-height: calc(100vh - 83px - 84px);
&: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;
}
} }
} }
.content-box__info { .content-box__info {
@extend %padding-block;
display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem;
@include breakpoint(lg) {
padding: 3.2rem;
}
* {
box-sizing: border-box;
}
} }
.modal { /*.modal {
color: var(--color-white); color: var(--color-white);
margin: 75px; margin: 75px;
padding: 40px; padding: 40px;
@ -267,6 +404,40 @@ h5 {
color: var(--color-secondary); 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 { .backlink {
@ -288,32 +459,37 @@ h5 {
} }
} }
.name { .centered {
color: var(--color-grey-1); text-align: center;
font-size: 2rem;
font-weight: bold;
} }
.username { .flex {
display: flex;
}
&::before { .desktop-button__end {
content: '@'; display: block;
@include breakpoint(lg) {
display: flex;
justify-content: flex-end;
} }
} }
.space-between { .space-between {
display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 1.4rem;
&.with-padding {
padding-bottom: 1.4rem;
}
} }
.position-end { .mobile-vertical-align {
text-align: end; flex-direction: column;
}
.section { @include breakpoint(lg) {
border-bottom: 1px solid var(--color-grey-10); flex-direction: row;
padding: 4.5rem; }
} }
.word-spacing-left { .word-spacing-left {
@ -324,8 +500,14 @@ h5 {
margin-right: 0.60rem; margin-right: 0.60rem;
} }
// Compatibility layer for non-updated components .mobile-margin__bottom {
@import 'compat'; margin-bottom: 1rem;
@include breakpoint(lg) {
margin-bottom: 0;
}
}
// Other base components // Other base components
@import 'form'; @import 'form';
@import 'table'; @import 'table';
@ -356,8 +538,33 @@ a,
font-size: 1.4rem; font-size: 1.4rem;
} }
&.btn-margin-left { &.mobile-full-width {
margin-left: 2.2rem; 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 { &.small {

View File

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

View File

@ -1,155 +1,229 @@
#circle-information, /* Display and positioning of the table and its elements */
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#project-edit,
#admin-project-list,
#admin-project-create,
#admin-users-list {
[widget="hubl-team-template-edit"]>div { .table-wrapper {
flex: 1; overflow: auto;
} position: relative;
width: 100%;
.table { .table {
border-collapse: collapse;
display: table;
margin-bottom: 20px;
overflow: auto;
table-layout: fixed;
width: 100%;
max-width: 100%;
}
.table-header { .table-header {
display: flex; display: table-header-group;
flex: 1; text-align: center;
font-size: 1.6rem; vertical-align: middle;
font-weight: 600;
justify-content: space-around;
text-align: center;
&.grey-color { &>div {
background: var(--color-table-header-background); display: table-cell;
color: var(--color-table-header-text); white-space: nowrap;
}
>* {
border-right: 1px solid var(--color-table-border);
padding: 2.1rem 0;
text-align: center;
}
>*:last-of-type {
border-right: 1px solid --color-table-header-background;
}
} }
}
.table-body, .table-header { .table-body {
display: table-row-group;
>div:first-of-type>sib-display>div, &>div {
hubl-team-template-edit[name='members'] { display: contents;
display: flex;
border-left: 1px solid var(--color-table-border);
}
.border { &>sib-display {
border-bottom: 1px solid var(--color-table-border); display: table-row;
border-right: 1px solid var(--color-table-border);
}
.cell { &>div {
text-align: center; display: contents;
word-wrap: break-word;
white-space: nowrap;
}
.w25 { &>* {
width: 25%; border-bottom: 1px solid var(--color-table-border);
} display: table-cell;
vertical-align: middle;
.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;
} }
} }
>[name='sub'] { &>sib-multiple {
@extend %user-thumb__grid-inf; display: contents;
>.user-thumb__username:not(:empty) { &>div {
@extend %user-thumb__username; display: contents;
}
>.user-thumb__city:not(:empty) { &>hubl-team-template-edit {
@extend %user-thumb__city; 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; /* Styles of the table and its elements */
justify-content: center;
} .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 { %user-thumb__grid {
display: grid; display: grid;
grid-column-gap: 1.6rem; grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto; grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh); grid-template-rows: repeat(2, auto);
} }
%user-thumb__grid-sup { %user-thumb__grid-sup {
@ -21,58 +22,26 @@
margin-top: 0.50rem; margin-top: 0.50rem;
} }
%user-thumb__picture { /* Styles for elements of user-thumb*/
align-items: center; .user-thumb__picture {
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 {
color: var(--color-user-thumb-name); color: var(--color-user-thumb-name);
font-weight: 600; font-weight: 600;
margin-right: 1rem; margin-right: 1rem;
} }
%user-thumb__groups { .user-thumb__admin:not(:empty) {
display: flex;
margin-bottom: 1px;
margin-left: 0.6rem;
[name='groups'],
[name='user.groups'] {
@extend %tag-role;
}
}
%user-thumb__admin {
@extend %tag-admin; @extend %tag-admin;
} }
%user-thumb__username { .user-thumb__username {
align-items: center; align-items: center;
display: flex; display: flex;
@ -81,7 +50,7 @@
} }
} }
%user-thumb__city { .user-thumb__city:not(:empty) {
@include mdi('atom'); @include mdi('atom');
align-items: center; align-items: center;
display: flex; display: flex;
@ -93,7 +62,7 @@
} }
} }
%user-thumb__lead { .user-thumb__lead:not(:empty) {
@include icon('eyeglass'); @include icon('eyeglass');
align-items: center; align-items: center;
display: flex; display: flex;
@ -106,3 +75,23 @@
margin-right: 0.50rem; 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 'chat';
@import 'comment'; @import 'comment';
@import 'filters'; @import 'filters';
@import 'howto';
@import 'sidebar'; @import 'sidebar';
@import 'skills'; @import 'skills';
@import 'tags'; @import 'tags';

View File

@ -1,16 +1,19 @@
.chat-view { .chat-view {
padding: 0; padding: 0;
height: calc(100vh - 84px - 83px); height: calc(100vh - 106px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@include breakpoint(lg) {
height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */
}
> sib-chat { > sib-chat {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
max-height: calc(100vh - 84px - 83px);
z-index: 0; 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 { .no-sidebar {
flex: 1; flex: 1;
margin-top: 50px;
@include breakpoint(lg) {
margin-top: 0;
}
&.with-padding { &.with-padding {
@extend %padding-main; padding: 1.3rem;
} }
} }
@ -11,14 +16,20 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
margin-top: 50px;
overflow: hidden; overflow: hidden;
@include breakpoint(lg) {
margin-top: 0;
}
.views-container { .views-container {
flex: 1 0 0; flex: 1 0 0;
/*-webkit-backface-visibility: hidden;*/ /*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed { &.sidebar-is-closed {
@include breakpoint(769px, 0) {
@include breakpoint(lg) {
margin-left: -15.5rem; margin-left: -15.5rem;
transform: translate(15.5rem); transform: translate(15.5rem);
} }
@ -141,9 +152,10 @@
} }
&.jsRightMenu { &.jsRightMenu {
display: none;
@include breakpoint(sm) { @include breakpoint(lg) {
display: none; display: block;
} }
} }
@ -157,7 +169,7 @@
&.jsRightMenu[open] { &.jsRightMenu[open] {
@include breakpoint(sm) { @include breakpoint(md) {
display: block; display: block;
background: var(--color-right-menu-background); background: var(--color-right-menu-background);
bottom: 0; bottom: 0;
@ -165,9 +177,13 @@
min-width: 60%; min-width: 60%;
position: fixed; position: fixed;
right: 0; right: 0;
top: 83px; top: 50px;
z-index: 1; 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 { %tag-admin {
border: 1px solid var(--color-tag-admin-border); display: none;
border-radius: 3px;
color: var(--color-tag-admin-text); @include breakpoint(lg) {
font-size: 1.4rem; border: 1px solid var(--color-tag-admin-border);
font-weight: 400; border-radius: 3px;
margin-left: 0.6rem; color: var(--color-tag-admin-text);
padding: 0.35rem 0.98rem; font-size: 1.4rem;
} font-weight: 400;
margin-left: 0.6rem;
padding: 0.35rem 0.98rem;
}
}

View File

@ -10,7 +10,7 @@
@import 'base/main'; @import 'base/main';
@import 'base/about'; @import 'base/about';
div#viewport { #viewport {
display: flex; display: flex;
flex: 1; flex: 1;
/*height: auto; /*height: auto;
@ -19,8 +19,6 @@ div#viewport {
@import 'components/index'; @import 'components/index';
@import 'layout/members/index'; @import 'layout/members/index';
@import 'layout/job-offers/index'; @import 'layout/job-offers/index';
@import 'layout/project/index';
@import 'layout/circle/index';
@import 'layout/user/index'; @import 'layout/user/index';
@import 'layout/events/index'; @import 'layout/events/index';
@import 'layout/dashboard/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 '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 template
sib-display.user-thumb( sib-display.user-thumb(
data-src="${await value}" 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-name='user-thumb__name'
class-profile.city='user-thumb__city'
class-is_lead='user-thumb__lead' class-is_lead='user-thumb__lead'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'

View File

@ -2,26 +2,19 @@ include hubl-user-avatar.pug
sib-widget(name='hubl-circle-team-template') sib-widget(name='hubl-circle-team-template')
template template
sib-display.user-thumb( sib-display.user-thumb.is-spaced(
data-src='${await value.user}' 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}' 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='tag-admin' class-isadmin='user-thumb__admin'
class-groups='tag-group'
class-profile.city='user-thumb__city' class-profile.city='user-thumb__city'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
widget-isadmin='hubl-circle-user-admin' widget-isadmin='hubl-circle-user-admin'
widget-groups='hubl-circle-user-groups'
multiple-groups=''
) )
sib-widget(name='hubl-circle-user-admin') sib-widget(name='hubl-circle-user-admin')
template ${(await value) != "false" ? "Administrateur" : ""} 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') sib-widget(name='hubl-project-team')
template template
sib-display.user-thumb( sib-display.user-thumb.is-spaced(
data-src='${await value}' 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}' 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='tag-admin' class-isadmin='user-thumb__admin'
class-user.groups='tag-group'
class-user.profile.city='user-thumb__city' class-user.profile.city='user-thumb__city'
class-name='user-thumb__lead' class-name='user-thumb__lead'
widget-user.account.picture='hubl-user-avatar' widget-user.account.picture='hubl-user-avatar'
widget-isadmin='hubl-project-user-admin' widget-isadmin='hubl-project-user-admin'
widget-user.groups='hubl-project-user-groups'
multiple-user.groups=''
) )
sib-widget(name='hubl-project-user-admin') sib-widget(name='hubl-project-user-admin')
template ${(await value) == "false" ? "" : "Administrateur"} 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 sib-link(class="backlink right", next='admin-circle-list') Retour
h1.centered Créer un canal h1.centered Créer un canal
sib-form( sib-form.form.button-register(
data-src=`${endpoints.circles || endpoints.post.circles}` data-src=`${endpoints.circles || endpoints.post.circles}`
fields='status, name, description' 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' 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-name='Nom du canal *'
label-description='Sous-titre du canal *' label-description='Sous-titre du canal *'
widget-status='hubl-status'
next='admin-circle-list' next='admin-circle-list'
submit-button='Enregistrer' 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-router(default-route='admin-circle-list', hidden)
sib-route(name='admin-circle-list') sib-route(name='admin-circle-list')
sib-route(name='admin-circle-create') sib-route(name='admin-circle-create')
sib-route(name='circle-left') sib-route(name='circle-left')
div.content-box__header div.content-box__header.flex.space-between
h1.without-margin Administration h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
include ../circle/page-circle-left.pug include ../circle/page-circle-left.pug
#admin-circle-list(hidden) #admin-circle-list.content-box__height(hidden)
include ../../templates/hubl-user-avatar.pug include ../../templates/hubl-user-avatar.pug
sib-widget(name='hubl-circle-owner') sib-widget(name='hubl-circle-owner')
template template
sib-display.user-thumb( sib-display.user-thumb.is-spaced(
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,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( 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'
next='admin-circle-create' next='admin-circle-create'
) Créer un canal ) Créer un canal
.table .table-wrapper
.table
div.table-header.grey-color div.table-header.grey-color
div.w33 Nom div.w280 Nom
div.w33 Administrateurs div.w280 Administrateurs
div.w33 Rejoindre div.w280 Rejoindre
sib-widget(name='hubl-admin-circle-leave-button') sib-widget(name='hubl-admin-circle-leave-button')
template template
sib-delete( sib-delete(
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter' data-label='Quitter'
) )
sib-display( sib-display(
class='table-body' class='table-body'
bind-user bind-user
nested-field='circles' nested-field='circles'
fields='circle.name, circle.owner, leaveButton' fields='circle.name, circle.owner, leaveButton'
class-circle.name='w33 cell border cell-with-name' class-circle.name='w280 border cell-with-name'
class-circle.owner='w33 cell border cell-with-id-card' class-circle.owner='w280 border cell-with-id-card'
class-leaveButton='w33 cell border cell-with-buttons' class-leaveButton='w280 border cell-with-buttons'
action-leaveButton="joinButton" action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button" widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner' widget-circle.owner='hubl-circle-owner'
order-by="circle.name" order-by="circle.name"
) )
sib-widget(name='hubl-admin-circle-join-button') sib-widget(name='hubl-admin-circle-join-button')
template template
sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}' data-src='${value}'
fields='user.username' fields='user.username'
value-user.username='hubl-workaround-493' value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden' widget-user.username='sib-form-hidden'
submit-button='Rejoindre' submit-button='Rejoindre'
) )
sib-display( sib-display(
class='table-body' class='table-body'
data-src=`${endpoints.circles || endpoints.get.circles}joinable/` data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members' fields='name, owner, members'
class-name='w33 cell border cell-with-name' class-name='w280 border cell-with-name'
class-owner='w33 cell border cell-with-id-card' class-owner='w280 border cell-with-id-card'
widget-owner='hubl-circle-owner' widget-owner='hubl-circle-owner'
class-members='w33 cell border cell-with-buttons' class-members='w280 border cell-with-buttons'
widget-members="hubl-admin-circle-join-button" 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 include page-admin-circles-create.pug

View File

@ -1,8 +1,4 @@
sib-widget(name='hubl-template-project-title') div.content-box__info.flex
template
p ${value}
div.content-box__info
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")
@ -18,40 +14,32 @@ div.content-box__info
h1.centered Créer un projet h1.centered Créer un projet
sib-form( sib-form.form.button-register(
data-src=`${endpoints.projects || endpoints.post.projects}` data-src=`${endpoints.projects || endpoints.post.projects}`
fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)'
class-fieldset-fee='fieldset'
value-fieldset-fee='Contributions'
widget-fieldset-fee='hubl-template-project-title'
class-fieldset-captain='fieldset'
value-fieldset-captain='Capitaine'
widget-fieldset-captain='hubl-template-project-title'
label-customer='Nom du client*' label-customer='Nom du client*'
class-customer='member-select form-label is-light is-half-width' class-customer='form-label is-light is-half-width'
range-customer=`${endpoints.customers || endpoints.get.customers}` range-customer=`${endpoints.customers || endpoints.get.customers}`
widget-customer='sib-form-auto-completion' widget-customer='sib-form-auto-completion'
label-name='Nom du projet*' 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-project.description='Description du projet' label-project.description='Description du projet'
class-project.description='form-label is-light is-full-width' class-project.description='form-label is-light is-full-width input-text-like'
widget-project.description='sib-form-textarea' widget-project.description='sib-form-textarea'
label-businessProvider.name='Apporteur d\'affaire*' label-businessProvider.name='Apporteur d\'affaire*'
class-businessProvider.name='form-label is-light is-half-width' class-businessProvider.name='form-label is-light is-half-width input-text-like'
label-businessProvider.fee='Contribution' label-businessProvider.fee='Contribution'
class-businessProvider.fee='form-label is-light is-half-width' class-businessProvider.fee='form-label is-light is-half-width input-text-like'
label-captain='Capitaine du projet' label-captain='Capitaine du projet'
range-captain=`${endpoints.users || endpoints.get.users}` 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' widget-captain='sib-form-auto-completion'
next='admin-project-list' next='admin-project-list'

View File

@ -1,96 +1,98 @@
.content-box.full-width.with-form .content-box.flex.full-width.with-form
sib-router(default-route='admin-project-list', hidden) sib-router(default-route='admin-project-list', hidden)
sib-route(name='admin-project-list') sib-route(name='admin-project-list')
sib-route(name='admin-project-create') sib-route(name='admin-project-create')
sib-route(name='project-left') sib-route(name='project-left')
div.content-box__header div.content-box__header.flex.space-between
h1.without-margin Administration h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
#project-left(hidden) #project-left(hidden)
include ../project/page-project-left.pug include ../project/page-project-left.pug
#admin-project-list(hidden) #admin-project-list.content-box__height(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
div.admin-header__title 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'
next='admin-project-create' next='admin-project-create'
) Créer un projet ) Créer un projet
.table .table-wrapper
div.table-header.grey-color .table
div Nom div.table-header.grey-color
div Administrateurs div.w262 Nom
div Capitaines div.w262 Administrateurs
div Accès div.w262 Capitaines
div.w262 Accès
sib-widget(name="hubl-admin-project-leave-button") sib-widget(name="hubl-admin-project-leave-button")
template template
sib-delete( sib-delete(
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter' data-label='Quitter'
) )
sib-widget(name='hubl-project-captain') sib-widget(name='hubl-project-captain')
template template
sib-display.user-thumb( sib-display.user-thumb.is-spaced(
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'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
) )
sib-widget(name='hubl-project-admins') sib-widget(name='hubl-project-admins')
template template
sib-display( sib-display(
data-src='${value}' data-src='${value}'
fields='user' fields='user'
search-fields='is_admin' search-fields='is_admin'
search-value-is_admin='true' search-value-is_admin='true'
search-widget-is_admin='sib-form-hidden' search-widget-is_admin='sib-form-hidden'
widget-user='hubl-project-captain' widget-user='hubl-project-captain'
) )
sib-widget(name="hubl-admin-project-buttons") sib-widget(name="hubl-admin-project-buttons")
template template
sib-display( sib-display(
data-src='${src}' data-src='${src}'
nested-field='members' nested-field='members'
fields='relation' fields='relation'
action-relation='relation' action-relation='relation'
widget-relation='hubl-admin-project-leave-button' widget-relation='hubl-admin-project-leave-button'
search-fields='user' search-fields='user'
search-widget-user='sib-form-hidden' search-widget-user='sib-form-hidden'
search-value-user="-" search-value-user="-"
hubl-inherit-user-id="search-value-user" hubl-inherit-user-id="search-value-user"
) )
sib-display( sib-display(
class='table-body' class='table-body'
data-src=`${endpoints.projects || endpoints.get.projects}` data-src=`${endpoints.projects || endpoints.get.projects}`
fields='name, members, captain, buttons' fields='name, members, captain, buttons'
class-name='w25 cell border cell-with-name hashtag' class-name='w262 border cell-with-name hashtag'
class-members='w25 cell border' class-members='w262 border'
class-captain='w25 cell border cell-with-id-card' class-captain='w262 border cell-with-id-card'
class-buttons='w25 cell border cell-with-buttons' class-buttons='w262 border cell-with-buttons'
widget-buttons="admin-project-buttons" widget-buttons="admin-project-buttons"
action-buttons="buttons" action-buttons="buttons"
widget-captain='hubl-project-captain' widget-captain='hubl-project-captain'
widget-members='hubl-project-admins' widget-members='hubl-project-admins'
) )
#admin-project-create(hidden) #admin-project-create.content-box__height(hidden)
include page-admin-projects-create.pug include page-admin-projects-create.pug

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 sib-link(class='backlink right', next='admin-users-list') Retour
h1.centered Ajouter un utilisateur à la plateforme h1.centered Ajouter un utilisateur à la plateforme
sib-form( sib-form.form.button-register(
data-src=`${endpoints.users || endpoints.post.users}` 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)' 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-first_name='form-label is-light is-half-width input-text-like'
class-last_name='form-label is-light is-half-width' class-last_name='form-label is-light is-half-width input-text-like'
class-username='form-label is-light is-half-width' class-username='form-label is-light is-half-width input-text-like'
class-email='form-label is-light is-half-width' class-email='form-label is-light is-half-width input-text-like'
label-first_name='Prénom *' label-first_name='Prénom *'
label-last_name='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 sib-link(class='backlink right', next='admin-users-list') Retour
h1.centered h1.centered
@ -8,16 +8,15 @@ div.content-box__info
fields='name' fields='name'
) )
sib-form( sib-form.form.button-register(
bind-resources='' bind-resources=''
range-groups=`${endpoints.groups || endpoints.get.groups}`
fields='line-1(first_name, last_name), line-2(username, email)' fields='line-1(first_name, last_name), line-2(username, email)'
class-first_name='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' class-last_name='form-label is-light is-half-width input-text-like'
class-username='form-label is-light is-half-width' class-username='form-label is-light is-half-width input-text-like'
class-email='form-label is-light is-half-width' class-email='form-label is-light is-half-width input-text-like'
label-first_name='Prénom *' label-first_name='Prénom *'
label-last_name='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-router(default-route='admin-users-list', hidden)
sib-route(name='admin-users-list') sib-route(name='admin-users-list')
sib-route(name='admin-users-create') sib-route(name='admin-users-create')
sib-route(name='admin-users-edit') sib-route(name='admin-users-edit')
div.content-box__header div.content-box__header.flex.space-between
h1.without-margin Administration h1.without-margin Administration
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
sib-widget(name='hubl-sib-action-custom') sib-widget(name='hubl-sib-action-custom')
template template
@ -16,51 +17,45 @@
next="${value}" next="${value}"
) )
sib-widget(name='hubl-user-admin-groups-display')
template
sib-display(
data-src="${value}"
fields="name"
)
#admin-users-list.content-box__height(hidden)
#admin-users-list(hidden) div.content-box__info.flex
div.content-box__info div.admin-header.flex
div.admin-header h3 Utilisateurs
div.admin-header__title 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')
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'
next='admin-users-create' next='admin-users-create'
) Ajouter un utilisateur ) Ajouter un utilisateur
.table .table-wrapper
div.table-header.grey-color .table
div.w75 Nom div.table-header.grey-color
div.w25 div.w280 Nom
div.w70
sib-display(
class='table-body' sib-display(
data-src=`${endpoints.users || endpoints.get.users}` class='table-body'
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' data-src=`${endpoints.users || endpoints.get.users}`
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
class-account.picture='user-thumb__picture' class-account.picture='avatar user-thumb__picture'
class-name='user-thumb__name' class-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'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
label-actions='Edit' label-actions='Edit'
action-actions='admin-users-edit' action-actions='admin-users-edit'
class-actions='w25 cell border cell-with-buttons' class-actions='w70 border cell-with-buttons'
widget-actions='hubl-sib-action-custom' 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 include page-admin-users-create.pug
#admin-users-edit(hidden) #admin-users-edit.content-box__height(hidden)
include page-admin-users-edit.pug include page-admin-users-edit.pug

View File

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

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.

View File

@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden)
include ../../templates/hubl-circle-team.pug include ../../templates/hubl-circle-team.pug
.content-box__info .content-box__info
.space-between .flex.space-between.with-padding.mobile-vertical-align
sib-display( sib-display.mobile-margin__bottom(
bind-resources bind-resources
fields='creationDateSet(title, creationDate)' fields='creationDateSet(title, creationDate)'
@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden)
widget-creationDate='sib-display-date' widget-creationDate='sib-display-date'
) )
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') 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-ac-checker(permission='acl:Delete', bind-resources)
sib-delete( 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 bind-resources
data-label='Supprimer le canal' data-label='Supprimer le canal'
) )
@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden)
sib-widget(name='hubl-circle-leave-button') sib-widget(name='hubl-circle-leave-button')
template template
sib-delete( 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-src="${src}"
data-label='Quitter le canal' data-label='Quitter le canal'
) )
sib-widget(name='hubl-circle-join-button') sib-widget(name='hubl-circle-join-button')
template 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( sib-form(
data-src='' data-src=''
nested-field='members' 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 include page-circle-edit.pug

View File

@ -25,4 +25,3 @@
next='job-offers' next='job-offers'
) )

View File

@ -25,4 +25,3 @@
next='job-offers' next='job-offers'
) )

View File

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

View File

@ -1,70 +1,61 @@
div.content-box__info div.content-box__info
include ../../templates/hubl-user-avatar.pug 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 sib-link(class='backlink right', bind-resources, next='project-profile') Retour
h1 Modifie ton projet h1 Modifie ton projet
sib-form.form-edit( sib-form.form.button-register(
bind-resources bind-resources
fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' fields='line-1(customer, name), description, line-2(businessProvider, businessProviderFee)'
class-customer='member-select form-label is-light is-half-width' class-customer='form-label is-light is-half-width'
widget-customer='sib-form-auto-completion' widget-customer='sib-form-auto-completion'
class-name='form-label is-light is-half-width' class-name='form-label is-light is-half-width input-text-like'
class-description='form-label is-light is-full-width' class-description='form-label is-light is-full-width input-text-like'
label-fieldset-info=''
label-customer='Client*' label-customer='Client*'
range-customer=`${endpoints.customers || endpoints.get.customers}` range-customer=`${endpoints.customers || endpoints.get.customers}`
label-name='Nom du projet*' label-name='Nom du projet*'
label-description='Description du projet' label-description='Description du projet'
widget-fieldset-info='hubl-fieldset-title'
widget-description='sib-form-textarea' widget-description='sib-form-textarea'
class-fieldset-fee='fieldset' class-businessprovider='form-label is-light is-half-width input-text-like'
class-businessprovider='form-label is-light is-half-width' class-businessproviderfee='form-label is-light is-half-width input-text-like'
class-businessproviderfee='form-label is-light is-half-width'
label-fieldset-fee='Contributions'
label-businessprovider='Apporteur d\'affaire' label-businessprovider='Apporteur d\'affaire'
label-businessproviderfee='Montant de la contribution' label-businessproviderfee='Montant de la contribution'
widget-fieldset-fee='hubl-fieldset-title'
submit-button='Enregistrer' submit-button='Enregistrer'
) )
h2 Liste des membres : h2 Liste des membres :
sib-form.block.select-add-member( sib-form.block.select-add.button-add(
bind-resources bind-resources
nested-field='members' nested-field='members'
fields='user' fields='user'
range-user=`${endpoints.users || endpoints.get.users}` range-user=`${endpoints.users || endpoints.get.users}`
class-user='team form-label is-dark' class-user='team form-label is-light'
label-user='' label-user=''
widget-user='sib-form-auto-completion' widget-user='sib-form-auto-completion'
submit-button='Ajouter un membre' 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 //-class='table-body'
div Nom sib-display(
div Accès class='table-body'
bind-resources
fields='members'
//-class='table-body' multiple-members=''
sib-display( widget-members='hubl-team-template-edit'
class='table-body' )
bind-resources
fields='members'
multiple-members=''
widget-members='hubl-team-template-edit'
)

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.

View File

@ -5,13 +5,12 @@ sib-router(default-route='project-profile', hidden)
#project-profile(hidden) #project-profile(hidden)
include ../../templates/hubl-captain.pug include ../../templates/hubl-captain.pug
include ../../templates/hubl-circle-team.pug include ../../templates/hubl-circle-team.pug
include ../../templates/hubl-customer.pug
include ../../templates/hubl-project-team.pug include ../../templates/hubl-project-team.pug
.content-box__info .content-box__info.flex
.space-between .flex.space-between.with-padding.mobile-vertical-align
sib-display( sib-display.mobile-margin__bottom(
bind-resources bind-resources
fields='creationDateSet(title, creationDate)' fields='creationDateSet(title, creationDate)'
@ -22,10 +21,10 @@ sib-router(default-route='project-profile', hidden)
widget-creationDate='sib-display-date' widget-creationDate='sib-display-date'
) )
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') 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='project-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='project-edit' bind-resources) Modifier et ajouter un membre
.space-between .flex.space-between.with-padding
sib-display( sib-display(
bind-resources bind-resources
fields='label-captain, captain' fields='label-captain, captain'
@ -42,19 +41,6 @@ sib-router(default-route='project-profile', hidden)
widget-customer.logo='sib-display-img' widget-customer.logo='sib-display-img'
) )
h2 Contributions:
sib-link(next='project-contributions-help').button-question__position
button(aria-label='modal activator').icon-question.button-question__color
h2 Informations sur le client :
sib-display(
bind-resources
fields='customer'
widget-customer='hubl-customer'
)
h2 Equipe : h2 Equipe :
sib-display( sib-display(
@ -68,13 +54,13 @@ sib-router(default-route='project-profile', hidden)
sib-widget(name='hubl-project-leave-button') sib-widget(name='hubl-project-leave-button')
template template
sib-delete( 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-src="${src}"
data-label='Quitter le groupe' data-label='Quitter le groupe'
) )
sib-display( sib-display(
class='position-end' class='flex desktop-button__end'
bind-resources bind-resources
nested-field='members' nested-field='members'
fields='relation' fields='relation'
@ -90,5 +76,5 @@ sib-router(default-route='project-profile', hidden)
) )
#project-edit(hidden) #project-edit.content-box__height(hidden)
include page-project-edit.pug include page-project-edit.pug