Merge branch 'responsive-fix' into 'staging'
Responsive fixes See merge request startinblox/applications/sib-app!106
This commit is contained in:
Jean-Baptiste Pasquier
commit
541ace4e3f
|
|
@ -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/"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
sib-link(class='backlink', bind-resources, next='project-profile') Back
|
||||
|
||||
h1 Edit your project
|
||||
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)'
|
||||
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.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-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'
|
||||
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'
|
||||
)
|
||||
|
||||
submit-button='Save'
|
||||
)
|
||||
h2 Members List
|
||||
|
||||
h2 Members List
|
||||
sib-form.block.select-add-member(
|
||||
bind-resources
|
||||
nested-field='members'
|
||||
fields='user'
|
||||
range-user=`${endpoints.users}`
|
||||
|
||||
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'
|
||||
|
||||
class-user='team form-label is-dark'
|
||||
label-user=''
|
||||
widget-user='sib-form-auto-completion'
|
||||
submit-button='Add a member'
|
||||
)
|
||||
|
||||
submit-button='Add a member'
|
||||
)
|
||||
.table
|
||||
|
||||
.table
|
||||
div.table-header.grey-color
|
||||
div Name
|
||||
div Access
|
||||
|
||||
div.table-header.grey-color
|
||||
div Name
|
||||
div Access
|
||||
//-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='team-template-edit'
|
||||
)
|
||||
multiple-members=''
|
||||
widget-members='team-template-edit'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;*/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
#circle-edit,
|
||||
#admin-circle-list,
|
||||
#admin-circle-create,
|
||||
#project-edit,
|
||||
#admin-project-list,
|
||||
#admin-project-create {
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@import 'circle';
|
||||
@import 'circle-profile';
|
||||
@import 'circle-edit';
|
||||
@import 'circle-admin';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'project';
|
||||
@import 'project-profile';
|
||||
@import 'project-profile';
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue