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..8642cc0 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); } diff --git a/src/dependencies.pug b/src/dependencies.pug index ca6e07e..7aa93ee 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -24,7 +24,7 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) //- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer) if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) - script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.4" defer) //- script(type="module" src="/lib/sib-directory/dist/index.js" defer) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) @@ -33,7 +33,7 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.users || (endpoints.get && endpoints.get.users) script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer) - //- script(type="module" src="/lib/sib-chat/sib-chat.js" defer) + //-script(type="module" src="/lib/sib-chat/sib-chat.js" defer) script(src="/scripts/index.js" defer) diff --git a/src/header.pug b/src/header.pug index 7184052..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 ) @@ -29,6 +26,8 @@ details#user-controls.notLoggedIn sib-link(next='profile') Mon profil li sib-link(next='admin') Administration + li + sib-link(next='about') A propos button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Se connecter 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 dd21d1d..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 @@ -51,6 +55,9 @@ html(lang="en") #admin(hidden).with-sidebar include page-admin.pug + + #about.no-sidebar.with-padding + include page-about.pug if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) #profile(hidden).no-sidebar @@ -63,4 +70,4 @@ html(lang="en") type=`${provider.type}` url=`${provider.url}` id=`${provider.id}` - ) \ No newline at end of file + ) diff --git a/src/menu-left.pug b/src/menu-left.pug index 080d2a1..e304b87 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -47,94 +47,95 @@ sib-widget(name='hubl-menu-fix-url-project') order-by="customer.name" ) -nav#main__menu.jsLeftMenu - sib-router#navbar-router(default-route='dashboard') - if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - sib-route.menu(name='dashboard') - div.menu-label Tableau de bord - div.menu-icon.icon-home - div.divider - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - sib-route.menu(name='members') - div.menu-label Annuaire des membres - div.menu-icon.icon-people - div.divider - if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - sib-route.menu(name='job-offers', rdf-type='hd:joboffer') - div.menu-label Offres de mission - div.menu-icon.icon-briefcase - div.divider - if endpoints.events || (endpoints.get && endpoints.get.events) - sib-route.menu(name='events') - div.menu-label Evènements - div.menu-icon.icon-calendar - div.divider - if endpoints.projects || (endpoints.get && endpoints.get.projects) - div - sib-link(next='admin-project-list') - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-right-circle - div.menu-label Projets - div.menu-icon.icon-folder-alt - sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - div.sub-menu.menu-notification - sib-display.project-tab( - bind-user - nested-field='projects' - fields='project' - empty-widget='hubl-create' - empty-value='projet' - widget-project='hubl-menu-fix-url-project' - order-by='project.customer.name' - next='project' - ) - div.divider - if endpoints.circles || (endpoints.get && endpoints.get.circles) - div - sib-link(next='admin-circle-list') - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-right-circle - div.menu-label Canaux - div.menu-icon.icon-folder-alt - sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) - div.sub-menu.menu-notification - sib-display( - bind-user - nested-field='circles' - fields='circle' - empty-widget='hubl-create' - empty-value='canal' - widget-circle='hubl-menu-fix-url-circle' - order-by='circle.name' - next='circle' - ) - div.divider - if endpoints.users || (endpoints.get && endpoints.get.users) - div.menu-wrapper + +sib-router#navbar-router(default-route='dashboard') + if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) + sib-route.menu(name='dashboard') + div.menu-label Tableau de bord + div.menu-icon.icon-home + div.divider + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + sib-route.menu(name='members') + div.menu-label Annuaire des membres + div.menu-icon.icon-people + div.divider + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + sib-route.menu(name='job-offers', rdf-type='hd:joboffer') + div.menu-label Offres de mission + div.menu-icon.icon-briefcase + div.divider + if endpoints.events || (endpoints.get && endpoints.get.events) + sib-route.menu(name='events') + div.menu-label Evènements + div.menu-icon.icon-calendar + div.divider + if endpoints.projects || (endpoints.get && endpoints.get.projects) + div + sib-link(next='admin-project-list') div.menu div.menu-chevron - div.menu-icon.icon-arrow-up - div.menu-label Messages - div.menu-icon.icon-envelope-letter - sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) - div.sub-menu.menu-notification - sib-display.nosub( - data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}` - fields='name, chatProfile.jabberID, badge' - search-fields="name" - search-label-name="Rechercher..." - search-widget-name="hubl-search-users" - widget-name='sib-display-div' - widget-badge='hubl-counter' - widget-chatProfile.jabberID='hubl-menu-jabberid' - action-badge='badge' - order-by='username' - next='messages' - paginate-by='10' - ) - div.divider + div.menu-icon.icon-arrow-right-circle + div.menu-label Projets + div.menu-icon.icon-folder-alt + sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.project-tab( + bind-user + nested-field='projects' + fields='project' + empty-widget='hubl-create' + empty-value='projet' + widget-project='hubl-menu-fix-url-project' + order-by='project.customer.name' + next='project' + ) + div.divider + if endpoints.circles || (endpoints.get && endpoints.get.circles) + div + sib-link(next='admin-circle-list') + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-right-circle + div.menu-label Canaux + div.menu-icon.icon-folder-alt + sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.circle-tab( + bind-user + nested-field='circles' + fields='circle' + empty-widget='hubl-create' + empty-value='canal' + widget-circle='hubl-menu-fix-url-circle' + order-by='circle.name' + next='circle' + ) + div.divider + if endpoints.users || (endpoints.get && endpoints.get.users) + div.menu-wrapper + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-up + div.menu-label Messages + div.menu-icon.icon-envelope-letter + sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.nosub.message-tab( + data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}` + fields='name, chatProfile.jabberID, badge' + search-fields="name" + search-label-name="Rechercher..." + search-widget-name="hubl-search-users" + widget-name='sib-display-div' + widget-badge='hubl-counter' + widget-chatProfile.jabberID='hubl-menu-jabberid' + action-badge='badge' + order-by='username' + next='messages' + paginate-by='10' + ) + div.divider - sib-route(name='admin', hidden) - sib-route.menu(name='profile', hidden) + sib-route(name='admin', hidden) + sib-route.menu(name='profile', hidden) + sib-route(name='about', hidden) diff --git a/src/page-about.pug b/src/page-about.pug new file mode 100644 index 0000000..0bad6cf --- /dev/null +++ b/src/page-about.pug @@ -0,0 +1,17 @@ +.views-container + h2 A propos + div.flex-content-white + div + div + h3 Cette application est développée par Startin'blox + p Startin’blox est une coopérative qui développe des outils libres pour construire facilement et à moindre coût des applications fédérées et interopérables basées sur les derniers standards du web poussés par le projet SOLID. + p Sa mission est de redonner le pouvoir aux utilisateurs en leur permettant de reprendre la main sur leur outil numérique et de bénéficier d’un effet de réseau au sein d’un écosystème choisi afin de s’émanciper des grandes plateformes. + div + a(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/ + + div + div + h3 Contacte-nous + p Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ? + div + a(href="https://startinblox.com/fr/#home-contact" target="_blank").main-cta Contact \ No newline at end of file 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-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 b01d888..ac99260 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,27 +9,20 @@ class-const-title1='h1-like' class-number='h1-like word-spacing-right' class-customer.name='h1-like' - class-name='h1-aside name' + class-name='h1-aside' value-const-title1='N°' ) - .mobile-sidebar-button.jsMobileSidebarOpenButton - button.icon-arrow-left-circle - span MENU - div + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU + div.content-box__height sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug - #project-information(hidden) + #project-information.content-box__height(hidden) include views/project/page-project-profile.pug #project-picture(hidden) include views/project/page-project-picture.pug -dialog(id='project-contributions-help').modal - sib-link(next='project-profile') - button.icon-close - img(src='/images/contributions-help.png') - nav.jsRightMenu(role='navigation') sib-router(default-route='project-chat') ul 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..13c0135 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,6 +117,14 @@ --color-backlink: var(--color-secondary); --color-content-header: var(--color-grey-9); + + /* directory */ + --color-directory-primary: var(--color-primary)!important; + --color-directory-secondary: var(--color-secondary)!important; + --color-directory-complementary: var(--color-complementary)!important; + --color-directory-complementary-darken: var(--color-complementary-darken)!important; + --color-directory-white: var(--color-white)!important; + --color-directory-black: var(--color-black)!important; } /* Variables for event */ 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 new file mode 100644 index 0000000..c7b6230 --- /dev/null +++ b/src/styles/base/about.scss @@ -0,0 +1,58 @@ +#about{ + $main-color: rgb(236, 94, 92); + $second-color: white; + h2,h3{ + text-transform: uppercase; + } + h2{ + margin-left: 1.5em; + } + .flex-content-white{ + display: flex; + @media only screen and (max-width: 768px) { + flex-direction: column; + } + >div{ + padding: 2em 2.5em; + text-align: center; + margin: 0 1.5em 3em 1.5em; + background: white; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.11); + display: flex; + flex-direction: column; + justify-content: space-between; + } + >div:first-child{ + width: 60%; + } + >div:last-child{ + width: 35%; + @media only screen and (max-width: 768px) { + width: 60%; + } + } + a{ + text-decoration: none; + } + } + + .main-cta{ + background: $second-color none repeat scroll 0% 0%; + border: 1px solid $main-color; + border-radius: 55px; + color: $main-color; + cursor: pointer; + font-weight: bold; + text-transform: uppercase; + width: 25%; + font-size: 1.1rem; + align-self: center; + padding: 0.5rem 1.5rem; + } + + .main-cta:hover{ + background: $main-color none repeat scroll 0% 0%; + border : 1px solid $second-color; + color: $second-color; + } +} \ No newline at end of file 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 2abc146..e917128 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -1,156 +1,229 @@ -#circle-information, -#circle-edit, -#admin-circle-list, -#admin-circle-create, -#project-edit, -#admin-project-list, -#admin-project-create, -#admin-users-list { +/* Display and positioning of the table and its elements */ - [widget="hubl-team-template-edit"]>div { - flex: 1; - } +.table-wrapper { + overflow: auto; + position: relative; + width: 100%; .table { + border-collapse: collapse; + display: table; + margin-bottom: 20px; + overflow: auto; + table-layout: fixed; + width: 100%; + max-width: 100%; + } - .table-header { - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; + .table-header { + display: table-header-group; + text-align: center; + vertical-align: middle; - &.grey-color { - background: var(--color-table-header-background); - color: var(--color-table-header-text); - } - - >* { - border-right: 1px solid var(--color-table-border); - padding: 2.1rem 0; - text-align: center; - width:25%; - } - - >*:last-of-type { - border-right: 1px solid --color-table-header-background; - } + &>div { + display: table-cell; + white-space: nowrap; } + } - .table-body, .table-header { + .table-body { + display: table-row-group; - >div:first-of-type>sib-display>div, - hubl-team-template-edit[name='members'] { - display: flex; - border-left: 1px solid var(--color-table-border); - } + &>div { + display: contents; - .border { - border-bottom: 1px solid var(--color-table-border); - border-right: 1px solid var(--color-table-border); - } + &>sib-display { + display: table-row; - .cell { - text-align: center; - word-wrap: break-word; - white-space: nowrap; - } + &>div { + display: contents; - .w25 { - width: 25%; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - .w66 { - width: 66.6666%; - } - - .w75 { - width: 75%; - } - - .hashtag::before { - content: '#'; - } - } - - .cell-with-buttons { - align-items: center; - display: flex; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered, - .btn-margin-left; - } - } - } - - .cell-with-name { - color: var(--color-secondary); - font-weight: 600; - padding-top: 2.5rem; - } - - sib-multiple { - display: flex; - align-items: center; - justify-content: center; - } - - .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, - [name='user-thumb'] { - @extend %user-thumb__grid; - padding: 0 2.2rem; - - >.user-thumb__picture { - @extend %user-thumb__picture; - } - - >[name='sup'] { - @extend %user-thumb__grid-sup; - - .user-thumb__name { - @extend %user-thumb__name; - } - - .user-thumb__groups { - @extend %user-thumb__groups; + &>* { + border-bottom: 1px solid var(--color-table-border); + display: table-cell; + vertical-align: middle; + } } } - >[name='sub'] { - @extend %user-thumb__grid-inf; + &>sib-multiple { + display: contents; - >.user-thumb__username:not(:empty) { - @extend %user-thumb__username; - } + &>div { + display: contents; - >.user-thumb__city:not(:empty) { - @extend %user-thumb__city; + &>hubl-team-template-edit { + display: table-row; + + &>* { + border-bottom: 1px solid var(--color-table-border); + display: table-cell; + text-align: center; + vertical-align: middle; + } + } } } } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } + } +} + +/* Styles of the table and its elements */ + +.table { + border-bottom: 1px solid var(--color-table-border); + border-left: 1px solid var(--color-table-border); + border-right: 1px solid var(--color-table-border); +} + +.table-header { + font-size: 1.6rem; + font-weight: 600; + + &.grey-color { + background: var(--color-table-header-background); + color: var(--color-table-header-text); + } + + >*:not(:last-child) { + border-right: 1px solid var(--color-white); + padding: 2.1rem 0; + text-align: center; + } +} + +.table-body, +.table-header { + + .border { + border-right: 1px solid var(--color-table-border); + } +} + +.table-body, +.table-header { + + /* Fix. Could disappear when we can add .class on set fields */ + [name^='cell-1'] { + @extend .w280; + @extend .border; + } + + .w280 { + width: 280px; + } + + .w70 { + width: 70px; + } + + .w262 { + width: 262px; + } + + .W152 { + width: 152px; + } + + .w355 { + width: 355px; + } + + .hashtag::before { + content: '#'; + } +} + +/* Styles of specific cells */ + +.cell-with-buttons { + text-align: center; + + [name='button'] { + + input[type='submit'] { + @extend + .button, + .text-bold, + .text-uppercase, + .reversed, + .button-secondary, + .bordered, + .desktop-btn-margin__left; + } + } +} + +.cell-with-name { + color: var(--color-secondary); + font-weight: 600; + padding-left: 2rem; + text-align: left; +} + +/* Styles of elements inside cells */ + +.user-thumb>div, +[name='user-thumb'] { + vertical-align: middle; + text-align: left; + @extend %user-thumb__grid; + padding: 0 2.2rem; + + >.user-thumb__picture { + @extend .user-thumb__picture; + } + + >[name='sup'] { + @extend %user-thumb__grid-sup; + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + } +} + +.table sib-ac-checker { + text-align: center; +} + +.circle-join { + position: relative; + width: 181px; + margin: 0 auto; + min-width: 181px; + + input { + height: 29px; + left: -1px; + position: absolute; + top: -1px; + width: 102%; + padding-left: 14px !important; + } + + &.button.with-icon::before { + margin-left: 6px; + } +} + +.circle-leave { + position: relative; + width: 40%; + min-width: 40%; + + &>button { + height: 29px; + padding-left: 13px; + position: absolute; + left: 1px; + top: -1px; + width: 106%; + } + + &.button.with-icon::before { + font-size: 1.6rem; + margin-right: 2rem !important; + margin-left: -50px; } } 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 5132044..1458359 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -8,8 +8,9 @@ @import 'abstracts/mixins'; @import 'components/icons/index'; @import 'base/main'; +@import 'base/about'; -div#viewport { +#viewport { display: flex; flex: 1; /*height: auto; @@ -18,8 +19,6 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'layout/project/index'; - @import 'layout/circle/index'; @import 'layout/user/index'; @import 'layout/events/index'; @import 'layout/dashboard/index'; 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 4e9971b..fa0a8db 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 6ef4939..3a8bc3a 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,10 +14,10 @@ div.content-box__info h1 Créer un nouveau projet - sib-form( + sib-form.form.button-register( data-src=`${endpoints.projects || endpoints.post.projects}` - fields='status,line-1(customer.name, name), description, line-10(captain)' + fields='status, line-1(customer.name, name), description, line-10(captain)' label-status='Statut du canal*' widget-status='hubl-status' @@ -38,11 +34,11 @@ div.content-box__info class-customer.name='form-label is-light is-half-width' label-name='Nom du projet*' - class-name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width input-text-like' label-captain='Capitaine du projet*' range-captain=`${endpoints.users || endpoints.get.users}` - class-captain='member-select form-label is-light is-half-width' + class-captain='form-label is-light is-half-width' widget-captain='sib-form-auto-completion' next='project-picture' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index c9fa9b2..c263c4e 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -1,21 +1,22 @@ -.content-box.full-width.with-form +.content-box.flex.full-width.with-form sib-router(default-route='admin-project-list', hidden) sib-route(name='admin-project-list') sib-route(name='admin-project-create') sib-route(name='project-left') - div.content-box__header + div.content-box__header.flex.space-between h1.without-margin Administration + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU #project-left(hidden) include ../project/page-project-left.pug - #admin-project-list(hidden) + #admin-project-list.content-box__height(hidden) include ../../templates/hubl-user-avatar.pug - div.content-box__info - div.admin-header - div.admin-header__title Projets + div.content-box__info.flex + div.admin-header.flex + h3 Projets sib-link( class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' next='admin-project-create' 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/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 1480145..e87de38 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -1,16 +1,12 @@ div.content-box__info include ../../templates/hubl-user-avatar.pug - - sib-widget(name='hubl-fieldset-title') - template - label ${label} sib-link(class='backlink right', bind-resources, next='project-profile') Retour h1 Modifie ton projet - sib-form.form-edit( + sib-form.form.button-register( bind-resources fields='status, block-project__info(customer.name, name), description' @@ -47,13 +43,13 @@ div.content-box__info h2 Liste des membres : - sib-form.block.select-add-member( + sib-form.block.select-add.button-add( bind-resources nested-field='members' fields='user' range-user=`${endpoints.users || endpoints.get.users}` - class-user='team form-label is-dark' + class-user='team form-label is-light' label-user='' widget-user='sib-form-auto-completion' 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 69a04f0..c734a18 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)' @@ -71,14 +70,10 @@ sib-router(default-route='project-profile', hidden) sib-widget(name='hubl-project-leave-button') template sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' data-src="${src}" data-label='Quitter le groupe' ) - - - - -#project-edit(hidden) +#project-edit.content-box__height(hidden) include page-project-edit.pug