diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 5884a93f35913fb2d14229339107168f2ef8608e..19aeb4cda30340ef43197fc0f2acc76a2927deaa 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 dcf85e8110904fb54140651d58488b87ba2761c4..8642cc0b69ea1cae01c8f6febfbfca0680ebb4c1 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 ca6e07edc803fe33d4934d8debad3e372ffa4740..7aa93ee11a94c7cbe725d9251dff49b087742038 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 718405216168c0e4120be7edbdb249ba9068bc6e..106fc37333328616fcecb0581e60ab1ff776c14f 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 0037c26fba2787fc9e2c485e3ef6adf6c921cdac..dad700c496fc4819cfb8717ff1a09c1f138d0985 100644
--- a/src/images/alien.svg
+++ b/src/images/alien.svg
@@ -1,4 +1,4 @@
-<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg class="alien" fill="#A59D9D" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
diff --git a/src/images/contributions-help.png b/src/images/contributions-help.png
deleted file mode 100644
index 4a3597b53d294ecc4e5055155830f3a60f3c3a70..0000000000000000000000000000000000000000
Binary files a/src/images/contributions-help.png and /dev/null differ
diff --git a/src/index.pug b/src/index.pug
index dd21d1d5bd1f27db2dab6671c9168dbf8ae0c512..1a139fe05b8e21e73d194105a9dd32e0e5885ee8 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 080d2a1f4853ec37b421d53696167e7e1ba4e498..e304b874e5d75a74a6b49beb515a97b344ec0e01 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-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-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 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 0000000000000000000000000000000000000000..0bad6cf188f01ed27263dfe4d062ad97e28bb899
--- /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 c3c8c9ed27b7b96fff504309243c1b01782c1103..30b7cd0a5961a67b9c359b734eec0bd707e53d8a 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 29cd3b99f198fb3346497c09c35e25dfea323472..6439aac2b17c4ae4e787f2559478f5bbcb202827 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 4bce06f6920707f34db61a869c3ed5088043eecb..ea3db7d7c305fd950f6824c14cc9605566c58297 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 545e6435cbedfdf873aff621092f9a036d04e8ca..154a42db46042d24070ea510af1f6a2f28a3de50 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 b01d888c6b1327e8cbdcf59b538e3d02581647de..ac99260665261858088163f82cc90136e884b1e4 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 be27ec17a7af0c2831a602781d6d5e248c54bb72..0dad7ef31191811703f34f885dce08cd40b546af 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 e974acd133139f867975b4ee69b3dd2c10dac6c0..13c0135dc40fb983af2abac84388600cbf6f5bd4 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 4a5b3451252b7c4a7ad93ada305255d04182bd28..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..c7b6230beecac576e040daddde7fc83107668682
--- /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 89410173c38213d48ef92ae8b632a60dbe4edaba..7d555fcefea4755a6ffbd8694d7431ef3871f1b8 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 {
-
- input[type='submit'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .reversed,
- .button-secondary,
- .bordered;
- margin-left: auto;
- margin-top: 3.2rem;
+.form form {
+ display: block;
+ height: fit-content;
+ margin-bottom: 75px;
+ transition: all .3s ease;
+
+ @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;
+}
- &.with-form {
+.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);
+ }
+}
- h1 {
- color: var(--color-title);
- font-weight: bold;
- font-size: 2rem;
+[name^='line-'] {
+
+ @include breakpoint(lg) {
+ display: flex;
+ justify-content: space-between;
+ }
+}
- &.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;
- }
+.is-full-width {
+ box-sizing: border-box;
+ flex: 1 1 100%;
+}
- [name^='block-'] {
- margin-bottom: 2.75rem;
- }
+.is-half-width {
+ box-sizing: border-box;
+ flex: 0 1 calc(50% - 2.5rem);
+}
- [name$='border-top'] {
- border-top: 1px solid var(--color-grey-10);
- margin-top: 3rem;
- }
+.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);
+ }
+}
- form {
- display: flex;
- flex-direction: column;
- }
+textarea {
+ height: 100px;
+}
+
+.content-box {
+
+ &.with-form {
- 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;
+ }
- input:not([type="search"]):not([type="file"]),
- textarea {
- border: 2px solid var(--color-input-background);
+ select {
+ display: none;
+ }
+}*/
- &:focus,
- &:active {
- border-bottom: 2px solid var(--color-input-active);
- }
- }
- textarea {
- height: 100px;
- }
- }
+/* WIDGETS SIB (let in .content-box to override default styles) */
- sib-form[set-user-id-select] {
+sib-form-auto-completion,
+hubl-status {
- input[type="submit"] {
- margin-left: 0;
- margin-top: 0;
+ .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);
}
- select {
- display: none;
+ .ss-arrow {
+ font-size: 1.8rem;
+ margin: 0 18px 0 0;
+
+ span {
+ border: solid var(--color-input-icon);
+ border-width: 0 2px 2px 0;
+ }
}
}
+ }
- /* CLASSES Peut-être à sortir de .content-box */
-
- .block.select-add-member>form { /* circle-profile */
- display: flex;
- flex-direction: row;
- margin-bottom: 2.6rem;
+ .ss-list {
+ color: var(--color-select-list);
+ font-weight: normal;
+ text-transform: none;
+ }
+}
- label {
- margin-top: 0;
+/* Additional styles for the select to add a member in circle-edit */
+.block.select-add>form {
+ display: block;
- >.ss-main {
- font-weight: normal;
- min-width: 35vw;
- text-transform: none;
+ @include breakpoint(lg) {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 2.6rem;
+ }
- >.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;
- }
- }
- }
+ label {
+ margin-top: 0;
+ }
- .ss-list {
- color: var(--color-select-list);
- }
- }
- }
+ .ss-main {
+ min-width: 35vw;
+ }
- >input[type='submit'] {
- @extend
- .button,
- .btn-margin-left,
- .text-bold,
- .text-uppercase,
- .button-complementary,
- .bordered;
- margin-top: auto;
- margin-bottom: auto;
- }
- }
+ input[type='submit'] {
+ @extend .button,
+ .text-bold,
+ .text-uppercase,
+ .button-complementary,
+ .bordered;
+ margin: 10px 0;
+ width: 100%;
- .form-container>form {
- margin-top: 2.7rem;
+ @include breakpoint(lg) {
+ margin: auto 0 auto 2.2rem;
+ width: auto;
}
-
- .form-edit>form {
-
- input[type='submit'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .reversed,
- .button-secondary,
- .bordered;
- margin-left: auto;
- margin-top: 3.2rem;
- }
+ }
+}
+/* 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;
}
- .form-label {
- /*flex: 1 1 auto;*/
- font-weight: 600;
-
- &.is-dark label {
- color: var(--color-label-dark);
- margin-top: 3rem;
+ &::-webkit-clear-button {
+ cursor: pointer;
+ margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+ margin-right: 5px;
+ }
- &>*:nth-child(2) {
- margin-top: 0.8rem;
- }
- }
+ &::-webkit-inner-spin-button {
+ display: none;
+ }
+ }
+}
- &.is-light label {
- color: var(--color-label-light);
- margin-top: 1.8rem;
- text-transform: uppercase;
+sib-form-file {
- &>*:nth-child(2) {
- margin-top: 0.8rem;
- }
- }
- }
+ label {
+ align-items: baseline;
+ clear: both;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ max-width: 100%;
- .is-full-width {
- flex: 1 1 100%;
- }
+ div {
+ width: 100%;
+ }
- .is-half-width {
- box-sizing: border-box;
- flex: 0 0 50%;
+ input[type='text'] {
+ box-sizing: border-box;
+ flex: 0 0 50%;
+ }
- &:nth-child(even) {
- padding-left: 1.7rem;
- }
+ input[type='file'] {
+ box-sizing: border-box;
+ flex: 0 0 20%;
+ color: var(--color-input-text);
+ cursor: pointer;
+ padding-left: 3rem;
+ }
+ }
+}
- &:nth-child(odd) {
- padding-right: 1.7rem;
- }
- }
+/*sib-multiple-select {
- /* WIDGETS SIB */
+ &.select-skills .ss-values .ss-disabled::before {
+ content: "Select skills";
+ }
- sib-form-auto-completion.member-select, hubl-status {
- align-self: flex-end;
+ sib-form-auto-completion > label {
+ display: flex;
+ flex-direction: column;
- >label:first-of-type>div {
- font-weight: 600;
- }
+ .ss-main {
+ font-weight: normal;
+ margin-bottom: 7.8rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+ text-transform: none;
- .ss-single-selected {
+ .ss-multi-selected {
+ align-items: center;
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);
- }
+ justify-content: flex-end;
+ min-height: 4.2rem;
+ padding-left: 1.2rem;
- .ss-arrow 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;
- }
- }
+ .ss-add {
+ font-size: 1.8rem;
+ margin: 0 18px 0 0;
- hubl-status {
- align-self: auto;
- }
-
- 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;
- }
+ span.ss-plus {
+ background: var(--color-input-icon);
- &::-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;
+ &::after {
+ background: var(--color-input-icon);
+ }
+ }
}
- }
- }
-
- sib-form-file {
-
- label {
- align-items: baseline;
- clear: both;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- max-width: 100%;
- div {
+ .ss-values {
+ background: transparent;
+ position: absolute;
+ top: 6rem;
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 {
+ .ss-disabled {
+ color: transparent;
+ font-size: 1.4rem;
+ left: calc(1.2rem - 5px);
+ position: absolute;
+ top: calc(-6rem + 7px);
- &.select-groups .ss-values .ss-disabled::before {
- content: "Sélectionne des groupes";
- }
-
- &.select-skills .ss-values .ss-disabled::before {
- content: "Select skills";
- }
+ &::before {
+ color: var(--color-grey-5);
+ font-weight: normal;
+ }
+ }
- 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;
+ .ss-value {
+ @extend .skill;
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-value-delete {
+ font-weight: normal;
}
}
-
- .ss-list {
- color: var(--color-input-text);
- }
}
}
+
+ .ss-list {
+ color: var(--color-input-text);
+ }
}
+ }
+}*/
- /* CUSTOM WIDGETS */
+/* CUSTOM WIDGETS */
- hubl-member-form {
- width: 100%;
+hubl-member-form {
+ width: 100%;
- form {
- display: flex;
- flex-direction: column;
+ form {
+ display: flex;
+ flex-direction: column;
- [name='member-form__input'] {
- margin-bottom: 1rem;
- }
+ [name='member-form__input'] {
+ margin-bottom: 1rem;
+ }
- sib-form-auto-completion {
- float: left;
- }
+ 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);
- }
- }
+ 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 e405d6fa09c2bf4b7a6ddce039e2890ca01dc0e2..c8634f80284c1a64932c2bf80a50a1d48ae21bd1 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: relative;
- z-index: 1;
+ position: fixed;
+ z-index: 999;
+ width: -webkit-fill-available;
+ width: -moz-available;
- #logo {
- flex: 1 1 0;
- }
-
- #search-bar {
+ @include breakpoint(lg) {
+ max-height: 83px;
+ height: 83px;
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;
- }
- }
+ }
+
+ &.is-spaced {
+ padding: 0 0.8rem;
+
+ @include breakpoint(lg) {
+ padding: 0 2.5rem;
}
}
- sib-notifications {
- color: var(--color-bell);
+ >*:not(:first-child) {
+ margin-left: 2rem;
- @include breakpoint(sm) {
- padding: 0;
+ @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;
+ }
+}
- details {
+/* General styling for both notification and user's panel */
+details {
+ margin-right: 0;
+ position: relative;
+
+ @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;
+ overflow-x: hidden;
+ position: fixed;
+ left: 0;
+ top: 4.5rem;
+ width: 100vw;
+
+ @include breakpoint(md) {
+ border: 0;
+ border-radius: 0;
+ }
+
+ @include breakpoint(lg) {
+ position: absolute;
+ left: auto;
+ right: 0;
+ top: 5.6rem;
+ width: 300px;
+ }
}
}
-
- #user-controls {
- padding: 0;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+}
+
+#user-controls {
+ padding: 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
- summary {
+ summary {
+ cursor: pointer;
+ display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+
+ @include breakpoint(lg) {
padding: 18px;
- cursor: pointer;
- display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+ }
+
+ &:focus {
+ background-color: transparent;
+ color: var(--color-user-panel-header-text-open);
+ outline: none;
- &:focus {
+ @include breakpoint(lg) {
background-color: var(--color-user-panel-header-background-open);
- color: var(--color-user-panel-header-text-open);
- outline: none;
}
}
-
- #user-controls__profile {
- div {
- display: flex;
- flex-direction: row-reverse;
-
- > * {
- vertical-align: middle;
- }
+ }
- hubl-user-avatar {
- align-items: center;
- background-color: var(--color-avatar-background);
- border-radius: 50%;
- display: flex;
+ #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;
- justify-content: center;
margin-right: 2rem;
- overflow: hidden;
width: 4.8rem;
-
- @include breakpoint(sm) {
- margin-right: 0;
- }
}
+ }
+
+ 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;
- img {
- background-color: white;
- height: 100%;
- object-fit: cover;
- object-position: center;
- width: 100%;
+ &::before {
+ margin-left: 1.5rem;
}
- object {
- height: 45%;
- width: 45%;
- }
-
- sib-display-value[name='first_name'] {
- @include icon('arrow-down');
- align-items: center;
+ @include breakpoint(lg) {
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;
+ }
+
+ #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;
- z-index: 1;
+ top: 0;
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;
- 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);
- }
+ 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%;
+ }
+
+ 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;
- }
+ }
+
+ &[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;
+.mobile-menu-icon {
- @include breakpoint(sm) {
- display: block;
- padding-left: 0;
- font-size: 26px;
- }
+ 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 29f394696d2848d2d4465a871bc797ed79f61105..97ca8578fe636714f9e2a5020a902b128d57f9ae 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: 1.8rem 0 1.4rem;
+ margin: 0 1.6rem;
+
+ @include breakpoint(lg) {
padding: 3rem;
+ margin: 0;
+ }
+
+ .mobile-sidebar-button {
+ float: right;
+ color: var(--color-secondary);
+ font-size: 1.8rem;
+ font-weight: bold!important;
- @include breakpoint(sm) {
- background: var(--color-grey-10);
+ &::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;
-
- &::before {
- font-size: 2.2rem;
- font-weight: normal;
- margin-right: 1.2rem;
+ /* For sib-display on project, circle, or private message view */
+ sib-display {
+ width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
+
+ 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;
- }
- }
- div {
+ .description {
+ color: var(--color-grey-4);
- .h1-aside {
- font-size: 1.8rem;
+ }
- &:not(:empty)::before {
+ .name {
color: var(--color-grey-4);
- content: ' - ';
- font-size: 2rem;
- font-weight: bold;
+ font-weight: normal;
}
}
+ }
+}
- .description {
- color: var(--color-grey-4);
-
- }
+.content-box__height {
+ min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
- .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;
+}
+
+.flex {
+ display: flex;
}
-.username {
+.desktop-button__end {
+ display: block;
- &::before {
- content: '@';
+ @include breakpoint(lg) {
+ display: flex;
+ justify-content: flex-end;
}
}
.space-between {
- display: flex;
justify-content: space-between;
- padding-bottom: 1.4rem;
-}
-.position-end {
- text-align: end;
+ &.with-padding {
+ padding-bottom: 1.4rem;
+ }
}
-.section {
- border-bottom: 1px solid var(--color-grey-10);
- padding: 4.5rem;
+.mobile-vertical-align {
+ flex-direction: column;
+
+ @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 a4b5459bfbcb56afc4579ce9d895150edaeb3221..4d6819201c46685d62207cc04e6255ca94909725 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>div {
+ .project-name {
+ box-sizing: border-box;
display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+ @include breakpoint(lg) {
+ width: 150px;
+ }
}
- .project-customer {
- font-weight: bold;
- width: 150px;
+ .project-customer,
+ .project-name>div {
+
+ @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 */
+ /* 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;
+ }
}
}
+ }
- hubl-counter {
- margin-top: 16px;
+ /* 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;
}
}
- /* End of specific styles of "Projects" tab */
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 2abc146eb63b3ce6c257e3471456267bc703c73a..e9171282a79d3cdb4d2a77851c7b9153f51db937 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;
-
- &.grey-color {
- background: var(--color-table-header-background);
- color: var(--color-table-header-text);
- }
+ .table-header {
+ display: table-header-group;
+ text-align: center;
+ vertical-align: middle;
+
+ &>div {
+ display: table-cell;
+ white-space: nowrap;
+ }
+ }
+
+ .table-body {
+ display: table-row-group;
+
+ &>div {
+ display: contents;
+
+ &>sib-display {
+ display: table-row;
+
+ &>div {
+ display: contents;
- >* {
- border-right: 1px solid var(--color-table-border);
- padding: 2.1rem 0;
- text-align: center;
- width:25%;
+ &>* {
+ border-bottom: 1px solid var(--color-table-border);
+ display: table-cell;
+ vertical-align: middle;
+ }
+ }
}
- >*:last-of-type {
- border-right: 1px solid --color-table-header-background;
+ &>sib-multiple {
+ display: contents;
+
+ &>div {
+ display: contents;
+
+ &>hubl-team-template-edit {
+ display: table-row;
+
+ &>* {
+ border-bottom: 1px solid var(--color-table-border);
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+ }
+ }
+ }
}
}
+ }
+}
- .table-body, .table-header {
+/* Styles of the table and its elements */
- >div:first-of-type>sib-display>div,
- hubl-team-template-edit[name='members'] {
- display: flex;
- border-left: 1px solid var(--color-table-border);
- }
+.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);
+}
- .border {
- border-bottom: 1px solid var(--color-table-border);
- border-right: 1px solid var(--color-table-border);
- }
+.table-header {
+ font-size: 1.6rem;
+ font-weight: 600;
- .cell {
- text-align: center;
- word-wrap: break-word;
- white-space: nowrap;
- }
+ &.grey-color {
+ background: var(--color-table-header-background);
+ color: var(--color-table-header-text);
+ }
- .w25 {
- width: 25%;
- }
+ >*:not(:last-child) {
+ border-right: 1px solid var(--color-white);
+ padding: 2.1rem 0;
+ text-align: center;
+ }
+}
- .w33 {
- width: 33.3333%;
- }
+.table-body,
+.table-header {
- .w50 {
- width: 50%;
- }
+ .border {
+ border-right: 1px solid var(--color-table-border);
+ }
+}
- .w66 {
- width: 66.6666%;
- }
+.table-body,
+.table-header {
- .w75 {
- width: 75%;
- }
+ /* Fix. Could disappear when we can add .class on set fields */
+ [name^='cell-1'] {
+ @extend .w280;
+ @extend .border;
+ }
- .hashtag::before {
- content: '#';
- }
- }
+ .w280 {
+ width: 280px;
+ }
- .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;
- }
- }
- }
+ .w70 {
+ width: 70px;
+ }
- .cell-with-name {
- color: var(--color-secondary);
- font-weight: 600;
- padding-top: 2.5rem;
- }
+ .w262 {
+ width: 262px;
+ }
+
+ .W152 {
+ width: 152px;
+ }
+
+ .w355 {
+ width: 355px;
+ }
- sib-multiple {
- display: flex;
- align-items: center;
- justify-content: center;
+ .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;
}
+ }
+}
- .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;
+.cell-with-name {
+ color: var(--color-secondary);
+ font-weight: 600;
+ padding-left: 2rem;
+ text-align: left;
+}
- >.user-thumb__picture {
- @extend %user-thumb__picture;
- }
+/* Styles of elements inside cells */
- >[name='sup'] {
- @extend %user-thumb__grid-sup;
+.user-thumb>div,
+[name='user-thumb'] {
+ vertical-align: middle;
+ text-align: left;
+ @extend %user-thumb__grid;
+ padding: 0 2.2rem;
- .user-thumb__name {
- @extend %user-thumb__name;
- }
+ >.user-thumb__picture {
+ @extend .user-thumb__picture;
+ }
- .user-thumb__groups {
- @extend %user-thumb__groups;
- }
- }
+ >[name='sup'] {
+ @extend %user-thumb__grid-sup;
+ }
- >[name='sub'] {
- @extend %user-thumb__grid-inf;
+ >[name='sub'] {
+ @extend %user-thumb__grid-inf;
+ }
+}
- >.user-thumb__username:not(:empty) {
- @extend %user-thumb__username;
- }
+.table sib-ac-checker {
+ text-align: center;
+}
- >.user-thumb__city:not(:empty) {
- @extend %user-thumb__city;
- }
- }
- }
+.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;
+ }
- sib-ac-checker {
- align-items: center;
- display: flex;
- justify-content: center;
- }
+ &.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 8f519c48593ac1e7384cf57abde95e4c051f0b76..254109916199c15f24ec99d96fe06de22409d541 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 30de5d0d1e8c9c6cb83bcff0f57334fcf6f923b3..d13f842f1b99575eb21e9cc9d18e37faa07730aa 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 1004736e9aa52ea9b533725ce3bdeb80bd601532..e476d53442f4d58a622f6be73c055327fde34a20 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 12b29e5d4cc2cbf636c507e860a4d8b2a38b4631..0000000000000000000000000000000000000000
--- 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 682f3c7232fdf82b7c7f84cfb51f815a8cfc0de3..6e4d13a0ce3cfee358c9e649fb6f2a7f9ba68358 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 e1f5f735269e4b13f74fad3d1d43f92261f18fc2..018d780a23ad1b5bfe73882619edfc3487b0e59d 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 51320443f50944d205a685bbdda0882e6f8fe007..14583599d316febcf6d45501c552e59af42e1e18 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 3de89ec8870cc3a80f7263f482088e50f94ecf62..0000000000000000000000000000000000000000
--- 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 d3241dc9d038b5cd64c1c91bae669188d614a649..0000000000000000000000000000000000000000
--- 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 4afb54ad3b3acd92588d18daf6a362890b1729ff..0000000000000000000000000000000000000000
--- 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 5a9316454388c6ade93b620599ea291a93aa268b..0000000000000000000000000000000000000000
--- 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 b38c2184f609b6242135850063e46a233ee2dfe2..0000000000000000000000000000000000000000
--- 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 f15713e8ccc2514c5770a690d525557dc04d2be3..5158e8e537a4caea276c4cecdb76ae42c160ab85 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 ddf18e73385e402248e23729a7b25b76f9b7cbcb..0000000000000000000000000000000000000000
--- 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 4e9971bf4618d64cad37df8c629688954450e7a3..fa0a8dbbe55f41394fd476113f62bb1fdb12068f 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 f985788c2fc9d135d533536ec7c57b7e6effeb3b..e02fd4a27affc3befb85e884c9837aa6ef711fbd 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 07abe0b5d4d230bfa8f720ca6bca43772e8852a5..0000000000000000000000000000000000000000
--- 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 ? `<span>Immatriculation de l'entreprise : </span> ${await value.companyRegister}` : ``}
- li ${await value.address ? `<span>Adresse : </span><br/><p>${await value.address}</p>`: ``}
- div
- h3 Contact :
- ul
- li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""}
- li
- span(class='link-color norm-weight mdi-email-outline')
- a(href='mailto:${await value.email}') ${await value.email}
- span ${await value.phone ? `<li><span class='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}
diff --git a/src/templates/hubl-groups.pug b/src/templates/hubl-groups.pug
deleted file mode 100644
index 49bd446735db8c9da87f40c6a2016c2af163be59..0000000000000000000000000000000000000000
--- 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 6d47d274d971d8e8e84d49b4830fb0282a1fbe27..f00ddca63e735ae782426197bd5fe69386cb6224 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 70f19bf22974141fc0fc22bce0522324c0d1d9e1..5883464edbef1ab2bdcb17a46b3f59a8fdded597 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'
- 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'
+ class-status='form-label is-light is-full-width color'
+ class-name='form-label is-light is-full-width input-text-like'
+ class-description='form-label is-light is-full-width input-text-like'
+ label-status='Statut du canal'
label-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 1079379033c5c54ae952de8707fe7fc2e410c7ae..47278b60b5316dcbc0786ed8a594c998e9ece4b5 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 6ef4939683f98a0c8a3e64b509af12cc60c19292..3a8bc3a4c76f06d93a725a05e9e1511f8a437460 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 c9fa9b23005ac037957eb4a35596659f29994707..c263c4e9d5ec4d82cb408e059c8011a094622377 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 ab580b55741fec8763dd95e1be8390207b66c24c..a90d8c7fbd6a5ff0d137c59dc8f42db73f66a093 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 61fddece0b67862c4ac491fec66f4534fa08a52a..519874947f25697e5341b588c6b8bb7071f1c632 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 2aed94bf5fb8ac89b51dc17da2bb5408db236675..bae8156002b1faf3df10fbd4bee765e0b9b001e6 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'
-
- 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'
-
- label-actions='Edit'
- action-actions='admin-users-edit'
- class-actions='w25 cell border cell-with-buttons'
- widget-actions='hubl-sib-action-custom'
-
- order-by='username'
- )
-
-
- #admin-users-create(hidden)
+ .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='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='w70 border cell-with-buttons'
+ widget-actions='hubl-sib-action-custom'
+
+ order-by='username'
+ )
+
+
+ #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 6663158043fd43bff3a9990d298c466075222d18..89e2b8fa00ba311efc912a1399719d156f490e55 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 098c61a0cbae2e80617eaece54ba6c8c1159d433..8ad8fe8996cc8bc8fab4f206ced64d18bcb54cc4 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 <sib-link next="admin-circle-list">administration</sib-link> ou contacte un administrateur.
diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug
index 2c583fb184690466486dce14386e70553ae5b45a..7f9688172a6e90e0a3888c29572f2a41d9f277f0 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 cd2c4c2808993a6e3193e576a2f37d9636e6ffa0..c7aed59f59195398c5be999e1131d0aa4b440114 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 148014544372cc1d4833407e44b3d8eeb369ae23..e87de384fceacf58a47fbe8d10f7181af66c2d58 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 beb548c0d9ef183d8999d80237ecd1add485ddb2..71135fc9d96ca92b95a1931befe65914970a75e5 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 <sib-link next="admin-project-list">administration</sib-link> et demande une invitation.
diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug
index 69a04f033352ff91e7f13f7a006d1c372c051b1a..c734a1890d174c4c5af6823a3ef5d77b90ce661e 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