diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 5884a93..19aeb4c 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -264,3 +264,21 @@ volumes: when: manual tags: - deploy + +communityhubl: + stage: deployment + environment: + name: communityhubl + url: https://community.hubl.world + before_script: + - npm ci --cache .npm --prefer-offline --only=production + script: + - echo "$APP_CONFIG_HUBL_COMMUNITY" > config.json + - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key + - npm run build + - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community-hubl@astral.startinblox.com:~/front/ + only: + - master + when: manual + tags: + - deploy diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index dcf85e8..0565062 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -19,6 +19,11 @@ --color-h1: var(--color-title); --color-h2: var(--color-title); + /* Depreciated */ + --color-tag-group-text: #9BA0A7; + --color-tag-group-border: var(--color-primary); + --color-label-dark: var(--color-grey-6); + /* Header's elements */ --color-header-background: var(--color-white); --color-bell: var(--color-complementary-darken); @@ -58,8 +63,6 @@ /* Tags */ --color-tag-admin-text: var(--color-complementary); --color-tag-admin-border: var(--color-complementary); - --color-tag-group-text: #9BA0A7; - --color-tag-group-border: var(--color-primary); /* Form elements */ --color-button-white: var(--color-white); @@ -78,7 +81,6 @@ --color-select-add-button: var(--color-button-secondary); --color-select-add-button-background: var(--color-button-white); - --color-label-dark: var(--color-complementary); --color-label-light: var(--color-grey-6); /* Skill */ @@ -142,22 +144,27 @@ } /* Button to delete a channel */ +/* box-button is depreciated */ +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete, #circle-profile>div>div.box-button>sib-ac-checker>sib-delete { background: var(--color-white); border: 1px solid var(--color-complementary); color: var(--color-complementary); } +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button, #circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button { color: var(--color-complementary); } +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover, #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover { background: var(--color-complementary); border: 1px solid var(--color-complementary); color: var(--color-white); } +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button, #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button { color: var(--color-white); } @@ -209,3 +216,7 @@ border: 1px solid var(--color-complementary); color: var(--color-white); } + +#members-list .send-display sib-link::before { + background-color: var(--color-directory-complementary)!important; +} diff --git a/src/dependencies.pug b/src/dependencies.pug index 5de986a..20fff65 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -18,14 +18,12 @@ if endpoints.events || (endpoints.get && endpoints.get.events) //- script(type="module" src="/lib/sib-event/sib-event.js" defer) 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-conversation@0.3" 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) + script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.4" defer) + //- script(type="module" src="/lib/sib-job-board/dist/index.js" defer) if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) - script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3" defer) - //- script(type="module" src="/lib/sib-directory/index.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.4" defer) + //- script(type="module" src="/lib/sib-directory/dist/index.js" defer) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) 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) 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) diff --git a/src/header.pug b/src/header.pug index f3e9241..106fc37 100644 --- a/src/header.pug +++ b/src/header.pug @@ -1,11 +1,6 @@ -#logo - sib-link(next='members') - img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) - -//- #search-bar -//- input#search-input(type='search') -//- i#search-icon.icon-magnifier(aria-hidden='true') -//- i#close-search-icon.icon-close(aria-hidden='true') +.logo + sib-link(next='dashboard') + img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) sib-notifications.notLoggedIn( nested-field="inbox" @@ -18,6 +13,8 @@ details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( fields='first_name, account.picture' + class-first_name='flex' + class-account.picture='avatar' widget-account.picture='hubl-user-avatar' bind-user ) diff --git a/src/images/alien.svg b/src/images/alien.svg index 0037c26..dad700c 100644 --- a/src/images/alien.svg +++ b/src/images/alien.svg @@ -1,4 +1,4 @@ - + diff --git a/src/images/contributions-help.png b/src/images/contributions-help.png deleted file mode 100644 index 4a3597b..0000000 Binary files a/src/images/contributions-help.png and /dev/null differ diff --git a/src/index.pug b/src/index.pug index fd04427..1a139fe 100644 --- a/src/index.pug +++ b/src/index.pug @@ -14,12 +14,16 @@ html(lang="en") if clientCSS link(rel='stylesheet', href=`${clientCSS}`) body - header#header(role='banner') - include header.pug - main.notLoggedIn - include menu-left.pug - div#viewport + .wrapper + + header#header.header.is-spaced(role='banner') + include header.pug + + nav#main__menu.left-menu.jsLeftMenu + include menu-left.pug + + main#viewport.content.notLoggedIn if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) #dashboard(hidden).no-sidebar.with-padding diff --git a/src/menu-left.pug b/src/menu-left.pug index d3b4edf..e304b87 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -47,95 +47,95 @@ sib-widget(name='hubl-menu-fix-url-project') order-by="customer.name" ) -nav#main__menu.jsLeftMenu - sib-router#navbar-router(default-route='dashboard') - if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - sib-route.menu(name='dashboard') - div.menu-label Tableau de bord - div.menu-icon.icon-home - div.divider - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - sib-route.menu(name='members') - div.menu-label Annuaire des membres - div.menu-icon.icon-people - div.divider - if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - sib-route.menu(name='job-offers', rdf-type='hd:joboffer') - div.menu-label Offres de mission - div.menu-icon.icon-briefcase - div.divider - if endpoints.events || (endpoints.get && endpoints.get.events) - sib-route.menu(name='events') - div.menu-label Evènements - div.menu-icon.icon-calendar - div.divider - if endpoints.projects || (endpoints.get && endpoints.get.projects) - div - sib-link(next='admin-project-list') - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-right-circle - div.menu-label Projets - div.menu-icon.icon-folder-alt - sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - div.sub-menu.menu-notification - sib-display.project-tab( - bind-user - nested-field='projects' - fields='project' - empty-widget='hubl-create' - empty-value='projet' - widget-project='hubl-menu-fix-url-project' - order-by='project.customer.name' - next='project' - ) - div.divider - if endpoints.circles || (endpoints.get && endpoints.get.circles) - div - sib-link(next='admin-circle-list') - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-right-circle - div.menu-label Canaux - div.menu-icon.icon-folder-alt - sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) - div.sub-menu.menu-notification - sib-display( - bind-user - nested-field='circles' - fields='circle' - empty-widget='hubl-create' - empty-value='canal' - widget-circle='hubl-menu-fix-url-circle' - order-by='circle.name' - next='circle' - ) - div.divider - if endpoints.users || (endpoints.get && endpoints.get.users) - div.menu-wrapper + +sib-router#navbar-router(default-route='dashboard') + if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) + sib-route.menu(name='dashboard') + div.menu-label Tableau de bord + div.menu-icon.icon-home + div.divider + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + sib-route.menu(name='members') + div.menu-label Annuaire des membres + div.menu-icon.icon-people + div.divider + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + sib-route.menu(name='job-offers', rdf-type='hd:joboffer') + div.menu-label Offres de mission + div.menu-icon.icon-briefcase + div.divider + if endpoints.events || (endpoints.get && endpoints.get.events) + sib-route.menu(name='events') + div.menu-label Evènements + div.menu-icon.icon-calendar + div.divider + if endpoints.projects || (endpoints.get && endpoints.get.projects) + div + sib-link(next='admin-project-list') div.menu div.menu-chevron - div.menu-icon.icon-arrow-up - div.menu-label Messages - div.menu-icon.icon-envelope-letter - sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) - div.sub-menu.menu-notification - sib-display.nosub( - data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}` - fields='name, chatProfile.jabberID, badge' - search-fields="name" - search-label-name="Rechercher..." - search-widget-name="hubl-search-users" - widget-name='sib-display-div' - widget-badge='hubl-counter' - widget-chatProfile.jabberID='hubl-menu-jabberid' - action-badge='badge' - order-by='username' - next='messages' - paginate-by='10' - ) - div.divider + div.menu-icon.icon-arrow-right-circle + div.menu-label Projets + div.menu-icon.icon-folder-alt + sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.project-tab( + bind-user + nested-field='projects' + fields='project' + empty-widget='hubl-create' + empty-value='projet' + widget-project='hubl-menu-fix-url-project' + order-by='project.customer.name' + next='project' + ) + div.divider + if endpoints.circles || (endpoints.get && endpoints.get.circles) + div + sib-link(next='admin-circle-list') + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-right-circle + div.menu-label Canaux + div.menu-icon.icon-folder-alt + sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.circle-tab( + bind-user + nested-field='circles' + fields='circle' + empty-widget='hubl-create' + empty-value='canal' + widget-circle='hubl-menu-fix-url-circle' + order-by='circle.name' + next='circle' + ) + div.divider + if endpoints.users || (endpoints.get && endpoints.get.users) + div.menu-wrapper + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-up + div.menu-label Messages + div.menu-icon.icon-envelope-letter + sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.nosub.message-tab( + data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}` + fields='name, chatProfile.jabberID, badge' + search-fields="name" + search-label-name="Rechercher..." + search-widget-name="hubl-search-users" + widget-name='sib-display-div' + widget-badge='hubl-counter' + widget-chatProfile.jabberID='hubl-menu-jabberid' + action-badge='badge' + order-by='username' + next='messages' + paginate-by='10' + ) + div.divider - sib-route(name='admin', hidden) - sib-route.menu(name='profile', hidden) - sib-route(name='about', hidden) + sib-route(name='admin', hidden) + sib-route.menu(name='profile', hidden) + sib-route(name='about', hidden) diff --git a/src/page-admin.pug b/src/page-admin.pug index c3c8c9e..30b7cd0 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -12,7 +12,7 @@ nav.jsRightMenu(role='navigation') sib-router(default-route='admin-circles') ul li.jsOffsiteToggle - a Fold menu + a Replier le menu if (endpoints.users || (endpoints.get && endpoints.get.users)) sib-route.active-color(name='admin-users') li diff --git a/src/page-circle.pug b/src/page-circle.pug index 29cd3b9..6439aac 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,7 +1,7 @@ .views-container.sidebar-is-closed - .content-box.full-width.with-form + .content-box.flex.full-width.with-form div.content-box__header - sib-ac-checker(permission='acl:Read', bind-resources) + sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources) sib-display( bind-resources fields='name, description' @@ -10,11 +10,11 @@ class-description='h1-aside description' ) button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU - div + div.content-box__height sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) include views/circle/page-circle-chat.pug - #circle-information(hidden) + #circle-information.content-box__height(hidden) include views/circle/page-circle-profile.pug nav.jsRightMenu(role='navigation') diff --git a/src/page-dashboard.pug b/src/page-dashboard.pug index 4bce06f..ea3db7d 100644 --- a/src/page-dashboard.pug +++ b/src/page-dashboard.pug @@ -1,5 +1,5 @@ .views-container - h2 Tableau de bord + h1 Tableau de bord sib-dashboard( data-src=`${endpoints.dashboards || endpoints.get.dashboards}` ) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index b7cb186..f173429 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,25 +1,7 @@ .content-box.full-width - #job-offer-board - .job-offers__container + #job-offers.job-offers__container sib-job-board( data-src=`${endpoints.joboffers || endpoints.get.joboffers}`, + post-data-src=`${endpoints.joboffers || endpoints.post.joboffers}`, 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') \ No newline at end of file diff --git a/src/page-messages.pug b/src/page-messages.pug index 545e643..154a42d 100644 --- a/src/page-messages.pug +++ b/src/page-messages.pug @@ -1,16 +1,17 @@ -.content-box.full-width +.content-box.flex.full-width - sib-display.content-box__header( - bind-resources - fields='name, parenthesis, username, endParenthesis' - value-parenthesis=" (" - value-endParenthesis=")" + div.content-box__header + sib-display( + bind-resources + fields='name, parenthesis, username, endParenthesis' + value-parenthesis=" (" + value-endParenthesis=")" - class-parenthesis='name' - class-endParenthesis='name' - class-name='name' - class-username='name' - ) + class-parenthesis='h1-like' + class-endParenthesis='h1-like' + class-name='h1-like' + class-username='h1-like' + ) .chat-view sib-chat( diff --git a/src/page-project.pug b/src/page-project.pug index 49eb16a..dacf1b1 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -1,7 +1,7 @@ .views-container.sidebar-is-closed - .content-box.full-width.with-form + .content-box.flex.full-width.with-form div.content-box__header - sib-ac-checker(permission='acl:Read', bind-resources) + sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources) sib-display( bind-resources fields='const-title1, number, customer.name, name' @@ -9,25 +9,18 @@ class-const-title1='h1-like' class-number='h1-like word-spacing-right' class-customer.name='h1-like' - class-name='h1-aside name' + class-name='h1-aside' value-const-title1='N°' ) - .mobile-sidebar-button.jsMobileSidebarOpenButton - button.icon-arrow-left-circle - span MENU - div + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU + div.content-box__height sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug - #project-information(hidden) + #project-information.content-box__height(hidden) include views/project/page-project-profile.pug -dialog(id='project-contributions-help').modal - sib-link(next='project-profile') - button.icon-close - img(src='/images/contributions-help.png') - nav.jsRightMenu(role='navigation') sib-router(default-route='project-chat') ul diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index be27ec1..0dad7ef 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -8,25 +8,25 @@ @if $type==string { @if $min==xs { - @media (max-width: 768px) { + @media (max-width: 576px) { @content; } } @else if $min==sm { - @media (max-width: 1024px) { + @media (max-width: 768px) { @content; } } @else if $min==md { - @media (max-width: 1200px) { + @media (max-width: 991px) { @content; } } @else if $min==lg { - @media (min-width: 1201px) { + @media (min-width: 992px) { @content; } } diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index e974acd..44601f8 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -34,7 +34,7 @@ --color-highlight-primary: var(--color-primary); --color-user-panel: var(--color-black); --color-bell: var(--color-secondary); - --color-avatar-background: var(--color-grey-11); + --color-avatar-background: var(--color-grey-10); --color-title: var(--color-secondary); --color-h1: var(--color-secondary); --color-h2: var(--color-secondary); @@ -74,12 +74,12 @@ --color-scrollbar-right-track: var(--color-grey-9); --color-scrollbar-left-background: var(--color-secondary); --color-scrollbar-left-track: var(--color-grey-11); + --color-scrollbar-table-background: var(--color-grey-10); + --color-scrollbar-table-track: var(--color-secondary); /* tags */ --color-tag-admin-text: var(--color-complementary); --color-tag-admin-border: var(--color-complementary); - --color-tag-group-text: var(--color-primary); - --color-tag-group-border: var(--color-primary); /* Form elements */ --color-button-white: var(--color-white); @@ -98,7 +98,6 @@ --color-select-add-button: var(--color-button-secondary); --color-select-add-button-background: var(--color-button-white); - --color-label-dark: var(--color-secondary); --color-label-light: var(--color-grey-6); /* skill */ @@ -118,10 +117,29 @@ --color-backlink: var(--color-secondary); --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 */ $color-212-4-50: hsl(212.7,4.3%,50%); $color-0-0-22: hsl(0,0%,22.7%); $color-203-87-19: hsl(203, 87.8%, 19.2%); -$color-357-67-45: hsl(357,67.5%,45.9%); \ No newline at end of file +$color-357-67-45: hsl(357,67.5%,45.9%); + + diff --git a/src/styles/base/_compat.scss b/src/styles/base/_compat.scss deleted file mode 100644 index 4a5b345..0000000 --- a/src/styles/base/_compat.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/styles/base/about.scss b/src/styles/base/about.scss index c7b6230..ead128a 100644 --- a/src/styles/base/about.scss +++ b/src/styles/base/about.scss @@ -44,7 +44,7 @@ cursor: pointer; font-weight: bold; text-transform: uppercase; - width: 25%; + width: 50%; font-size: 1.1rem; align-self: center; padding: 0.5rem 1.5rem; diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 8941017..7d555fc 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,61 +1,91 @@ -#admin-circle-create, -#admin-project-create, -#admin-users-create, -#admin-users-edit { +.form form { + display: block; + height: fit-content; + margin-bottom: 75px; + transition: all .3s ease; - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered; - margin-left: auto; - margin-top: 3.2rem; + @include breakpoint(lg) { + display: flex; + flex-direction: column; + transition: all .3s ease; } } -.content-box { +.button-register>form>input[type=submit] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-secondary, + .bordered; + margin-left: auto; + margin-top: 3.2rem; +} +.form-label { + /*flex: 1 1 auto;*/ + + label { + display: flex; + flex-direction: column; /* To align label and input vertically */ + font-weight: 600; + margin-bottom: 0.8rem; + margin-top: 1.8rem; + text-transform: uppercase; + } + + &.is-light label { + color: var(--color-label-light); + } +} + +[name^='line-'] { + + @include breakpoint(lg) { + display: flex; + justify-content: space-between; + } +} + +.is-full-width { + box-sizing: border-box; + flex: 1 1 100%; +} + +.is-half-width { + box-sizing: border-box; + flex: 0 1 calc(50% - 2.5rem); +} + +.input-text-like input:not([type='file']):not([type='search']):not([type='submit']), +.input-text-like textarea { + -webkit-tap-highlight-color: var(--color-grey-7); + background-color: var(--color-input-background); + box-sizing: border-box; + border: 2px solid var(--color-input-background); + color: var(--color-input-text); + /*flex: 1 1 0; Problem on Firefox for input type date*/ + line-height: 1; + margin-top: 0.8rem; + min-width: 0; + padding: 1rem; + + &:focus, + &:active { + border-bottom: 2px solid var(--color-input-active); + } +} + +textarea { + height: 100px; +} + +.content-box { + &.with-form { - h1 { - color: var(--color-title); - font-weight: bold; - font-size: 2rem; - - &.centered { - text-align: center; - } - } - - .fieldset { - border-bottom: 1px solid var(--color-fieldset-border); - color: var(--color-title); - display: flex; - flex: 1 0 100%; - font-size: 1.8rem; - font-weight: 600; - margin: 2.6rem 0 1.8rem; - padding-bottom: 0.8rem; - } - - [name^='block-'] { - margin-bottom: 2.75rem; - } - - [name$='border-top'] { - border-top: 1px solid var(--color-grey-10); - margin-top: 3rem; - } - - form { - display: flex; - flex-direction: column; - } - - sib-set-default:not([name='user-thumb']) { - clear: both; + /*sib-set-default:not([name='user-thumb']) { + clear: both; display: flex!important; flex-wrap: wrap; max-width: 100%; @@ -64,380 +94,262 @@ float: left; width: 50%; } - } + }*/ + } +} - label { - display: flex; - flex-direction: column; +/*sib-form[set-user-id-select] { - input:not([type='file']), - textarea { - -webkit-tap-highlight-color: var(--color-grey-7); - background-color: var(--color-input-background); - box-sizing: border-box; - border: 2px solid var(--color-input-background); - color: var(--color-input-text); - /*flex: 1 1 0; Problem on Firefox for input type date*/ - line-height: 1; - min-width: 0; - padding: 1rem; + input[type="submit"] { + margin-left: 0; + margin-top: 0; + } + + select { + display: none; + } +}*/ + + +/* WIDGETS SIB (let in .content-box to override default styles) */ + +sib-form-auto-completion, +hubl-status { + + .ss-main { + font-weight: normal; + text-transform: none; + + + .ss-single-selected { + background-color: var(--color-input-background); + border: none; + border-radius: 0px; + color: var(--color-input-text); + font-weight: normal; + margin-top: 0.8rem; + min-height: 4.6rem; + padding-left: 1.2rem; + + .ss-disabled { + color: var(--color-grey-5); } - input:not([type="search"]):not([type="file"]), - textarea { - border: 2px solid var(--color-input-background); + .ss-arrow { + font-size: 1.8rem; + margin: 0 18px 0 0; - &:focus, - &:active { - border-bottom: 2px solid var(--color-input-active); - } - } - - textarea { - height: 100px; - } - } - - sib-form[set-user-id-select] { - - input[type="submit"] { - margin-left: 0; - margin-top: 0; - } - - select { - display: none; - } - } - - /* CLASSES Peut-être à sortir de .content-box */ - - .block.select-add-member>form { /* circle-profile */ - display: flex; - flex-direction: row; - margin-bottom: 2.6rem; - - label { - margin-top: 0; - - >.ss-main { - font-weight: normal; - min-width: 35vw; - text-transform: none; - - >.ss-single-selected { - align-items: center; - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - color: var(--color-input-text); - display: flex; - justify-content: flex-end; - min-height: 4.2rem; - padding-left: 1.2rem; - - .ss-arrow { - font-size: 1.8rem; - margin: 0 18px 0 0; - - span { - border: solid var(--color-input-icon); - border-width: 0 2px 2px 0; - } - } - } - - .ss-list { - color: var(--color-select-list); - } - } - } - - >input[type='submit'] { - @extend - .button, - .btn-margin-left, - .text-bold, - .text-uppercase, - .button-complementary, - .bordered; - margin-top: auto; - margin-bottom: auto; - } - } - - .form-container>form { - margin-top: 2.7rem; - } - - .form-edit>form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } - } - - .form-label { - /*flex: 1 1 auto;*/ - font-weight: 600; - - &.is-dark label { - color: var(--color-label-dark); - margin-top: 3rem; - - &>*:nth-child(2) { - margin-top: 0.8rem; - } - } - - &.is-light label { - color: var(--color-label-light); - margin-top: 1.8rem; - text-transform: uppercase; - - &>*:nth-child(2) { - margin-top: 0.8rem; - } - } - } - - .is-full-width { - flex: 1 1 100%; - } - - .is-half-width { - box-sizing: border-box; - flex: 0 0 50%; - - &:nth-child(even) { - padding-left: 1.7rem; - } - - &:nth-child(odd) { - padding-right: 1.7rem; - } - } - - /* WIDGETS SIB */ - - sib-form-auto-completion.member-select, hubl-status { - align-self: flex-end; - - >label:first-of-type>div { - font-weight: 600; - } - - .ss-single-selected { - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - color: var(--color-input-text); - display: flex; - font-weight: normal; - margin-top: 0.8rem; - min-height: 4.4rem; - padding-left: 1rem; - text-transform: none; - - .ss-disabled { - color: var(--color-grey-5); - } - - .ss-arrow span { + span { border: solid var(--color-input-icon); border-width: 0 2px 2px 0; } } - - .ss-content .ss-list .ss-option { - color: var(--color-input-text); - font-weight: normal; - text-transform: none; - } } + } - hubl-status { - align-self: auto; - } + .ss-list { + color: var(--color-select-list); + font-weight: normal; + text-transform: none; + } +} - sib-form-date { - input[type="date"] { - background-image: url("/images/calendar.svg"); - background-position: right 12px top 50%; - background-repeat: no-repeat; - background-size: 1.4rem; - color: var(--color-input-icon); - cursor: default; - font-size: 1.4rem; - margin-top: 1.6rem; - max-width: 50vw; - padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */ - padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */ - position: relative; +/* Additional styles for the select to add a member in circle-edit */ +.block.select-add>form { + display: block; - &::-webkit-calendar-picker-indicator { - cursor: pointer; - opacity: 0; - position: absolute; - right: 8px; - } + @include breakpoint(lg) { + display: flex; + flex-direction: row; + margin-bottom: 2.6rem; + } - &::-webkit-clear-button { - cursor: pointer; - margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ - margin-right: 5px; - } + label { + margin-top: 0; + } - &::-webkit-inner-spin-button { - display: none; - } - } - } + .ss-main { + min-width: 35vw; + } - sib-form-file { + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .button-complementary, + .bordered; + margin: 10px 0; + width: 100%; - label { - align-items: baseline; - clear: both; - display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 100%; - - div { - width: 100%; - } - - input[type='text'] { - box-sizing: border-box; - flex: 0 0 50%; - } - - input[type='file'] { - box-sizing: border-box; - flex: 0 0 20%; - color: var(--color-input-text); - cursor: pointer; - padding-left: 3rem; - } - } - } - - sib-multiple-form { - margin-top: 1.8rem; - } - - sib-multiple-select { - - &.select-groups .ss-values .ss-disabled::before { - content: "Sélectionne des groupes"; - } - - &.select-skills .ss-values .ss-disabled::before { - content: "Select skills"; - } - - sib-form-auto-completion > label { - display: flex; - flex-direction: column; - - .ss-main { - font-weight: normal; - margin-bottom: 7.8rem; - margin-top: 1.6rem; - max-width: 50vw; - text-transform: none; - - .ss-multi-selected { - align-items: center; - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - display: flex; - justify-content: flex-end; - min-height: 4.2rem; - padding-left: 1.2rem; - - .ss-add { - font-size: 1.8rem; - margin: 0 18px 0 0; - - span.ss-plus { - background: var(--color-input-icon); - - &::after { - background: var(--color-input-icon); - } - } - } - - .ss-values { - background: transparent; - position: absolute; - top: 6rem; - width: 100%; - - .ss-disabled { - color: transparent; - font-size: 1.4rem; - left: calc(1.2rem - 5px); - position: absolute; - top: calc(-6rem + 7px); - - &::before { - color: var(--color-grey-5); - font-weight: normal; - } - } - - .ss-value { - @extend .skill; - display: flex; - - .ss-value-delete { - font-weight: normal; - } - } - } - } - - .ss-list { - color: var(--color-input-text); - } - } - } - } - - /* CUSTOM WIDGETS */ - - hubl-member-form { - width: 100%; - - form { - display: flex; - flex-direction: column; - - [name='member-form__input'] { - margin-bottom: 1rem; - } - - sib-form-auto-completion { - float: left; - } - - input[type='submit'] { - background-color: var(--color-select-add-button-background); - border: 1px solid var(--color-select-add-button); - color: var(--color-select-add-button); - } - } + @include breakpoint(lg) { + margin: auto 0 auto 2.2rem; + width: auto; + } + } +} +/* End */ + +sib-form-date { + input[type="date"] { + background-image: url("/images/calendar.svg"); + background-position: right 12px top 50%; + background-repeat: no-repeat; + background-size: 1.4rem; + color: var(--color-input-icon); + cursor: default; + font-size: 1.4rem; + margin-top: 1.6rem; + max-width: 50vw; + padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */ + padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */ + position: relative; + + &::-webkit-calendar-picker-indicator { + cursor: pointer; + opacity: 0; + position: absolute; + right: 8px; + } + + &::-webkit-clear-button { + cursor: pointer; + margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ + margin-right: 5px; + } + + &::-webkit-inner-spin-button { + display: none; + } + } +} + +sib-form-file { + + label { + align-items: baseline; + clear: both; + display: flex; + flex-direction: row; + flex-wrap: wrap; + max-width: 100%; + + div { + width: 100%; + } + + input[type='text'] { + box-sizing: border-box; + flex: 0 0 50%; + } + + input[type='file'] { + box-sizing: border-box; + flex: 0 0 20%; + color: var(--color-input-text); + cursor: pointer; + padding-left: 3rem; + } + } +} + +/*sib-multiple-select { + + &.select-skills .ss-values .ss-disabled::before { + content: "Select skills"; + } + + sib-form-auto-completion > label { + display: flex; + flex-direction: column; + + .ss-main { + font-weight: normal; + margin-bottom: 7.8rem; + margin-top: 1.6rem; + max-width: 50vw; + text-transform: none; + + .ss-multi-selected { + align-items: center; + background-color: var(--color-input-background); + border: none; + border-radius: 0px; + display: flex; + justify-content: flex-end; + min-height: 4.2rem; + padding-left: 1.2rem; + + .ss-add { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span.ss-plus { + background: var(--color-input-icon); + + &::after { + background: var(--color-input-icon); + } + } + } + + .ss-values { + background: transparent; + position: absolute; + top: 6rem; + width: 100%; + + .ss-disabled { + color: transparent; + font-size: 1.4rem; + left: calc(1.2rem - 5px); + position: absolute; + top: calc(-6rem + 7px); + + &::before { + color: var(--color-grey-5); + font-weight: normal; + } + } + + .ss-value { + @extend .skill; + display: flex; + + .ss-value-delete { + font-weight: normal; + } + } + } + } + + .ss-list { + color: var(--color-input-text); + } + } + } +}*/ + +/* CUSTOM WIDGETS */ + +hubl-member-form { + width: 100%; + + form { + display: flex; + flex-direction: column; + + [name='member-form__input'] { + margin-bottom: 1rem; + } + + sib-form-auto-completion { + float: left; + } + + input[type='submit'] { + background-color: var(--color-select-add-button-background); + border: 1px solid var(--color-select-add-button); + color: var(--color-select-add-button); } } } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index e405d6f..c8634f8 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -1,95 +1,89 @@ #header { - max-height: 83px; - height: 83px; + max-height: 50px; + height: 50px; + display: flex; align-items: center; background-color: var(--color-header-background); color: var(--color-black); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); - display: flex; flex-shrink: 0; - // padding: 1.6rem 0.64rem; - padding: 0 2.5rem; + position: fixed; + z-index: 999; + width: -webkit-fill-available; + width: -moz-available; + + @include breakpoint(lg) { + max-height: 83px; + height: 83px; + position: relative; + } + + &.is-spaced { + padding: 0 0.8rem; + + @include breakpoint(lg) { + padding: 0 2.5rem; + } + } + + >*:not(:first-child) { + margin-left: 2rem; + + @include breakpoint(lg) { + margin-left: 0; + } + } + + .logo { + flex: 1 0 0; + align-items: stretch; + } + + /* To remove the place taken by this element */ + sib-widget[name='hubl-user-avatar'] { + display: contents; + } +} + +/* General styling for both notification and user's panel */ +details { + margin-right: 0; position: relative; - z-index: 1; - #logo { - flex: 1 1 0; - } - - #search-bar { - position: relative; - - #search-input { - border-radius: 10em; - padding: 0.64rem 1.28rem; - border: 1px solid var(--color-grey-10); - height: 3.8rem; - width: 28rem; - -webkit-appearance: textfield; - - & ~ #close-search-icon, - & ~ #search-icon { - color: var(--color-grey-10); - display: block; - font-size: 1.7rem; - margin: auto; - position: absolute; - right: 3.7rem; - top: 50%; - transform: translateY(-50%); - -webkit-text-stroke: 1px var(--color-grey-10); - } - - & ~ #close-search-icon { - opacity: 0; - } - - &:focus { - & ~ #close-search-icon { - opacity: 1; - } - - & ~ #search-icon { - visibility: hidden; - } - } - } - } - - sib-notifications { - color: var(--color-bell); - - @include breakpoint(sm) { - padding: 0; - } - } - - details { + @include breakpoint(lg) { margin-right: 2.5rem; - position: relative; + } - @include breakpoint(sm) { - margin-right: 0; + summary { + + &::-moz-list-bullet { + list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ } - - summary { - - &::-moz-list-bullet { - list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ - } - - &::-webkit-details-marker { - display: none; - } + + &::-webkit-details-marker { + display: none; } } - +} +/* End */ + +sib-notifications { + color: var(--color-bell); + + @include breakpoint(sm) { + padding: 0; + } + .sib-notifications__container { position: relative; .sib-notifications__button { @include icon('bell'); - font-size: 3rem; + font-size: 2.5rem; + + @include breakpoint(lg) { + font-size: 3rem; + } &::before { margin-left: 0; @@ -100,169 +94,191 @@ } .sib-notifications__counter { - left: 2.1rem; + left: 2rem; position: absolute; - top: -3px; + top: 1px; + + @include breakpoint(lg) { + left: 2.1rem; + top: -3px; + } } } .sib-notifications__list { - position: absolute; - right: 0; - top: 5.6rem; - } - } - - #user-controls { - padding: 0; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + overflow-x: hidden; + position: fixed; + left: 0; + top: 4.5rem; + width: 100vw; - summary { - padding: 18px; - cursor: pointer; - display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ - - &:focus { - background-color: var(--color-user-panel-header-background-open); - color: var(--color-user-panel-header-text-open); - outline: none; + @include breakpoint(md) { + border: 0; + border-radius: 0; } - } - - #user-controls__profile { - div { - display: flex; - flex-direction: row-reverse; - - > * { - vertical-align: middle; - } - hubl-user-avatar { - align-items: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; - height: 4.8rem; - justify-content: center; - margin-right: 2rem; - overflow: hidden; - width: 4.8rem; - - @include breakpoint(sm) { - margin-right: 0; - } - } - - img { - background-color: white; - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - - sib-display-value[name='first_name'] { - @include icon('arrow-down'); - align-items: center; - display: flex; - flex-direction: row-reverse; - font-size: 1.8rem; - font-weight: 600; - - &::before { - margin-left: 1.5rem; - } - - @include breakpoint(sm) { - display: none; - } - } - } - } - - #user-controls__panel { - height: 0; - position: absolute; - right: 0; - z-index: 1; - width: 100%; - top: 83px; - - > nav { - background-color: var(--color-user-panel-list-background); - box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); + @include breakpoint(lg) { position: absolute; + left: auto; right: 0; - top: 0; - width: 100%; - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - - sib-link { - color: var(--color-grey-4); - display: block; - border-bottom: 1px solid var(--color-user-panel-list-border); - margin-right: 0; - padding: 1.6rem 1.3rem; - &:hover { - color: var(--color-user-panel-list-text-hover); - } - } - } - } - - button { - color: var(--color-grey-4); - padding: 1.6rem 1.3rem; - text-align: left; - width: 100%; - } + top: 5.6rem; + width: 300px; } } - - &[open] { - background-color: var(--color-user-panel-header-background); - color: var(--color-user-panel-header-text); - - #user-controls__profile { - - div { - - sib-display-value[name='first_name'] { - @include icon('close'); - - &::before { - margin-left: 1.5rem; - } - } - } - } - } - } - - .mobile-menu-icon { - display: none; - - @include breakpoint(sm) { - display: block; - padding-left: 0; - font-size: 26px; - } + } +} + +#user-controls { + padding: 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + summary { + cursor: pointer; + display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ + + @include breakpoint(lg) { + padding: 18px; + } + + &:focus { + background-color: transparent; + color: var(--color-user-panel-header-text-open); + outline: none; + + @include breakpoint(lg) { + background-color: var(--color-user-panel-header-background-open); + } + } + } + + #user-controls__profile { + div { + display: flex; + flex-direction: row-reverse; + + > * { + vertical-align: middle; + } + + hubl-user-avatar { + height: 3.3rem; + margin-right: 0; + width: 3.3rem; + + @include breakpoint(lg) { + height: 4.8rem; + margin-right: 2rem; + width: 4.8rem; + } + } + + sib-display-value[name='first_name'] { + @include icon('arrow-down'); + align-items: center; + display: none; + flex-direction: row-reverse; + font-size: 1.8rem; + font-weight: 600; + + &::before { + margin-left: 1.5rem; + } + + @include breakpoint(lg) { + display: flex; + } + } + } + } + + #user-controls__panel { + height: 0; + position: absolute; + right: 0; + z-index: 1; + /* Quick fix for mobile version */ + width: 215px; + top: 42px; + + @include breakpoint (lg) { + width: 100%; + top: 83px; + } + + > nav { + background-color: var(--color-user-panel-list-background); + box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); + position: absolute; + right: 0; + top: 0; + width: 100%; + + ul { + list-style: none; + margin: 0; + padding: 0; + + li { + + sib-link { + color: var(--color-grey-4); + display: block; + border-bottom: 1px solid var(--color-user-panel-list-border); + margin-right: 0; + padding: 1.6rem 1.3rem; + + &:hover { + color: var(--color-user-panel-list-text-hover); + } + } + } + } + + button { + color: var(--color-grey-4); + padding: 1.6rem 1.3rem; + text-align: left; + width: 100%; + + &:hover { + color: var(--color-user-panel-list-text-hover); + } + } + } + } + + &[open] { + background-color: var(--color-user-panel-header-background); + color: var(--color-user-panel-header-text); + + #user-controls__profile { + + div { + + sib-display-value[name='first_name'] { + @include icon('close'); + + &::before { + margin-left: 1.5rem; + } + } + } + } + } +} + +.mobile-menu-icon { + + display: block; + padding-left: 0; + font-size: 24px; + + @include breakpoint(lg) { + display: none; } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 29f3946..97ca857 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -9,23 +9,12 @@ body { background-color: var(--color-main-background); + box-sizing: border-box; color: var(--color-main-text); font-size: 1.6rem; - min-height: 100vh; - overflow-wrap: break-word; - overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */ - } - - main { - display: flex; - z-index: 0; - overflow: hidden; - height: calc(100vh - 83px); /* 83px = height of the header */ - position: relative; - width: 100%; - - backface-visibility: hidden; - /*will-change: overflow;*/ + /* Fix for viewport height bug in webkit for mobile */ + height: -webkit-fill-available; + min-height: -webkit-fill-available; } .notLoggedIn { @@ -33,8 +22,88 @@ } } +/* Fix for sib-dashboard fixture */ +sib-dashboard section { + padding: 1rem !important; + + @include breakpoint(lg) { + padding: 4.2rem !important; + } + + .icon { + display: inline-block; + } +} + +.wrapper { + display: grid; + grid-template-areas: + "header" + "content"; + + @include breakpoint(lg) { + grid-template-columns: 265px auto; + grid-template-areas: + "header header" + "leftmenu content"; + } +} + +.header { + grid-area: header; +} + +.left-menu { + grid-area: leftmenu; + + @include breakpoint(lg) { + height: calc(100vh - 83px); /* 83px = nav height */ + position: sticky; + top: 0; + overflow-x: hidden; + overflow-y: auto; + } + + &.jsLeftMenu { + display: none; + + @include breakpoint(lg) { + display: block; + } + } + + &.jsLeftMenu[open] { + display: block; + bottom: 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); + width: 80vw; + position: fixed; + right: 0; + top: 0; + z-index: 1000; + + @include breakpoint(lg) { + display: none; + } + } +} + +.content { + grid-area: content; + + @include breakpoint(lg) { + position: sticky; + top: 0; + overflow-y: auto; + height: calc(100vh - 83px); + overflow-x: hidden; + } +} + + + /* Add scrollbar to the left and right menu, and to the content */ -nav, .views-container { +nav, .views-container, .table-wrapper { overflow: auto; height: auto; -webkit-overflow-scrolling: touch; @@ -81,6 +150,26 @@ nav { } } +/* Custom scrollbar of the table */ +.table-wrapper { + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); + + &::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-table-background); + border-radius: 10px; + } + + &::-webkit-scrollbar { + height: 5px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-table-track); + border-radius: 10px; + } +} + /* Quick fix. Will be removed later */ #admin-circles, #admin-projects, @@ -143,6 +232,7 @@ h2, .h2-like { h3 { color: var(--color-title); font-size: 1.7rem; + margin: 0; } h4 { @@ -153,17 +243,44 @@ h5 { font-size: 2rem; } -%padding-main { - padding: 1.3rem; +.avatar { + align-items: center; + background-color: var(--color-avatar-background); + border-radius: 50%; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + object-position: center; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } } -%padding-block { - padding: 3.2rem; +.customer-logo { + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; } .content-box { @include window-style-modal(); - display: flex; flex-direction: column; flex-grow: 1; margin: 2rem 1rem 5rem 2rem; @@ -175,19 +292,34 @@ h5 { margin: 0 auto; min-height: 100%; } - - &.with-padding { - @extend %padding-main; - } } /* Header inside circle, project view */ .content-box__header { border-bottom: 1px solid var(--color-content-header); - padding: 3rem; + padding: 1.8rem 0 1.4rem; + margin: 0 1.6rem; - @include breakpoint(sm) { - background: var(--color-grey-10); + @include breakpoint(lg) { + padding: 3rem; + margin: 0; + } + + .mobile-sidebar-button { + float: right; + color: var(--color-secondary); + font-size: 1.8rem; + font-weight: bold!important; + + &::before { + font-size: 2.2rem; + font-weight: normal; + margin-right: 1.2rem; + } + + @include breakpoint(lg) { + display: none; + } } sib-display { @@ -196,57 +328,62 @@ h5 { } } - .mobile-sidebar-button { - @include breakpoint(sm) { - float: right; - color: var(--color-secondary); - font-size: 1.8rem; - font-weight: bold!important; + /* For sib-display on project, circle, or private message view */ + sib-display { + width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ - &::before { - font-size: 2.2rem; - font-weight: normal; - margin-right: 1.2rem; + div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); + + .h1-aside { + font-size: 1.8rem; + + &:not(:empty)::before { + color: var(--color-grey-4); + content: ' - '; + font-size: 2rem; + font-weight: bold; + } } - } - @include breakpoint($min: 1025px, $max: 0) { - display: none; + .description { + color: var(--color-grey-4); + + } + + .name { + color: var(--color-grey-4); + font-weight: normal; + } } } +} - div { +.content-box__height { + min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ - .h1-aside { - font-size: 1.8rem; - - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; - } - } - - .description { - color: var(--color-grey-4); - - } - - .name { - color: var(--color-grey-4); - font-weight: normal; - } + @include breakpoint(lg) { + min-height: calc(100vh - 83px - 84px); } } .content-box__info { - @extend %padding-block; - display: flex; flex-direction: column; + padding: 1rem; + + @include breakpoint(lg) { + padding: 3.2rem; + } + + * { + box-sizing: border-box; + } } -.modal { +/*.modal { color: var(--color-white); margin: 75px; padding: 40px; @@ -267,6 +404,40 @@ h5 { color: var(--color-secondary); } } +}*/ + +.admin-header { + /* Quick fix for alignment on mobile before admin content rework */ + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; + /*end */ + + @include breakpoint(lg) { + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 5rem; + } + + h3 { + /* Quick fix for alignment on mobile before admin content rework */ + margin-bottom: 20px; + /* end */ + + @include breakpoint(lg) { + margin-top: 0; + } + } + + sib-ac-checker, + sib-link { + width: 100%; + + @include breakpoint(lg) { + width: auto; + } + } } .backlink { @@ -288,32 +459,37 @@ h5 { } } -.name { - color: var(--color-grey-1); - font-size: 2rem; - font-weight: bold; +.centered { + text-align: center; } -.username { +.flex { + display: flex; +} - &::before { - content: '@'; +.desktop-button__end { + display: block; + + @include breakpoint(lg) { + display: flex; + justify-content: flex-end; } } .space-between { - display: flex; justify-content: space-between; - padding-bottom: 1.4rem; + + &.with-padding { + padding-bottom: 1.4rem; + } } -.position-end { - text-align: end; -} +.mobile-vertical-align { + flex-direction: column; -.section { - border-bottom: 1px solid var(--color-grey-10); - padding: 4.5rem; + @include breakpoint(lg) { + flex-direction: row; + } } .word-spacing-left { @@ -324,8 +500,14 @@ h5 { margin-right: 0.60rem; } -// Compatibility layer for non-updated components -@import 'compat'; +.mobile-margin__bottom { + margin-bottom: 1rem; + + @include breakpoint(lg) { + margin-bottom: 0; + } +} + // Other base components @import 'form'; @import 'table'; @@ -356,8 +538,33 @@ a, font-size: 1.4rem; } - &.btn-margin-left { - margin-left: 2.2rem; + &.mobile-full-width { + margin-bottom: 1rem; + padding-left: 5rem; + width: -webkit-fill-available; + width: -moz-available; + + @include breakpoint(lg) { + margin-bottom: 0; + padding-left: 2.5rem; + width: auto; + } + + &::before { + margin-left: -2.6rem; + + @include breakpoint(lg) { + margin-left: 0; + } + } + } + + &.desktop-btn-margin__left { + margin: 0; + + @include breakpoint(lg) { + margin-left: 2.2rem; + } } &.small { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index a4b5459..4d68192 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,10 +1,6 @@ #main__menu { background-color: var(--color-menu-background); color: var(--color-menu-text); - display: block; - max-width: 250px; - min-height: calc(100vh - 83px); /* 83px = nav height */ - flex: 1; /*transition: flex-basis 0.5s ease-in-out;*/ &.open { @@ -14,35 +10,39 @@ .unread { font-weight: bolder; } - + sib-router { - .menu-wrapper { &.is-closed { .sub-menu { display: none; } + .menu-chevron { transform: rotate(180deg); } } } - + + sib-link { + width: 100%; + } + .menu { cursor: pointer; display: flex; flex-direction: row-reverse; font-weight: bold; padding: 1.2rem; - + &[active] { background-color: var(--color-menu-highlight-primary); - + .menu-icon:before { background-color: var(--color-menu-icon-background-active); } - - .menu-notification > sib-display > div:first-child { + + .menu-notification>sib-display>div:first-child { background-color: var(--color-menu-badge-background); } } @@ -55,7 +55,7 @@ flex-shrink: 0; font-size: 1.7rem; width: 3.2em; - + &:before { border-radius: 100%; height: 1.9em; @@ -63,7 +63,7 @@ width: 1.9em; } } - + .menu-label { display: flex; flex-direction: column; @@ -84,55 +84,93 @@ justify-content: center; width: 2em; } - - > sib-display { + + >sib-display { display: block; } } .sub-menu { - /* Specific styles for the "Projects" tab */ + /* Ellipsis for project tab */ .project-tab>div>sib-display>div:nth-child(1) { sib-set-default[name='project'] { + flex: 3; + + .project-customer, + .project-name { + box-sizing: border-box; + display: block; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } .project-customer, .project-name>div { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .project-customer { - font-weight: bold; - width: 150px; + @include breakpoint(lg) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } - - .project-name { - display: block; - padding-left: 14px; - width: calc(150px - 10px); - /* 10px = padding of the sib-set-default = better alignment */ - } - } - - hubl-counter { - margin-top: 16px; } } - /* End of specific styles of "Projects" tab */ + + /* Ellipsis for circle tab */ + + .circle-tab>div>sib-display>div { + + sib-display-div[name='name'] { + flex: 3; + + >div[name='name'] { + box-sizing: border-box; + padding-left: 0.2em; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } + } + } + } + + /* Ellipsis for message tab */ + + .message-tab>div>sib-display>div>sib-display-div>div { + box-sizing: border-box; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input { - margin: auto; + margin-left: 30px; + margin-bottom: 10px; + width: calc(80vw - 71px); display: block; background-color: var(--color-secondary); color: var(--color-grey-6); border: 1px solid var(--color-grey-4); border-radius: 3px; padding: 4px; + + @include breakpoint(lg) { + margin: auto; + width: auto; + } } sib-display.nosub>nav { @@ -141,15 +179,19 @@ display: grid; grid-template-columns: auto 50% auto; grid-template-areas: "left middle right"; + >* { color: var(--color-grey-6); } + >[data-id="prev"] { grid-area: left; } + >[data-id="next"] { grid-area: right; } + >span { grid-area: middle; } @@ -158,6 +200,7 @@ hubl-menu-publicprivate { display: inline-block; text-align: center; + div { font-family: simple-line-icons; width: 20px; @@ -176,16 +219,16 @@ color: var(--color-white); margin: 1rem 1rem 2.2rem 3.2rem; } - + &>sib-display { - &:last-child>div { margin-bottom: 2.2rem; } - + >div { color: var(--color-grey-6); cursor: pointer; + >hubl-menu-fix-url-circle>sib-display>div, >hubl-menu-fix-url-project>sib-display>div { padding: 1rem 1rem 1rem 3rem; @@ -207,37 +250,39 @@ } &.menu-notification { - > sib-display > div > sib-display > div > hubl-menu-fix-url-circle, - > sib-display > div > sib-display > div > hubl-menu-fix-url-project { + + >sib-display>div>sib-display>div>hubl-menu-fix-url-circle, + >sib-display>div>sib-display>div>hubl-menu-fix-url-project { flex: 1; } - > sib-display > div > sib-display > div, - > sib-display > div > sib-display > div > hubl-menu-fix-url-circle > sib-display > div, - > sib-display > div > sib-display > div > hubl-menu-fix-url-project > sib-display > div { - display: flex; - sib-display-div { - flex: 3; - } - hubl-counter { - height: 20px; - width: 20px; - margin-right: 1em; - div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--sib-notifications-theme, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-secondary); - } - } + + >sib-display>div>sib-display>div, + >sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div, + >sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div { + display: flex; + justify-content: space-between; + } + + hubl-counter { + height: 20px; + width: 20px; + margin-right: 1em; + + div.counter:not([data-nb-unread="0"]) { + text-align: center; + display: block; + background-color: var(--sib-notifications-theme, gray); + border-radius: 50%; + font-size: 12px; + line-height: 20px; + width: 20px; + height: 20px; + padding-bottom: 0; + color: var(--color-secondary); } } } + } .divider { height: 1px; @@ -245,27 +290,6 @@ opacity: 0.2; } } - - &.jsLeftMenu { - - display: none; - - @include breakpoint(lg) { - display: block; - } - } - - &.jsLeftMenu[open] { - - display: block; - bottom: 0; - box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - min-width: 80%; - position: fixed; - right: 0; - top: 0; - z-index: 1; - } } // Temporary fix for badges @@ -283,4 +307,4 @@ sib-fix-badge { text-align: center; font-weight: bold; padding-bottom: 0; -} \ No newline at end of file +} diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index e8a8513..e917128 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -1,155 +1,229 @@ -#circle-information, -#circle-edit, -#admin-circle-list, -#admin-circle-create, -#project-edit, -#admin-project-list, -#admin-project-create, -#admin-users-list { +/* Display and positioning of the table and its elements */ - [widget="hubl-team-template-edit"]>div { - flex: 1; - } +.table-wrapper { + overflow: auto; + position: relative; + width: 100%; .table { + border-collapse: collapse; + display: table; + margin-bottom: 20px; + overflow: auto; + table-layout: fixed; + width: 100%; + max-width: 100%; + } - .table-header { - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; + .table-header { + display: table-header-group; + text-align: center; + vertical-align: middle; - &.grey-color { - background: var(--color-table-header-background); - color: var(--color-table-header-text); - } - - >* { - border-right: 1px solid var(--color-table-border); - padding: 2.1rem 0; - text-align: center; - } - - >*:last-of-type { - border-right: 1px solid --color-table-header-background; - } + &>div { + display: table-cell; + white-space: nowrap; } + } - .table-body, .table-header { + .table-body { + display: table-row-group; - >div:first-of-type>sib-display>div, - hubl-team-template-edit[name='members'] { - display: flex; - border-left: 1px solid var(--color-table-border); - } + &>div { + display: contents; - .border { - border-bottom: 1px solid var(--color-table-border); - border-right: 1px solid var(--color-table-border); - } + &>sib-display { + display: table-row; - .cell { - text-align: center; - word-wrap: break-word; - white-space: nowrap; - } + &>div { + display: contents; - .w25 { - width: 25%; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - .w66 { - width: 66.6666%; - } - - .w75 { - width: 75%; - } - - .hashtag::before { - content: '#'; - } - } - - .cell-with-buttons { - align-items: center; - display: flex; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered, - .btn-margin-left; - } - } - } - - .cell-with-name { - color: var(--color-secondary); - font-weight: 600; - padding-top: 2.5rem; - } - - sib-multiple { - display: flex; - align-items: center; - justify-content: center; - } - - .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, - [name='user-thumb'] { - @extend %user-thumb__grid; - padding: 0 2.2rem; - - >.user-thumb__picture { - @extend %user-thumb__picture; - } - - >[name='sup'] { - @extend %user-thumb__grid-sup; - - .user-thumb__name { - @extend %user-thumb__name; - } - - .user-thumb__groups { - @extend %user-thumb__groups; + &>* { + border-bottom: 1px solid var(--color-table-border); + display: table-cell; + vertical-align: middle; + } } } - >[name='sub'] { - @extend %user-thumb__grid-inf; + &>sib-multiple { + display: contents; - >.user-thumb__username:not(:empty) { - @extend %user-thumb__username; - } + &>div { + display: contents; - >.user-thumb__city:not(:empty) { - @extend %user-thumb__city; + &>hubl-team-template-edit { + display: table-row; + + &>* { + border-bottom: 1px solid var(--color-table-border); + display: table-cell; + text-align: center; + vertical-align: middle; + } + } } } } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } + } +} + +/* Styles of the table and its elements */ + +.table { + border-bottom: 1px solid var(--color-table-border); + border-left: 1px solid var(--color-table-border); + border-right: 1px solid var(--color-table-border); +} + +.table-header { + font-size: 1.6rem; + font-weight: 600; + + &.grey-color { + background: var(--color-table-header-background); + color: var(--color-table-header-text); + } + + >*:not(:last-child) { + border-right: 1px solid var(--color-white); + padding: 2.1rem 0; + text-align: center; + } +} + +.table-body, +.table-header { + + .border { + border-right: 1px solid var(--color-table-border); + } +} + +.table-body, +.table-header { + + /* Fix. Could disappear when we can add .class on set fields */ + [name^='cell-1'] { + @extend .w280; + @extend .border; + } + + .w280 { + width: 280px; + } + + .w70 { + width: 70px; + } + + .w262 { + width: 262px; + } + + .W152 { + width: 152px; + } + + .w355 { + width: 355px; + } + + .hashtag::before { + content: '#'; + } +} + +/* Styles of specific cells */ + +.cell-with-buttons { + text-align: center; + + [name='button'] { + + input[type='submit'] { + @extend + .button, + .text-bold, + .text-uppercase, + .reversed, + .button-secondary, + .bordered, + .desktop-btn-margin__left; + } + } +} + +.cell-with-name { + color: var(--color-secondary); + font-weight: 600; + padding-left: 2rem; + text-align: left; +} + +/* Styles of elements inside cells */ + +.user-thumb>div, +[name='user-thumb'] { + vertical-align: middle; + text-align: left; + @extend %user-thumb__grid; + padding: 0 2.2rem; + + >.user-thumb__picture { + @extend .user-thumb__picture; + } + + >[name='sup'] { + @extend %user-thumb__grid-sup; + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + } +} + +.table sib-ac-checker { + text-align: center; +} + +.circle-join { + position: relative; + width: 181px; + margin: 0 auto; + min-width: 181px; + + input { + height: 29px; + left: -1px; + position: absolute; + top: -1px; + width: 102%; + padding-left: 14px !important; + } + + &.button.with-icon::before { + margin-left: 6px; + } +} + +.circle-leave { + position: relative; + width: 40%; + min-width: 40%; + + &>button { + height: 29px; + padding-left: 13px; + position: absolute; + left: 1px; + top: -1px; + width: 106%; + } + + &.button.with-icon::before { + font-size: 1.6rem; + margin-right: 2rem !important; + margin-left: -50px; } } diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss index 8f519c4..2541099 100644 --- a/src/styles/base/user-thumb.scss +++ b/src/styles/base/user-thumb.scss @@ -1,8 +1,9 @@ +/* The grids */ %user-thumb__grid { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + grid-template-rows: repeat(2, auto); } %user-thumb__grid-sup { @@ -21,58 +22,26 @@ margin-top: 0.50rem; } -%user-thumb__picture { - align-items: center; +/* Styles for elements of user-thumb*/ +.user-thumb__picture { align-self: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; grid-column: 1 / span 1; grid-row: 1 / span 2; height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; width: 7vh; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } } -%user-thumb__name { +.user-thumb__name { color: var(--color-user-thumb-name); font-weight: 600; margin-right: 1rem; } -%user-thumb__groups { - display: flex; - margin-bottom: 1px; - margin-left: 0.6rem; - - [name='groups'], - [name='user.groups'] { - @extend %tag-role; - } -} - -%user-thumb__admin { +.user-thumb__admin:not(:empty) { @extend %tag-admin; } -%user-thumb__username { +.user-thumb__username { align-items: center; display: flex; @@ -81,7 +50,7 @@ } } -%user-thumb__city { +.user-thumb__city:not(:empty) { @include mdi('atom'); align-items: center; display: flex; @@ -93,7 +62,7 @@ } } -%user-thumb__lead { +.user-thumb__lead:not(:empty) { @include icon('eyeglass'); align-items: center; display: flex; @@ -106,3 +75,23 @@ margin-right: 0.50rem; } } + +/* Apply the grids to all user-thumbs */ +.user-thumb>div, +[name='user-thumb'] { + @extend %user-thumb__grid; + + >[name='sup'] { + @extend %user-thumb__grid-sup; + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + } +} + +/* Add extra spaces to user-thumbs that are inside a table */ +.user-thumb.is-spaced>div, +[name='user-thumb'] { + padding: 0.8rem 2.2rem; +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 30de5d0..d13f842 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,7 +1,6 @@ @import 'chat'; @import 'comment'; @import 'filters'; -@import 'howto'; @import 'sidebar'; @import 'skills'; @import 'tags'; \ No newline at end of file diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss index 1004736..e476d53 100644 --- a/src/styles/components/chat.scss +++ b/src/styles/components/chat.scss @@ -1,16 +1,19 @@ .chat-view { padding: 0; - height: calc(100vh - 84px - 83px); + height: calc(100vh - 106px); position: relative; overflow: hidden; + @include breakpoint(lg) { + height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */ + } + > sib-chat { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - max-height: calc(100vh - 84px - 83px); z-index: 0; } } diff --git a/src/styles/components/howto.scss b/src/styles/components/howto.scss deleted file mode 100644 index 12b29e5..0000000 --- a/src/styles/components/howto.scss +++ /dev/null @@ -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; - } -} diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 682f3c7..6e4d13a 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -1,8 +1,13 @@ .no-sidebar { flex: 1; + margin-top: 50px; + + @include breakpoint(lg) { + margin-top: 0; + } &.with-padding { - @extend %padding-main; + padding: 1.3rem; } } @@ -11,14 +16,20 @@ display: flex; flex-direction: row; align-items: stretch; + margin-top: 50px; overflow: hidden; + @include breakpoint(lg) { + margin-top: 0; + } + .views-container { flex: 1 0 0; /*-webkit-backface-visibility: hidden;*/ &.sidebar-is-closed { - @include breakpoint(769px, 0) { + + @include breakpoint(lg) { margin-left: -15.5rem; transform: translate(15.5rem); } @@ -141,9 +152,10 @@ } &.jsRightMenu { + display: none; - @include breakpoint(sm) { - display: none; + @include breakpoint(lg) { + display: block; } } @@ -157,7 +169,7 @@ &.jsRightMenu[open] { - @include breakpoint(sm) { + @include breakpoint(md) { display: block; background: var(--color-right-menu-background); bottom: 0; @@ -165,9 +177,13 @@ min-width: 60%; position: fixed; right: 0; - top: 83px; + top: 50px; z-index: 1; } + + @include breakpoint(lg) { + top: 83px; + } } } } diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss index e1f5f73..018d780 100644 --- a/src/styles/components/tags.scss +++ b/src/styles/components/tags.scss @@ -1,19 +1,13 @@ -%tag-role { - border: 1px solid var(--color-tag-group-border); - border-radius: 3px; - color: var(--color-tag-group-text); - font-size: 1.4rem; - font-weight: 400; - margin-right: 0.6rem; - padding: 0.2rem 0.98rem; -} - %tag-admin { - border: 1px solid var(--color-tag-admin-border); - border-radius: 3px; - color: var(--color-tag-admin-text); - font-size: 1.4rem; - font-weight: 400; - margin-left: 0.6rem; - padding: 0.35rem 0.98rem; -} \ No newline at end of file + display: none; + + @include breakpoint(lg) { + border: 1px solid var(--color-tag-admin-border); + border-radius: 3px; + color: var(--color-tag-admin-text); + font-size: 1.4rem; + font-weight: 400; + margin-left: 0.6rem; + padding: 0.35rem 0.98rem; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index e7ee1f6..1458359 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -10,7 +10,7 @@ @import 'base/main'; @import 'base/about'; -div#viewport { +#viewport { display: flex; flex: 1; /*height: auto; @@ -19,8 +19,6 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'layout/project/index'; - @import 'layout/circle/index'; @import 'layout/user/index'; @import 'layout/events/index'; @import 'layout/dashboard/index'; diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss deleted file mode 100644 index 3de89ec..0000000 --- a/src/styles/layout/circle/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'circle-profile'; -@import 'circle-admin'; diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss deleted file mode 100644 index d3241dc..0000000 --- a/src/styles/layout/circle/circle-admin.scss +++ /dev/null @@ -1,9 +0,0 @@ -.admin-header { - display: flex; - justify-content: space-between; - margin-bottom: 5rem; - - .admin-header__title { - @extend h3; - } -} \ No newline at end of file diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss deleted file mode 100644 index 4afb54a..0000000 --- a/src/styles/layout/circle/circle-profile.scss +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/src/styles/layout/project/_index.scss b/src/styles/layout/project/_index.scss deleted file mode 100644 index 5a93164..0000000 --- a/src/styles/layout/project/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'project-profile'; diff --git a/src/styles/layout/project/project-profile.scss b/src/styles/layout/project/project-profile.scss deleted file mode 100644 index b38c218..0000000 --- a/src/styles/layout/project/project-profile.scss +++ /dev/null @@ -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; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss index f15713e..5158e8e 100644 --- a/src/styles/layout/user/_index.scss +++ b/src/styles/layout/user/_index.scss @@ -1,2 +1 @@ @import 'user-profile'; -@import 'admin-users'; diff --git a/src/styles/layout/user/admin-users.scss b/src/styles/layout/user/admin-users.scss deleted file mode 100644 index ddf18e7..0000000 --- a/src/styles/layout/user/admin-users.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/templates/hubl-captain.pug b/src/templates/hubl-captain.pug index aacb117..116f04e 100644 --- a/src/templates/hubl-captain.pug +++ b/src/templates/hubl-captain.pug @@ -4,11 +4,10 @@ sib-widget(name='hubl-captain') template sib-display.user-thumb( data-src="${await value}" - fields='account.picture, sup(name), sub(profile.city, is_lead)' + fields='account.picture, sup(name), sub(is_lead)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' - class-profile.city='user-thumb__city' class-is_lead='user-thumb__lead' widget-account.picture='hubl-user-avatar' diff --git a/src/templates/hubl-circle-team.pug b/src/templates/hubl-circle-team.pug index f985788..e02fd4a 100644 --- a/src/templates/hubl-circle-team.pug +++ b/src/templates/hubl-circle-team.pug @@ -2,26 +2,19 @@ include hubl-user-avatar.pug sib-widget(name='hubl-circle-team-template') template - sib-display.user-thumb( + sib-display.user-thumb.is-spaced( data-src='${await value.user}' - fields='account.picture, sup(name, isadmin, groups), sub(profile.city)' + fields='account.picture, sup(name, isadmin), sub(profile.city)' value-isadmin='${await value.is_admin}' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' - class-isadmin='tag-admin' - class-groups='tag-group' + class-isadmin='user-thumb__admin' class-profile.city='user-thumb__city' widget-account.picture='hubl-user-avatar' widget-isadmin='hubl-circle-user-admin' - widget-groups='hubl-circle-user-groups' - - multiple-groups='' ) sib-widget(name='hubl-circle-user-admin') template ${(await value) != "false" ? "Administrateur" : ""} - -sib-widget(name='hubl-circle-user-groups') - template ${await value.name} diff --git a/src/templates/hubl-customer.pug b/src/templates/hubl-customer.pug deleted file mode 100644 index 07abe0b..0000000 --- a/src/templates/hubl-customer.pug +++ /dev/null @@ -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 ? `Immatriculation de l'entreprise : ${await value.companyRegister}` : ``} - li ${await value.address ? `Adresse :

${await value.address}

`: ``} - 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 ? `
  • ${await value.phone}
    • ` : ``} diff --git a/src/templates/hubl-groups.pug b/src/templates/hubl-groups.pug deleted file mode 100644 index 49bd446..0000000 --- a/src/templates/hubl-groups.pug +++ /dev/null @@ -1,3 +0,0 @@ -sib-widget(name='hubl-groups-name') - template ${value.name} - diff --git a/src/templates/hubl-project-team.pug b/src/templates/hubl-project-team.pug index 6d47d27..f00ddca 100644 --- a/src/templates/hubl-project-team.pug +++ b/src/templates/hubl-project-team.pug @@ -2,28 +2,21 @@ include hubl-user-avatar.pug sib-widget(name='hubl-project-team') template - sib-display.user-thumb( + sib-display.user-thumb.is-spaced( data-src='${await value}' - fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)' + fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' - class-user.account.picture='user-thumb__picture' + class-user.account.picture='avatar user-thumb__picture' class-user.name='user-thumb__name' - class-isadmin='tag-admin' - class-user.groups='tag-group' + class-isadmin='user-thumb__admin' class-user.profile.city='user-thumb__city' class-name='user-thumb__lead' widget-user.account.picture='hubl-user-avatar' widget-isadmin='hubl-project-user-admin' - widget-user.groups='hubl-project-user-groups' - - multiple-user.groups='' ) sib-widget(name='hubl-project-user-admin') template ${(await value) == "false" ? "" : "Administrateur"} - -sib-widget(name='hubl-project-user-groups') - template ${await value.name} diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 70f19bf..5883464 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,23 +1,23 @@ -div.content-box__info +div.content-box__info.flex sib-link(class="backlink right", next='admin-circle-list') Retour h1.centered Créer un canal - sib-form( + sib-form.form.button-register( data-src=`${endpoints.circles || endpoints.post.circles}` fields='status, name, description' + class-status='form-label is-light is-full-width color' + class-name='form-label is-light is-full-width input-text-like' + class-description='form-label is-light is-full-width input-text-like' + label-status='Statut du canal' - widget-status='hubl-status' - - class-name='form-label is-light is-full-width' - class-description='form-label is-light is-full-width' - class-status='form-label is-light is-full-width member-select color' - label-name='Nom du canal *' label-description='Sous-titre du canal *' + widget-status='hubl-status' + next='admin-circle-list' submit-button='Enregistrer' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 1079379..47278b6 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -1,24 +1,25 @@ -.content-box.full-width.with-form +.content-box.flex.full-width.with-form sib-router(default-route='admin-circle-list', hidden) sib-route(name='admin-circle-list') sib-route(name='admin-circle-create') sib-route(name='circle-left') - div.content-box__header + div.content-box__header.flex.space-between h1.without-margin Administration + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU include ../circle/page-circle-left.pug - #admin-circle-list(hidden) + #admin-circle-list.content-box__height(hidden) include ../../templates/hubl-user-avatar.pug sib-widget(name='hubl-circle-owner') template - sib-display.user-thumb( + sib-display.user-thumb.is-spaced( data-src='${await value}' fields='account.picture, sup(name), sub(username)' - class-account.picture='user-thumb__picture' + class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' class-username='user-thumb__username' @@ -26,78 +27,79 @@ ) - div.content-box__info + div.content-box__info.flex - div.admin-header + div.admin-header.flex - div.admin-header__title Canaux + h3 Canaux sib-link( class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' next='admin-circle-create' ) Créer un canal - .table + .table-wrapper + .table - div.table-header.grey-color - div.w33 Nom - div.w33 Administrateurs - div.w33 Rejoindre + div.table-header.grey-color + div.w280 Nom + div.w280 Administrateurs + div.w280 Rejoindre - sib-widget(name='hubl-admin-circle-leave-button') - template - sib-delete( - class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' - data-src="${src}" - data-label='Quitter' - ) + sib-widget(name='hubl-admin-circle-leave-button') + template + sib-delete( + class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + data-src="${src}" + data-label='Quitter' + ) - sib-display( - class='table-body' + sib-display( + class='table-body' - bind-user - nested-field='circles' - fields='circle.name, circle.owner, leaveButton' + bind-user + nested-field='circles' + fields='circle.name, circle.owner, leaveButton' - class-circle.name='w33 cell border cell-with-name' - class-circle.owner='w33 cell border cell-with-id-card' - class-leaveButton='w33 cell border cell-with-buttons' + class-circle.name='w280 border cell-with-name' + class-circle.owner='w280 border cell-with-id-card' + class-leaveButton='w280 border cell-with-buttons' - action-leaveButton="joinButton" - widget-leaveButton="hubl-admin-circle-leave-button" - widget-circle.owner='hubl-circle-owner' + action-leaveButton="joinButton" + widget-leaveButton="hubl-admin-circle-leave-button" + widget-circle.owner='hubl-circle-owner' - order-by="circle.name" - ) + order-by="circle.name" + ) - sib-widget(name='hubl-admin-circle-join-button') - template - sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( - data-src='${value}' + sib-widget(name='hubl-admin-circle-join-button') + template + sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( + data-src='${value}' - fields='user.username' - value-user.username='hubl-workaround-493' - widget-user.username='sib-form-hidden' + fields='user.username' + value-user.username='hubl-workaround-493' + widget-user.username='sib-form-hidden' - submit-button='Rejoindre' - ) + submit-button='Rejoindre' + ) - sib-display( - class='table-body' + sib-display( + class='table-body' - data-src=`${endpoints.circles || endpoints.get.circles}joinable/` - fields='name, owner, members' + data-src=`${endpoints.circles || endpoints.get.circles}joinable/` + fields='name, owner, members' - class-name='w33 cell border cell-with-name' - class-owner='w33 cell border cell-with-id-card' - widget-owner='hubl-circle-owner' + class-name='w280 border cell-with-name' + class-owner='w280 border cell-with-id-card' + widget-owner='hubl-circle-owner' - class-members='w33 cell border cell-with-buttons' - widget-members="hubl-admin-circle-join-button" + class-members='w280 border cell-with-buttons' + widget-members="hubl-admin-circle-join-button" - order-by="name" - ) + order-by="name" + ) - #admin-circle-create(hidden) + #admin-circle-create.content-box__height(hidden) include page-admin-circles-create.pug diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 44c9101..e038c7c 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -1,8 +1,4 @@ -sib-widget(name='hubl-template-project-title') - template - p ${value} - -div.content-box__info +div.content-box__info.flex sib-link(class="backlink right" next='admin-project-list') Retour sib-widget(name="hubl-admin-project-add-user") @@ -18,40 +14,32 @@ div.content-box__info h1.centered Créer un projet - sib-form( + sib-form.form.button-register( 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)' - - 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' + fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)' 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}` widget-customer='sib-form-auto-completion' 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' - 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' 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' - 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' range-captain=`${endpoints.users || endpoints.get.users}` - class-captain='member-select form-label is-light is-half-width' + class-captain='form-label is-light is-half-width' widget-captain='sib-form-auto-completion' next='admin-project-list' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index 6f83ba0..3323a09 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -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-route(name='admin-project-list') sib-route(name='admin-project-create') sib-route(name='project-left') - div.content-box__header + div.content-box__header.flex.space-between h1.without-margin Administration + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU #project-left(hidden) include ../project/page-project-left.pug - #admin-project-list(hidden) + #admin-project-list.content-box__height(hidden) include ../../templates/hubl-user-avatar.pug - div.content-box__info - div.admin-header - div.admin-header__title Projets + div.content-box__info.flex + div.admin-header.flex + h3 Projets sib-link( class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' next='admin-project-create' ) Créer un projet - .table - div.table-header.grey-color - div Nom - div Administrateurs - div Capitaines - div Accès + .table-wrapper + .table + div.table-header.grey-color + div.w262 Nom + div.w262 Administrateurs + div.w262 Capitaines + div.w262 Accès - sib-widget(name="hubl-admin-project-leave-button") - template - sib-delete( - class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' - data-src="${src}" - data-label='Quitter' - ) + sib-widget(name="hubl-admin-project-leave-button") + template + sib-delete( + class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + data-src="${src}" + data-label='Quitter' + ) - sib-widget(name='hubl-project-captain') - template - sib-display.user-thumb( - data-src='${await value}' - fields='account.picture, sup(name), sub(username)' + sib-widget(name='hubl-project-captain') + template + sib-display.user-thumb.is-spaced( + data-src='${await value}' + fields='account.picture, sup(name), sub(username)' - class-account.picture='user-thumb__picture' - class-name='user-thumb__name' - class-username='user-thumb__username' + class-account.picture='avatar user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' - widget-account.picture='hubl-user-avatar' - ) + widget-account.picture='hubl-user-avatar' + ) - sib-widget(name='hubl-project-admins') - template - sib-display( - data-src='${value}' - fields='user' - search-fields='is_admin' - search-value-is_admin='true' - search-widget-is_admin='sib-form-hidden' - widget-user='hubl-project-captain' - ) + sib-widget(name='hubl-project-admins') + template + sib-display( + data-src='${value}' + fields='user' + search-fields='is_admin' + search-value-is_admin='true' + search-widget-is_admin='sib-form-hidden' + widget-user='hubl-project-captain' + ) - sib-widget(name="hubl-admin-project-buttons") - template - sib-display( - data-src='${src}' - nested-field='members' - fields='relation' - action-relation='relation' - widget-relation='hubl-admin-project-leave-button' - search-fields='user' - search-widget-user='sib-form-hidden' - search-value-user="-" - hubl-inherit-user-id="search-value-user" - ) + sib-widget(name="hubl-admin-project-buttons") + template + sib-display( + data-src='${src}' + nested-field='members' + fields='relation' + action-relation='relation' + widget-relation='hubl-admin-project-leave-button' + search-fields='user' + search-widget-user='sib-form-hidden' + search-value-user="-" + hubl-inherit-user-id="search-value-user" + ) - sib-display( - class='table-body' + sib-display( + class='table-body' - data-src=`${endpoints.projects || endpoints.get.projects}` - fields='name, members, captain, buttons' + data-src=`${endpoints.projects || endpoints.get.projects}` + fields='name, members, captain, buttons' - class-name='w25 cell border cell-with-name hashtag' - class-members='w25 cell border' - class-captain='w25 cell border cell-with-id-card' - class-buttons='w25 cell border cell-with-buttons' + class-name='w262 border cell-with-name hashtag' + class-members='w262 border' + class-captain='w262 border cell-with-id-card' + class-buttons='w262 border cell-with-buttons' - widget-buttons="admin-project-buttons" - action-buttons="buttons" + widget-buttons="admin-project-buttons" + action-buttons="buttons" - widget-captain='hubl-project-captain' - widget-members='hubl-project-admins' - ) + widget-captain='hubl-project-captain' + widget-members='hubl-project-admins' + ) - #admin-project-create(hidden) + #admin-project-create.content-box__height(hidden) include page-admin-projects-create.pug \ No newline at end of file diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index ab580b5..a90d8c7 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/src/views/admin/page-admin-users-create.pug @@ -1,18 +1,17 @@ -div.content-box__info +div.content-box__info.flex sib-link(class='backlink right', next='admin-users-list') Retour h1.centered Ajouter un utilisateur à la plateforme - sib-form( + sib-form.form.button-register( data-src=`${endpoints.users || endpoints.post.users}` - range-groups=`${endpoints.groups || endpoints.get.groups}` fields='line-1(first_name, last_name), line-2(username, email), line-3(password)' - class-first_name='form-label is-light is-half-width' - class-last_name='form-label is-light is-half-width' - class-username='form-label is-light is-half-width' - class-email='form-label is-light is-half-width' + class-first_name='form-label is-light is-half-width input-text-like' + class-last_name='form-label is-light is-half-width input-text-like' + class-username='form-label is-light is-half-width input-text-like' + class-email='form-label is-light is-half-width input-text-like' label-first_name='Prénom *' label-last_name='Nom *' diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index 61fddec..5198749 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/src/views/admin/page-admin-users-edit.pug @@ -1,4 +1,4 @@ -div.content-box__info +div.content-box__info.flex sib-link(class='backlink right', next='admin-users-list') Retour h1.centered @@ -8,16 +8,15 @@ div.content-box__info fields='name' ) - sib-form( + sib-form.form.button-register( bind-resources='' - range-groups=`${endpoints.groups || endpoints.get.groups}` fields='line-1(first_name, last_name), line-2(username, email)' - class-first_name='form-label is-light is-half-width' - class-last_name='form-label is-light is-half-width' - class-username='form-label is-light is-half-width' - class-email='form-label is-light is-half-width' + class-first_name='form-label is-light is-half-width input-text-like' + class-last_name='form-label is-light is-half-width input-text-like' + class-username='form-label is-light is-half-width input-text-like' + class-email='form-label is-light is-half-width input-text-like' label-first_name='Prénom *' label-last_name='Nom *' diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 2aed94b..bae8156 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -1,11 +1,12 @@ -.content-box.full-width.with-form +.content-box.flex.full-width.with-form sib-router(default-route='admin-users-list', hidden) sib-route(name='admin-users-list') sib-route(name='admin-users-create') sib-route(name='admin-users-edit') - div.content-box__header + div.content-box__header.flex.space-between h1.without-margin Administration + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU sib-widget(name='hubl-sib-action-custom') template @@ -16,51 +17,45 @@ next="${value}" ) - sib-widget(name='hubl-user-admin-groups-display') - template - sib-display( - data-src="${value}" - fields="name" - ) - - #admin-users-list(hidden) - div.content-box__info - div.admin-header - div.admin-header__title Utilisateurs + #admin-users-list.content-box__height(hidden) + div.content-box__info.flex + div.admin-header.flex + h3 Utilisateurs sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') sib-link( class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' next='admin-users-create' ) Ajouter un utilisateur - .table - div.table-header.grey-color - div.w75 Nom - div.w25 - - sib-display( - class='table-body' - data-src=`${endpoints.users || endpoints.get.users}` - fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' + .table-wrapper + .table + div.table-header.grey-color + div.w280 Nom + div.w70 + + sib-display( + class='table-body' + data-src=`${endpoints.users || endpoints.get.users}` + fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' - class-account.picture='user-thumb__picture' - class-name='user-thumb__name' - class-username='user-thumb__username' - class-profile.city='user-thumb__city' - widget-account.picture='hubl-user-avatar' + class-account.picture='avatar user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + class-profile.city='user-thumb__city' + widget-account.picture='hubl-user-avatar' - label-actions='Edit' - action-actions='admin-users-edit' - class-actions='w25 cell border cell-with-buttons' - widget-actions='hubl-sib-action-custom' + label-actions='Edit' + action-actions='admin-users-edit' + class-actions='w70 border cell-with-buttons' + widget-actions='hubl-sib-action-custom' - order-by='username' - ) + order-by='username' + ) - #admin-users-create(hidden) + #admin-users-create.content-box__height(hidden) include page-admin-users-create.pug - #admin-users-edit(hidden) + #admin-users-edit.content-box__height(hidden) include page-admin-users-edit.pug diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 6663158..89e2b8f 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -7,12 +7,12 @@ div.content-box__info sib-widget(name='hubl-team-template-edit') template - sib-display.user-thumb( - class='w66 cell border cell-with-id-card user-thumb' + sib-display.user-thumb.is-spaced( + class='w355 cell border cell-with-id-card user-thumb' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' - class-account.picture='user-thumb__picture' + class-account.picture='user-thumb__picture avatar' class-name='user-thumb__name' class-groups='user-thumb__groups' class-profile.city='user-thumb__city' @@ -24,7 +24,7 @@ div.content-box__info ) sib-ac-checker( - class='w33 cell border' + class='W152 cell border' permission="acl:Delete" data-src="${value['@id']}" ) @@ -36,7 +36,7 @@ div.content-box__info //- Only to show the table grid sib-ac-checker( - class='w33 cell border' + class='W152 cell border' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -46,10 +46,10 @@ div.content-box__info sib-ac-checker(permission='acl:Write', bind-resources) h1 Modifie ton canal - sib-form.form-edit( + sib-form.form.button-register( bind-resources - fields='status, block-circle__info(name, owner), description' + fields='status, line-1(name, owner), description' range-owner=`${endpoints.users || endpoints.get.users}` label-status='Statut du canal' @@ -59,9 +59,9 @@ div.content-box__info label-owner='Administrateur ou administratrice' label-description='Sous-titre du canal *' - class-name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width input-text-like' class-owner='form-label is-light is-half-width member-select color' - class-description='form-label is-light is-full-width' + class-description='form-label is-light is-full-width input-text-like' class-status='form-label is-light is-full-width member-select color' widget-owner='sib-form-auto-completion' @@ -75,32 +75,32 @@ div.content-box__info h2 Liste des membres: sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-form.block.select-add-member( + sib-form.block.select-add( bind-resources nested-field='members' fields='user' range-user=`${endpoints.users || endpoints.get.users}` - class-user='team form-label is-dark' + class-user='team form-label is-light' label-user='' widget-user='sib-form-auto-completion' submit-button='Ajouter un membre' ) - .table + .table-wrapper + .table + div.table-header.grey-color + div.w355 Nom + div.W152 Accès - div.table-header.grey-color - div.w66 Nom - div.w33 Accès + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' - - multiple-members='' - widget-members='hubl-team-template-edit' - ) + multiple-members='' + widget-members='hubl-team-template-edit' + ) diff --git a/src/views/circle/page-circle-left.pug b/src/views/circle/page-circle-left.pug index 098c61a..8ad8fe8 100644 --- a/src/views/circle/page-circle-left.pug +++ b/src/views/circle/page-circle-left.pug @@ -1,5 +1,5 @@ #circle-left(hidden) - div.content-box__info(style="padding: 15px") + div.content-box__info.flex(style="padding: 15px") p Tu as quitté ce canal. p Pour le rejoindre à nouveau, rends-toi dans le panneau administration ou contacte un administrateur. diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 2c583fb..7f96881 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden) include ../../templates/hubl-circle-team.pug .content-box__info - .space-between - sib-display( + .flex.space-between.with-padding.mobile-vertical-align + sib-display.mobile-margin__bottom( bind-resources fields='creationDateSet(title, creationDate)' @@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden) widget-creationDate='sib-display-date' ) sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre + sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre - div.box-button + div.flex.desktop-button__end sib-ac-checker(permission='acl:Delete', bind-resources) sib-delete( - class='button text-bold text-uppercase button-primary bordered with-icon icon-trash' + class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash' bind-resources data-label='Supprimer le canal' ) @@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden) sib-widget(name='hubl-circle-leave-button') template sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' data-src="${src}" data-label='Quitter le canal' ) sib-widget(name='hubl-circle-join-button') template - button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex + button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex sib-form( data-src='' nested-field='members' @@ -80,5 +80,5 @@ sib-router(default-route='circle-profile', hidden) -#circle-edit(hidden) +#circle-edit.content-box__height(hidden) include page-circle-edit.pug diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index bc9c1d6..71ab905 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -25,4 +25,3 @@ next='job-offers' ) - diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index 7fde4ff..0d81831 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -25,4 +25,3 @@ next='job-offers' ) - diff --git a/src/views/project/page-project-chat.pug b/src/views/project/page-project-chat.pug index cd2c4c2..c7aed59 100644 --- a/src/views/project/page-project-chat.pug +++ b/src/views/project/page-project-chat.pug @@ -1,4 +1,4 @@ -.content-box.with-padding.full-width.chat-view +.content-box.flex.full-width.chat-view sib-chat( data-authentication='login', data-auto-login='true', diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 2a387f0..a9d0411 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -1,70 +1,61 @@ div.content-box__info include ../../templates/hubl-user-avatar.pug - - sib-widget(name='hubl-fieldset-title') - template - label ${label} sib-link(class='backlink right', bind-resources, next='project-profile') Retour h1 Modifie ton projet - sib-form.form-edit( + sib-form.form.button-register( bind-resources - fields='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' - class-name='form-label is-light is-half-width' - class-description='form-label is-light is-full-width' - label-fieldset-info='' + class-name='form-label is-light is-half-width input-text-like' + class-description='form-label is-light is-full-width input-text-like' label-customer='Client*' range-customer=`${endpoints.customers || endpoints.get.customers}` label-name='Nom du projet*' label-description='Description du projet' - widget-fieldset-info='hubl-fieldset-title' widget-description='sib-form-textarea' - class-fieldset-fee='fieldset' - class-businessprovider='form-label is-light is-half-width' - class-businessproviderfee='form-label is-light is-half-width' - label-fieldset-fee='Contributions' + class-businessprovider='form-label is-light is-half-width input-text-like' + class-businessproviderfee='form-label is-light is-half-width input-text-like' label-businessprovider='Apporteur d\'affaire' label-businessproviderfee='Montant de la contribution' - widget-fieldset-fee='hubl-fieldset-title' submit-button='Enregistrer' ) h2 Liste des membres : - sib-form.block.select-add-member( + sib-form.block.select-add.button-add( bind-resources nested-field='members' fields='user' range-user=`${endpoints.users || endpoints.get.users}` - class-user='team form-label is-dark' + class-user='team form-label is-light' label-user='' widget-user='sib-form-auto-completion' submit-button='Ajouter un membre' ) - .table + .table-wrapper + .table + div.table-header.grey-color + div.w355 Nom + div.W152 Accès - div.table-header.grey-color - div Nom - div Accès + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' - - multiple-members='' - widget-members='hubl-team-template-edit' - ) + multiple-members='' + widget-members='hubl-team-template-edit' + ) diff --git a/src/views/project/page-project-left.pug b/src/views/project/page-project-left.pug index beb548c..71135fc 100644 --- a/src/views/project/page-project-left.pug +++ b/src/views/project/page-project-left.pug @@ -1,5 +1,5 @@ #project-left - div.content-box__info(style="padding: 15px") + div.content-box__info.flex(style="padding: 15px") p Tu as quitté ce projet. p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau administration et demande une invitation. diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index d596826..bb0f97c 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -5,13 +5,12 @@ sib-router(default-route='project-profile', hidden) #project-profile(hidden) include ../../templates/hubl-captain.pug include ../../templates/hubl-circle-team.pug - include ../../templates/hubl-customer.pug include ../../templates/hubl-project-team.pug - .content-box__info + .content-box__info.flex - .space-between - sib-display( + .flex.space-between.with-padding.mobile-vertical-align + sib-display.mobile-margin__bottom( bind-resources fields='creationDateSet(title, creationDate)' @@ -22,10 +21,10 @@ sib-router(default-route='project-profile', hidden) widget-creationDate='sib-display-date' ) sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='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( bind-resources fields='label-captain, captain' @@ -42,19 +41,6 @@ sib-router(default-route='project-profile', hidden) 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 : sib-display( @@ -68,13 +54,13 @@ sib-router(default-route='project-profile', hidden) sib-widget(name='hubl-project-leave-button') template sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' data-src="${src}" data-label='Quitter le groupe' ) sib-display( - class='position-end' + class='flex desktop-button__end' bind-resources nested-field='members' 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