diff --git a/config.sample.json b/config.sample.json
index dd243e89e1fbcd261fba5a97bda0b8bf72810f1e..c506d053b14bc17c4facd396a9fe1bfa67098b28 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -10,6 +10,7 @@
"groups": "http://localhost:8000/groups/",
"joboffers": "http://localhost:8000/job-offers/",
"projects": "http://localhost:8000/projects/",
+ "customers": "http://localhost:8000/customers/",
"skills": "http://localhost:8000/skills/",
"users": "http://localhost:8000/users/"
}
diff --git a/src/header.pug b/src/header.pug
index 2c2ec9864e07ce12df24ef33ac96fb0a6bc3f8c3..ff59b10fb1d9020ddc4165358e4c3c93292a2552 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -14,7 +14,7 @@ sib-notifications(
include templates/hd-user-avatar.pug
-details#user-controls
+details#user-controls.notLoggedIn
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
fields='firstName, account.picture'
@@ -26,6 +26,8 @@ details#user-controls
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
+button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
+
sib-auth
sib-auth-provider(
data-authority=`${authority}`
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 44880da5d950b0b17b7a422686ef3e6601001247..e5fec8231047df17cec3987f08fa60812253b14a 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -7,7 +7,7 @@ sib-widget(name='hd-create')
p.create You are not part of any ${value} yet. To create a new one, you can go to the
sib-link(next='admin') administration panel
-nav#main__menu
+nav#main__menu.jsLeftMenu
sib-router#navbar-router(default-route='members')
//- sib-route.menu(name='members')
//- div.menu-label Members
@@ -19,10 +19,11 @@ nav#main__menu
//- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider
- //- div.menu-wrapper
+ //- div
//- div.menu
//- div.menu-chevron
- //- div.menu-icon.icon-arrow-up
+ //- sib-link(next='admin-project-list')
+ //- div.menu-icon.icon-arrow-right
//- div.menu-label Projects
//- div.menu-icon.icon-folder-alt
//- sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
@@ -44,7 +45,7 @@ nav#main__menu
//- order-by='customer.name'
//- next='project'
//- )
- div.divider
+ //- div.divider
div
div.menu
div.menu-chevron
diff --git a/src/page-admin-projects-create.pug b/src/page-admin-projects-create.pug
index 7a360802fe09556846e3e2a79787b4d9852f78fc..3ea8961c4f68d1f7c4b739caaa701a06e742c332 100644
--- a/src/page-admin-projects-create.pug
+++ b/src/page-admin-projects-create.pug
@@ -21,29 +21,24 @@ div.content-box__info
sib-form.block(
data-src=`${endpoints.projects}`
- fields='line-1(customer.name, name), line-2(customer.logo), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-customer, line-5(customer.companyRegister), line-6(customer.address), line-7(customer.firstName, customer.lastName), line-8(customer.role), line-9(customer.email, customer.phone), fieldset-captain, line-10(captain)'
+ fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
class-fieldset-fee='fieldset'
value-fieldset-fee='Fee'
widget-fieldset-fee='hd-template-project-title'
- class-fieldset-customer='fieldset'
- value-fieldset-customer='Customer\'s information'
- widget-fieldset-customer='hd-template-project-title'
-
class-fieldset-captain='fieldset'
value-fieldset-captain='Captain'
widget-fieldset-captain='hd-template-project-title'
- label-customer.name='Customer\'s name*'
- class-customer.name='form-label is-light is-half-width'
+ label-customer='Customer'
+ class-customer='member-select form-label is-light is-half-width'
+ range-customer=`${endpoints.customers}`
+ widget-customer='sib-form-auto-completion'
label-name='Project\'s name*'
class-name='form-label is-light is-half-width'
- label-customer.logo='Customer\'s logo'
- class-customer.logo='form-label is-light is-half-width'
-
label-project.description='Project description'
class-project.description='form-label is-light is-full-width'
widget-project.description='sib-form-textarea'
@@ -54,28 +49,6 @@ div.content-box__info
label-businessProvider.fee='Amount of the contribution'
class-businessProvider.fee='form-label is-light is-half-width'
- label-customer.companyregister='Company register'
- class-customer.companyregister='form-label is-light is-half-width'
-
- label-customer.address='Address'
- class-customer.address='form-label is-light is-full-width'
- widget-customer.address='sib-form-textarea'
-
- label-customer.firstName='Name of the contact'
- class-customer.firstName='form-label is-light is-half-width'
-
- label-customer.lastName='Firstname of the contact'
- class-customer.lastName='form-label is-light is-half-width'
-
- label-customer.role='Role within the company'
- class-customer.role='form-label is-light is-half-width'
-
- label-customer.email='Email'
- class-customer.email='form-label is-light is-half-width'
-
- label-customer.phone='Phone'
- class-customer.phone='form-label is-light is-half-width'
-
range-captain=`${endpoints.users}`
class-captain='member-select form-label is-light is-half-width'
widget-captain='sib-form-auto-completion'
diff --git a/src/page-admin.pug b/src/page-admin.pug
index 2dd6834a72767f5e70b03105b16516a4743b78aa..049e6ca0e78d68aede56e5dc3de5deebbfb7f719 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
#admin-circles(hidden)
include page-admin-circles.pug
#admin-projects(hidden)
@@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation')
sib-route(name='admin-circles')
li
a Circles
- sib-route(name='admin-projects')
- li
- a Projects
+ //- sib-route(name='admin-projects')
+ //- li
+ //- a Projects
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 2a7bab0224fafbbbb8ad549f72ecd9d7e37d3311..f4f0c6a2dca4f55a7d8c0c5d8e369999ae14eb64 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -3,7 +3,7 @@ div.content-box__info
include templates/hd-user-avatar.pug
sib-widget(name='hd-user-groups')
- template ${value.name}
+ template ${await value.name}
sib-widget(name='team-template-edit')
template
@@ -41,7 +41,7 @@ div.content-box__info
sib-ac-checker(permission='acl:Write', bind-resources)
h1 Edit your circle
- sib-form.block.circle-edit-form(
+ sib-form.block.form-edit(
bind-resources
fields='block-circle__info(name, owner), description'
@@ -65,7 +65,7 @@ div.content-box__info
h2 Members list
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
- sib-form.block.team-form(
+ sib-form.block.select-add-member(
bind-resources
nested-field='members'
fields='user'
@@ -84,7 +84,7 @@ div.content-box__info
div Name
div Access
- //-class='table-body'
+ //-class='table-body'
sib-display(
class='table-body'
bind-resources
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index eb36bfcf4cac66efb6edb92c50c899d421319acf..cd4e302245d669c83414fa2c045a70f80be1becc 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden)
sib-display.block(
bind-resources
- fields='members.user'
+ fields='members'
- multiple-members.user=''
- widget-members.user='circle-team-template'
+ multiple-members=''
+ widget-members='circle-team-template'
)
div.box-button
diff --git a/src/page-circle.pug b/src/page-circle.pug
index 36a443b3b0ac458f1156e81cd15253ad6c6afad6..e938ee36fd8a1a0934bef96d95adb6a8fc885bc0 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
.content-box.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
@@ -9,6 +9,7 @@
class-name='h1-like'
class-description='h1-aside description'
)
+ button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden)
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 19a0dc17b6d2bc21b22bfd7fb6916560b84cd06f..2a5be6c7efe7e598e5460867c701622435c24071 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,89 +1,70 @@
div.content-box__info
- include templates/hd-user-avatar.pug
+ include templates/hd-user-avatar.pug
- sib-widget(name='hd-fieldset-title')
- template
- label ${label}
+ sib-widget(name='hd-fieldset-title')
+ template
+ label ${label}
- sib-link(class='backlink', bind-resources, next='project-profile') Back
-
- h1 Edit your project
-
- sib-form.form-container.block(
- bind-resources
-
- fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)'
-
- class-customer.name='form-label is-light is-half-width'
- class-name='form-label is-light is-half-width'
- class-customer.logo='form-label is-light is-full-width'
- class-description='form-label is-light is-full-width'
- label-fieldset-info=''
- label-customer.name='Customer\'s name'
- label-name='Project\'s name*'
- label-customer.logo='Customer\'s logo'
- label-description='Project description'
- upload-url-customer.logo=''
- widget-fieldset-info='hd-fieldset-title'
- widget-description='sib-form-textarea'
-
- class-fieldset-fee='fieldset'
- class-businessprovider='form-label is-light is-half-width'
- class-businessproviderfee='form-label is-light is-half-width'
- label-fieldset-fee='Fee'
- label-businessprovider='Business provider'
- label-businessproviderfee='Amount of the contribution'
- widget-fieldset-fee='hd-fieldset-title'
-
- class-fieldset-customer='fieldset'
- class-customer.companyregister='form-label is-light is-half-width'
- class-customer.address='form-label is-light is-half-width'
- class-customer.firstname='form-label is-light is-half-width'
- class-customer.lastname='form-label is-light is-half-width'
- class-customer.role='form-label is-light is-half-width'
- class-customer.email='form-label is-light is-half-width'
- class-customer.phone='form-label is-light is-half-width'
- label-fieldset-customer='Customer\'s information'
- label-customer.companyregister='Company register*'
- label-customer.address='Address'
- label-customer.firstname='Name of the contact at the customer\'s premises'
- label-customer.lastname='Firstname of the contact at the customer\'s premises'
- label-customer.role='Role within the company'
- label-customer.email='Email'
- label-customer.phone='Phone'
- widget-fieldset-customer='hd-fieldset-title'
-
- submit-button='Save'
- )
-
- h2 Members List
-
- sib-form.block.team-form(
- bind-resources
- nested-field='members'
- fields='user'
- range-user=`${endpoints.users}`
-
- class-user='team form-label is-dark'
- label-user=''
- widget-user='sib-form-auto-completion'
-
- submit-button='Add a member'
- )
-
- .table
-
- div.table-header.grey-color
- div Name
- div Access
-
- //-class='table-body'
- sib-display(
- class='table-body'
- bind-resources
- fields='members'
-
- multiple-members=''
- widget-members='team-template-edit'
- )
+ sib-link(class='backlink', bind-resources, next='project-profile') Back
+
+ h1 Edit your project
+
+ sib-form.block.form-edit(
+ bind-resources
+
+ fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
+
+ class-customer='member-select form-label is-light is-half-width'
+ widget-customer='sib-form-auto-completion'
+ class-name='form-label is-light is-half-width'
+ class-description='form-label is-light is-full-width'
+ label-fieldset-info=''
+ label-customer='Customer'
+ range-customer=`${endpoints.customers}`
+ label-name='Project\'s name*'
+ label-description='Project description'
+ widget-fieldset-info='hd-fieldset-title'
+ widget-description='sib-form-textarea'
+
+ class-fieldset-fee='fieldset'
+ class-businessprovider='form-label is-light is-half-width'
+ class-businessproviderfee='form-label is-light is-half-width'
+ label-fieldset-fee='Fee'
+ label-businessprovider='Business provider'
+ label-businessproviderfee='Amount of the contribution'
+ widget-fieldset-fee='hd-fieldset-title'
+
+ submit-button='Save'
+ )
+
+ h2 Members List
+
+ sib-form.block.select-add-member(
+ bind-resources
+ nested-field='members'
+ fields='user'
+ range-user=`${endpoints.users}`
+
+ class-user='team form-label is-dark'
+ label-user=''
+ widget-user='sib-form-auto-completion'
+
+ submit-button='Add a member'
+ )
+
+ .table
+
+ div.table-header.grey-color
+ div Name
+ div Access
+
+ //-class='table-body'
+ sib-display(
+ class='table-body'
+ bind-resources
+ fields='members'
+
+ multiple-members=''
+ widget-members='team-template-edit'
+ )
diff --git a/src/page-project.pug b/src/page-project.pug
index 00ec69a01923e474e6f68f66f92b66708dfe69c0..ae2e06cacc3c73c1b1c04eb36d1aa58f4a53332a 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
.content-box.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
@@ -13,6 +13,9 @@
value-const-title1='N°'
)
+ .mobile-sidebar-button.jsMobileSidebarOpenButton
+ button.icon-arrow-left-circle
+ span MENU
div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden)
diff --git a/src/scripts/index.js b/src/scripts/index.js
index b50faf00155e02afa1a62c0b4f79059e0834863d..ea626227ad779c21a62a3f5a71b7b433a98ddd1e 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -48,14 +48,33 @@ function closeUserControls() {
if (userControls) userControls.removeAttribute("open");
}
+function closeLeftMenu() {
+ let leftMenu = document.querySelector('#main__menu');
+ if (leftMenu) leftMenu.removeAttribute("open");
+}
+
+function closeRightMenu() {
+ let rightMenu = document.querySelectorAll('.jsRightMenu');
+ if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) {
+ Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+ Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
+ }
+}
+
+function openRightMenu() {
+ let rightMenu = document.querySelectorAll('.jsRightMenu');
+ Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
+ Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+}
+
document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
- const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
- const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
//- View change event
- // window.addEventListener('navigate', (event) => {
- // });
+ window.addEventListener('navigate', (event) => {
+ closeLeftMenu();
+ closeUserControls();
+ });
//- Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
@@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
});
- //- Open/close menu on the right
- rightMenus.forEach(rightMenu => {
- const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-
- btnRightMenu.addEventListener('click', e => {
- rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
- viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
- })
- });
-
//- Watch every sib-forms & update data-src of linked sib-display
- document.querySelectorAll('sib-form').forEach(function(el) {
- el.addEventListener("save", function(event) {
+ document.querySelectorAll('sib-form').forEach(function (el) {
+ el.addEventListener("save", function (event) {
//clear cache on this resource
//NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
- if(el.component.resource != null) el.component.resource.clearCache();
+ if (el.component.resource != null) el.component.resource.clearCache();
// if of the edited resource || id of the container of the created resource
const resourceId = event.detail.resource['@id'] || el.dataset.src;
//update all displays which use this resource
Array.from(document.querySelectorAll('sib-display'))
- .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
- .forEach(e => e.dataset.src = e.dataset.src); // and update them
+ .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
+ .forEach(e => e.dataset.src = e.dataset.src); // and update them
});
});
document.querySelector('sib-auth').getUser().then(user => {
if (user !== null) {
+ document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
// Hide login button if already logged
document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
// Set current user id on set-user-id of sib-display
@@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) {
// Document -> close menu
document.addEventListener("click", event => {
- if (!event.target.closest('#user-controls')) closeUserControls();
+ if (!event.target.closest('#user-controls')) {
+ closeUserControls();
+ }
+ if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
+ closeLeftMenu();
+ }
+ if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
+ closeRightMenu();
+ }
+ });
+
+ document.querySelector('#toggleMainMenu').addEventListener('click', event => {
+ let leftMenu = document.querySelector('#main__menu');
+ if (leftMenu.hasAttribute('open')) {
+ closeLeftMenu();
+ } else {
+ leftMenu.setAttribute('open', '');
+ }
+ });
+
+ Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
+ el.addEventListener('click', event => {
+ openRightMenu();
+ });
+ });
+
+ const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
+ rightMenus.forEach(rightMenu => {
+ const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
+ btnRightMenu.addEventListener('click', e => {
+ if (rightMenu.hasAttribute('open')) {
+ closeRightMenu();
+ } else {
+ openRightMenu();
+ }
+ })
});
// listen for keypress
document.onkeydown = (e) => {
e = e || window.event;
- if (e.key === "Escape" || e.key === "Esc") closeUserControls();
+ if (e.key === "Escape" || e.key === "Esc") {
+ closeUserControls();
+ closeLeftMenu();
+ closeRightMenu();
+ }
};
});
\ No newline at end of file
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 741219e31331057b1547a2dc770bf07e939f4aae..3ff49c71aba1d32c7d47059435d5e1728f1a51c7 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -1,4 +1,58 @@
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow;
background-color: $background;
-}
\ No newline at end of file
+}
+
+@mixin breakpoint($min: 0, $max: 0) {
+ $type: type-of($min);
+
+ @if $type==string {
+ @if $min==xs {
+ @media (max-width: 768px) {
+ @content;
+ }
+ }
+
+ @else if $min==sm {
+ @media (max-width: 1024px) {
+ @content;
+ }
+ }
+
+ @else if $min==md {
+ @media (max-width: 1200px) {
+ @content;
+ }
+ }
+
+ @else if $min==lg {
+ @media (min-width: 1201px) {
+ @content;
+ }
+ }
+
+ @else {
+ @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
+ }
+ }
+
+ @else if $type==number {
+ $query: "all" !default;
+
+ @if $min !=0 and $max !=0 {
+ $query: "(min-width: #{$min}) and (max-width: #{$max})";
+ }
+
+ @else if $min !=0 and $max==0 {
+ $query: "(min-width: #{$min})";
+ }
+
+ @else if $min==0 and $max !=0 {
+ $query: "(max-width: #{$max});"
+ }
+
+ @media #{$query} {
+ @content;
+ }
+ }
+}
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 3dff76e63cf7b53b4e18491886fd32b7c4f0cb0c..388f1978e6fcc7272c64f791d630beb7a708a706 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -100,11 +100,13 @@
/* CLASSES Peut-être à sortir de .content-box */
- .block.team-form>form { /* circle-profile */
+ .block.select-add-member>form { /* circle-profile */
display: flex;
flex-direction: row;
+ margin-bottom: 2.6rem;
label {
+ margin-top: 0;
>.ss-main {
font-weight: normal;
@@ -149,7 +151,24 @@
.form-container>form {
margin-top: 2.7rem;
- }
+ }
+
+ .form-edit {
+
+ >form {
+
+ input[type='submit'] {
+ @extend .button,
+ .text-bold,
+ .text-uppercase,
+ .reversed,
+ .button-dark,
+ .bordered;
+ margin-left: auto;
+ margin-top: 3.2rem;
+ }
+ }
+ }
.form-label {
/*flex: 1 1 auto;*/
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 51cc2afd24f3c6492a833b6187ce138364cb0d7d..850e1daa6ae8a6279697360f6f95b14b726e0534 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -8,13 +8,10 @@
display: flex;
flex-shrink: 0;
// padding: 1.6rem 0.64rem;
+ padding: 0 2.5rem;
position: relative;
z-index: 1;
- > *:not(sib-widget) {
- padding: 0 2.5rem;
- }
-
#logo {
flex: 1 1 0;
}
@@ -58,9 +55,24 @@
}
}
}
+
+ .notLoggedIn {
+ visibility: hidden;
+ }
+
+ sib-notifications {
+
+ @include breakpoint(sm) {
+ padding: 0;
+ }
+ }
details {
margin-right: 2.5rem;
+
+ @include breakpoint(sm) {
+ margin-right: 0;
+ }
summary {
@@ -142,6 +154,10 @@
margin-right: 2rem;
overflow: hidden;
width: 4.8rem;
+
+ @include breakpoint(sm) {
+ margin-right: 0;
+ }
}
img {
@@ -168,6 +184,10 @@
&::before {
margin-left: 1.5rem;
}
+
+ @include breakpoint(sm) {
+ display: none;
+ }
}
}
}
@@ -236,5 +256,15 @@
}
}
}
+
+ .mobile-menu-icon {
+ display: none;
+
+ @include breakpoint(sm) {
+ display: block;
+ padding-left: 0;
+ font-size: 26px;
+ }
+ }
}
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 4afff70dc4dad3c03a9f72794161213b68138e8b..4aae4ef524a21ae5b44083bedbb36c1b55af3486 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -22,16 +22,68 @@ $breakpoints: (phone: 480px,
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;
- flex-direction: row;
- max-width: 100%;
+ overflow: hidden;
+ height: calc(100vh - 83px); /* 83px = height of the header */
+ position: relative;
+ width: 100%;
+
+ backface-visibility: hidden;
+ /*will-change: overflow;*/
}
}
+/* Add scrollbar to the left and right menu, and to the content */
+nav, .views-container {
+ overflow: auto;
+ height: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: none;
+}
+
+/* Custom scrollbar of the left-menu */
+nav {
+ scrollbar-width: thin;
+ scrollbar-color: $color-244-10-70 $color-233-18-29;
+
+ &::-webkit-scrollbar-track {
+ background: $color-233-18-29;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: $color-244-10-70;
+ border-radius: 6px;
+ border: 3px solid $color-233-18-29;
+ }
+
+ &::-webkit-scrollbar {
+ width: 11px;
+ }
+}
+
+/* Custom scrollbar of the content */
+.views-container {
+ scrollbar-width: thin;
+ scrollbar-color: $color-244-10-70 white;
+
+ &::-webkit-scrollbar-track {
+ background: white;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: $color-244-10-70;
+ border-radius: 6px;
+ border: 3px solid white;
+ }
+
+ &::-webkit-scrollbar {
+ width: 11px;
+ }
+}
/* Quick fix. Will be removed later */
#admin-circles,
@@ -40,7 +92,6 @@ $breakpoints: (phone: 480px,
}
-
img {
max-height: 100%;
max-width: 100%;
@@ -148,6 +199,35 @@ h5 {
border-bottom: 1px solid $color-221-51-90;
padding: 3rem;
+ @include breakpoint(sm) {
+ background: $color-221-51-90;
+ }
+
+ sib-display {
+ @include breakpoint(sm) {
+ float: left;
+ }
+ }
+
+ .mobile-sidebar-button {
+ @include breakpoint(sm) {
+ float: right;
+ color: $color-233-18-29;
+ font-size: 1.8rem;
+ font-weight: bold!important;
+
+ &::before {
+ font-size: 2.2rem;
+ font-weight: normal;
+ margin-right: 1.2rem;
+ }
+ }
+
+ @include breakpoint($min: 1025px, $max: 0) {
+ display: none;
+ }
+ }
+
div {
.h1-aside {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 9848525efa7c455b8a429083dc0ccd4f456852a0..1256a05985192239f308db82efdc83f3e4d1f7bf 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -121,32 +121,6 @@
hd-counter {
margin-top: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- background-color: $color-233-20-17;
- box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
-
- sib-set-default[name='project'] {
- background-color: $color-233-20-17;
- color: $color-218-100-98;
- /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
- z-index: 1000;
-
- .project-customer,
- .project-name {
- width: auto;
- }
-
- .project-name {
- font-weight: normal;
- }
- }
-
- hd-counter {
- display: none;
- }
}
}
/* End of specific styles of "Projects" tab */
@@ -214,4 +188,25 @@
background-color: $color-213-13-86;
}
}
+
+ &.jsLeftMenu {
+
+ @include breakpoint(sm) {
+ display: none;
+ }
+ }
+
+ &.jsLeftMenu[open] {
+
+ @include breakpoint(sm) {
+ 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;
+ }
+ }
}
diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index 6b5b0bee9a01559071acc4a56be2ecff1e2faea8..af42ed736548151cc45ca120abe3a22101c10703 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -2,6 +2,7 @@
#circle-edit,
#admin-circle-list,
#admin-circle-create,
+#project-edit,
#admin-project-list,
#admin-project-create {
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 1e93db51e8496ee792efa86c529b4055e2272728..8b90344885e5aae725ad0c2e638a9f32ceab2e15 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -12,11 +12,13 @@
.views-container {
flex: 1 0 0;
- -webkit-backface-visibility: hidden;
+ /*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed {
- margin-left: -15.5rem;
- transform: translate(15.5rem);
+ @include breakpoint(769px, 0) {
+ margin-left: -15.5rem;
+ transform: translate(15.5rem);
+ }
}
}
@@ -27,6 +29,7 @@
nav {
background: $color-210-25-95;
transition: all 0.5s;
+ width: 25rem;
>sib-router {
background-color: $color-222-52-90;
@@ -49,13 +52,13 @@
margin: 0;
padding: 2.15rem 2.55rem;
position: relative;
- width: 12em;
+ /*width: 12em;*/
&::before {
float: left;
font-size: 4rem;
margin-left: 0;
- margin-right: 2.55rem;
+ margin-right: 2.85rem;
}
}
@@ -110,12 +113,34 @@
}
}
- &.offsite-is-closed {
+ &.jsRightMenu {
+
+ @include breakpoint(sm) {
+ display: none;
+ }
+ }
+
+ &.jsRightMenu:not([open]) {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
}
+
+ &.jsRightMenu[open] {
+
+ @include breakpoint(sm) {
+ display: block;
+ background: $color-221-51-90;
+ bottom: 0;
+ box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
+ min-width: 60%;
+ position: fixed;
+ right: 0;
+ top: 83px;
+ z-index: 1;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss
index 8ef02997881b46beda26d162828ec3c65191a9a2..940c5fc0dc0972d06f1046b67e416bef541e3aa3 100644
--- a/src/styles/layout/circle/_index.scss
+++ b/src/styles/layout/circle/_index.scss
@@ -1,4 +1,3 @@
@import 'circle';
@import 'circle-profile';
-@import 'circle-edit';
@import 'circle-admin';
diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss
deleted file mode 100644
index c1e26833e7953d0baa4590e353559d6f25d3167f..0000000000000000000000000000000000000000
--- a/src/styles/layout/circle/circle-edit.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-#circle-edit {
-
- .circle-edit-form>form {
-
- input[type='submit'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .reversed,
- .button-dark,
- .bordered;
- margin-left: auto;
- margin-top: 3.2rem;
- }
- }
-
- /*.table-header {
- background: $color-228-25-79;
- color: white;
- display: flex;
- font-size: 1.6rem;
- font-weight: 600;
- justify-content: space-around;
- text-align: center;
-
- >*{
- border-right: 1px solid white;
- flex: 1;
- padding: 1rem;
- width: 50%;
- }
-
- >*:last-of-type {
- border-right: 1px solid $color-228-25-79;
-
- @media (max-width: 1220px) {
- display: none;
- }
- }
- }*/
-
- /*.table-body div team-template-edit {
- display: flex;
- justify-content: space-between;
-
- >* {
- border-bottom: 1px solid $color-228-25-79;
- flex: 1;
- width: 50%;
- }
-
- sib-display {
- border-left: 1px solid $color-228-25-79;
- padding: 0 2.2rem;
- }
-
- sib-ac-checker {
- align-items: center;
- border-left: 1px solid $color-228-25-79;
- border-right: 1px solid $color-228-25-79;
- display: flex;
- justify-content: flex-end;
- padding: 2.7rem 2.2rem;
-
- @media (max-width: 1220px) {
- display: none;
- }
- }
- }*/
-
- .member-select.color {
-
- .ss-main {
- color: $color-233-18-29;
- }
- }
-
- /*sib-multiple[widget='team-template-edit'] {
-
- label {
- display: none;
- }
-
- >div>team-template-edit>sib-display>div {
- display: grid;
- grid-column-gap: 1.6rem;
- grid-template-columns: 7vh auto;
- grid-template-rows: repeat(2, 5.2vh);
-
- >[name$='account.picture'] {
- align-items: center;
- align-self: center;
- background-color: $color-213-20-91;
- 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%;
- }
- }
-
- >[name='sup'] {
- align-self: end;
- display: flex;
- grid-column: 2 / span 1;
- grid-row: 1 / span 1;
- margin-bottom: 0.50rem;
-
- [name$='name'] {
- font-weight: 600;
- margin-right: 1rem;
- }
-
- sib-multiple {
- display: flex;
-
- [name='groups'] {
- @extend %tag-role;
- }
- }
- }
-
- >[name='sub'] {
- align-self: start;
- grid-column: 2 / span 1;
- grid-row: 2 / span 1;
- margin-top: 0.50rem;
-
- >[name$='profile.city']:not(:empty) {
- @include mdi('atom');
- align-items: center;
- display: flex;
-
- &::before {
- color: $color-43-100-50;
- margin-right: 0.50rem;
- }
- }
- }
- }
- }*/
-}
-
diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss
index 96e50e5f2525141afc0e6504682015391549cf04..64dbf51f15608f204cf53229c9b80411b82ed95d 100644
--- a/src/styles/layout/circle/circle-profile.scss
+++ b/src/styles/layout/circle/circle-profile.scss
@@ -7,23 +7,14 @@
.block {
- >form { /* peut-être à mettre dans main.scss */
- margin-bottom: 2.6rem;
-
- .form-label.is-dark>label {
- margin-top: 0;
- }
- }
-
/* peut-être à mettre dans main.scss */
-
circle-team-template>sib-display>div {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
- >[name='user.account.picture'] {
+ >[name='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
@@ -70,7 +61,7 @@
margin-bottom: 1px;
margin-left: 0.6rem;
- [name='user.groups'] {
+ [name='groups'] {
@extend %tag-role;
}
}
diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project-profile/_index.scss
index 0ff827cb3d0f54581c6f466a0d4ed7eb007b2e3f..74f68a7433d6ee94f9b1fd8fd174600f1ca1e261 100644
--- a/src/styles/layout/project-profile/_index.scss
+++ b/src/styles/layout/project-profile/_index.scss
@@ -1,2 +1,2 @@
@import 'project';
-@import 'project-profile';
\ No newline at end of file
+@import 'project-profile';
diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug
index ff90ce09f972b44e9b5730a458376038cfe582ee..846f6e96911c668eed8cbeea33f7b2d9d78132ca 100644
--- a/src/templates/hd-circle-team.pug
+++ b/src/templates/hd-circle-team.pug
@@ -3,23 +3,24 @@ include hd-user-avatar.pug
sib-widget(name='circle-team-template')
template
sib-display(
- data-src='${await value}'
- fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)'
+ data-src='${await value.user}'
+ fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
+ value-isadmin='${await value.is_admin}'
- class-user.name='user-name'
- class-is_admin='tag-admin'
- class-user.groups='tag-group'
- class-user.profile.city='city'
+ class-name='user-name'
+ class-isadmin='tag-admin'
+ class-groups='tag-group'
+ class-profile.city='city'
- widget-user.account.picture='hd-user-avatar'
- widget-is_admin='hd-user-admin'
- widget-user.groups='hd-user-groups'
+ widget-account.picture='hd-user-avatar'
+ widget-isadmin='hd-circle-user-admin'
+ widget-groups='hd-circle-user-groups'
- multiple-user.groups=''
+ multiple-groups=''
)
-sib-widget(name='hd-user-admin')
- template ${await value ? "Administrator" : ""}
+sib-widget(name='hd-circle-user-admin')
+ template ${(await value) != "false" ? "Administrator" : ""}
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-circle-user-groups')
template ${await value.name}
diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug
index c08740ad18f7d5dde40b1ad70524d4935235a223..8fd2458a79196d3581a376f3e17652203dbae74b 100644
--- a/src/templates/hd-project-team.pug
+++ b/src/templates/hd-project-team.pug
@@ -12,14 +12,14 @@ sib-widget(name='hd-project-team')
class-user.profile.city='city'
widget-user.account.picture='hd-user-avatar'
- widget-is_admin='hd-user-admin'
- widget-user.groups='hd-user-groups'
+ widget-is_admin='hd-project-user-admin'
+ widget-user.groups='hd-project-user-groups'
multiple-user.groups=''
)
-sib-widget(name='hd-user-admin')
+sib-widget(name='hd-project-user-admin')
template ${await value ? "Administrator" : ""}
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-project-user-groups')
template ${await value.name}