From bb40beb449a4ce7b8256eaa9a53867cef4579d2e Mon Sep 17 00:00:00 2001
From: Calum Mackervoy <c.mackervoy@gmail.com>
Date: Thu, 9 Jan 2020 15:21:17 +0100
Subject: [PATCH 01/10] customer dropdown in edit-project
---
config.sample.json | 1 +
src/page-project-edit.pug | 28 ++++------------------------
2 files changed, 5 insertions(+), 24 deletions(-)
diff --git a/config.sample.json b/config.sample.json
index 27aed52c..54ce4fce 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -7,6 +7,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/page-project-edit.pug b/src/page-project-edit.pug
index 19a0dc17..2ea3ab8a 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -13,18 +13,16 @@ div.content-box__info
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)'
+ 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-customer='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-customer='Customer'
+ range-customer=`${endpoints.customer}`
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'
@@ -36,24 +34,6 @@ div.content-box__info
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'
)
--
GitLab
From e50845455ba1f46115c3fa522beddaeb0613a154 Mon Sep 17 00:00:00 2001
From: Calum Mackervoy <c.mackervoy@gmail.com>
Date: Mon, 13 Jan 2020 10:33:36 +0100
Subject: [PATCH 02/10] customer dropdown in project-edit
---
src/page-project-edit.pug | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 2ea3ab8a..bb1fe73c 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -20,7 +20,7 @@ div.content-box__info
class-description='form-label is-light is-full-width'
label-fieldset-info=''
label-customer='Customer'
- range-customer=`${endpoints.customer}`
+ range-customer=`${endpoints.customers}`
label-name='Project\'s name*'
label-description='Project description'
widget-fieldset-info='hd-fieldset-title'
--
GitLab
From 6a0821a59b7a0bd7fe5c948c4115c61bb5f2ff42 Mon Sep 17 00:00:00 2001
From: Calum Mackervoy <c.mackervoy@gmail.com>
Date: Mon, 13 Jan 2020 11:50:45 +0100
Subject: [PATCH 03/10] customer dropdown for project create
---
src/page-project-create.pug | 15 +++------------
1 file changed, 3 insertions(+), 12 deletions(-)
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index 80cbceaa..87182c35 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -7,24 +7,15 @@
range-members=`${endpoints.users}`,
range-team=`${endpoints.users}`,
- fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)',
+ fields='block-project__info(customer, name, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee)',
- label-customer.name='Customer\'s name',
+ label-customer='Customer',
+ range-customer=`${endpoints.customers}`,
label-name='Project\'s name',
- label-customer.logo='Customer\'s logo',
label-description='Project description',
widget-fieldset-fee='hd-template-project-title',
label-businessProvider='Business provider',
label-businessProviderFee='Amount of the contribution',
-
- widget-fieldset-customer='hd-template-project-title',
- 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'
)
\ No newline at end of file
--
GitLab
From b0e7584a076973c78fed0fbcd632895d4b691aff Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 16 Jan 2020 18:48:21 +0100
Subject: [PATCH 04/10] css for project-edit added + refactoring
---
src/page-admin-projects-create.pug | 5 +-
src/page-circle-edit.pug | 6 +-
src/page-project-edit.pug | 105 ++++++------
src/styles/base/form.scss | 23 ++-
src/styles/base/table.scss | 1 +
src/styles/layout/circle/_index.scss | 1 -
src/styles/layout/circle/circle-edit.scss | 161 ------------------
src/styles/layout/circle/circle-profile.scss | 9 -
src/styles/layout/project-profile/_index.scss | 2 +-
9 files changed, 82 insertions(+), 231 deletions(-)
delete mode 100644 src/styles/layout/circle/circle-edit.scss
diff --git a/src/page-admin-projects-create.pug b/src/page-admin-projects-create.pug
index 92dd7244..3ea8961c 100644
--- a/src/page-admin-projects-create.pug
+++ b/src/page-admin-projects-create.pug
@@ -32,8 +32,9 @@ div.content-box__info
widget-fieldset-captain='hd-template-project-title'
label-customer='Customer'
- class-customer='form-label is-light is-half-width'
- range-customer=`${endpoints.customers}`,
+ 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'
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 2a7bab02..930302eb 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -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-project-edit.pug b/src/page-project-edit.pug
index bb1fe73c..2a5be6c7 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,69 +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, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
+ 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='form-label is-light is-half-width'
- 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-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'
- submit-button='Save'
- )
+ submit-button='Save'
+ )
- h2 Members List
+ h2 Members List
- sib-form.block.team-form(
- bind-resources
- nested-field='members'
- fields='user'
- range-user=`${endpoints.users}`
+ 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'
+ 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'
+ )
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 3dff76e6..388f1978 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/table.scss b/src/styles/base/table.scss
index 6b5b0bee..af42ed73 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/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss
index 8ef02997..940c5fc0 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 c1e26833..00000000
--- 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 96e50e5f..63bf22a1 100644
--- a/src/styles/layout/circle/circle-profile.scss
+++ b/src/styles/layout/circle/circle-profile.scss
@@ -7,16 +7,7 @@
.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;
diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project-profile/_index.scss
index 0ff827cb..74f68a74 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';
--
GitLab
From cd9e478264051f6a5312760de4eadea6d454ea68 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sat, 18 Jan 2020 15:51:43 +0100
Subject: [PATCH 05/10] scrollbars on left menu and content added
---
src/menu-left.pug | 50 +++++++++++++++---------------
src/styles/base/main.scss | 18 +++++++++--
src/styles/base/menu-left.scss | 26 ----------------
src/styles/components/sidebar.scss | 7 +++--
4 files changed, 44 insertions(+), 57 deletions(-)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 44880da5..52bbfcb9 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -19,31 +19,31 @@ 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.menu
- //- div.menu-chevron
- //- div.menu-icon.icon-arrow-up
- //- div.menu-label Projects
- //- 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(
- //- data-src=`${endpoints.projects}`
- //- fields='project(customer.name, name), badge'
- //- class-customer.name='project-customer'
- //- class-name='project-name'
- //- empty-widget='hd-create'
- //- empty-value='project'
- //- search-fields='team'
- //- search-widget-team='sib-form-hidden'
- //- search-value-team='-'
- //- hd-inherit-user-id='search-value-team'
- //- hd-inherit-widgets
- //- widget-badge='hd-counter'
- //- action-badge='badge'
- //- order-by='customer.name'
- //- next='project'
- //- )
+ div.menu-wrapper
+ div.menu
+ div.menu-chevron
+ div.menu-icon.icon-arrow-up
+ div.menu-label Projects
+ 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(
+ data-src=`${endpoints.projects}`
+ fields='project(customer.name, name), badge'
+ class-customer.name='project-customer'
+ class-name='project-name'
+ empty-widget='hd-create'
+ empty-value='project'
+ search-fields='team'
+ search-widget-team='sib-form-hidden'
+ search-value-team='-'
+ hd-inherit-user-id='search-value-team'
+ hd-inherit-widgets
+ widget-badge='hd-counter'
+ action-badge='badge'
+ order-by='customer.name'
+ next='project'
+ )
div.divider
div
div.menu
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 4afff70d..4d4a0ba2 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -22,16 +22,28 @@ $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;
+}
/* Quick fix. Will be removed later */
#admin-circles,
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 9848525e..35a62466 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 */
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 1e93db51..d1d12efd 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -12,7 +12,7 @@
.views-container {
flex: 1 0 0;
- -webkit-backface-visibility: hidden;
+ /*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed {
margin-left: -15.5rem;
@@ -27,6 +27,7 @@
nav {
background: $color-210-25-95;
transition: all 0.5s;
+ width: 25rem;
>sib-router {
background-color: $color-222-52-90;
@@ -49,13 +50,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;
}
}
--
GitLab
From 90a92cc832cd283f4fc8b95a79e83a3ac3b2eec8 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sat, 18 Jan 2020 21:43:41 +0100
Subject: [PATCH 06/10] scrollbars are customised
---
src/styles/base/main.scss | 41 ++++++++++++++++++++++++++++++++++++++-
1 file changed, 40 insertions(+), 1 deletion(-)
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 4d4a0ba2..bba7e804 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -45,6 +45,46 @@ nav, .views-container {
-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,
#admin-projects {
@@ -52,7 +92,6 @@ nav, .views-container {
}
-
img {
max-height: 100%;
max-width: 100%;
--
GitLab
From 56953601e142e3b7eb9b287193042d2835ebb30e Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 19 Jan 2020 10:48:22 +0100
Subject: [PATCH 07/10] Left menu is responsive
---
src/header.pug | 3 ++
src/styles/abstracts/_mixins.scss | 56 ++++++++++++++++++++++++++++++-
src/styles/base/header.scss | 12 +++++++
src/styles/base/menu-left.scss | 17 ++++++++++
4 files changed, 87 insertions(+), 1 deletion(-)
diff --git a/src/header.pug b/src/header.pug
index 2c2ec986..3e47e558 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -24,6 +24,9 @@ details#user-controls
#user-controls__panel
include page-user-panel.pug
+.mobile-menu-icon
+ button.icon-menu
+
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
sib-auth
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 741219e3..3ff49c71 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/header.scss b/src/styles/base/header.scss
index 51cc2afd..6d1e7b52 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -168,6 +168,10 @@
&::before {
margin-left: 1.5rem;
}
+
+ @include breakpoint(sm) {
+ display: none;
+ }
}
}
}
@@ -236,5 +240,13 @@
}
}
}
+
+ .mobile-menu-icon {
+ display: none;
+
+ @include breakpoint(sm) {
+ display: block;
+ }
+ }
}
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 35a62466..f889e740 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -188,4 +188,21 @@
background-color: $color-213-13-86;
}
}
+
+ &.mobile-opened {
+ @include breakpoint(sm) {
+ bottom: 0;
+ min-width: 80%;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1;
+ }
+ }
+
+ &.mobile-closed {
+ @include breakpoint(sm) {
+ display: none;
+ }
+ }
}
--
GitLab
From 3e281edc5c260a15d369fce5f9746c86f3356bd3 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 19 Jan 2020 13:19:25 +0100
Subject: [PATCH 08/10] Sidebar is responsive
---
src/header.pug | 2 +-
src/menu-left.pug | 2 +-
src/page-project.pug | 5 ++++-
src/styles/base/main.scss | 34 ++++++++++++++++++++++++++++++
src/styles/base/menu-left.scss | 7 ++++--
src/styles/components/sidebar.scss | 23 +++++++++++++++++++-
6 files changed, 67 insertions(+), 6 deletions(-)
diff --git a/src/header.pug b/src/header.pug
index 3e47e558..c95b9092 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -24,7 +24,7 @@ details#user-controls
#user-controls__panel
include page-user-panel.pug
-.mobile-menu-icon
+.jsToggleLeftMenu.mobile-menu-icon
button.icon-menu
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 52bbfcb9..46b0d936 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.mobile-closed
sib-router#navbar-router(default-route='members')
//- sib-route.menu(name='members')
//- div.menu-label Members
diff --git a/src/page-project.pug b/src/page-project.pug
index 00ec69a0..9cf8f7d6 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -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)
@@ -25,7 +28,7 @@ dialog(id='project-contributions-help').modal
button.icon-close
img(src='/images/contributions-help.png')
-nav.jsRightMenu(role='navigation')
+nav.jsRightMenu.mobile-closed(role='navigation')
sib-router(default-route='project-chat')
ul
li.jsOffsiteToggle
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index bba7e804..599f4c01 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -199,6 +199,40 @@ 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;
+
+ button {
+ color: $color-233-18-29;
+
+ &::before {
+ font-size: 2.2rem;
+ margin-right: 1.2rem;
+ }
+ }
+
+ span {
+ font-size: 1.8rem;
+ font-weight: bold;
+ }
+ }
+
+ @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 f889e740..e2280841 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -189,9 +189,11 @@
}
}
- &.mobile-opened {
+ &.jsLeftMenu.mobile-opened {
+
@include breakpoint(sm) {
bottom: 0;
+ box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%;
position: fixed;
right: 0;
@@ -200,7 +202,8 @@
}
}
- &.mobile-closed {
+ &.jsLeftMenu.mobile-closed {
+
@include breakpoint(sm) {
display: none;
}
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index d1d12efd..652b17d4 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -111,12 +111,33 @@
}
}
- &.offsite-is-closed {
+ &.jsRightMenu.offsite-is-closed {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
}
+
+ &.jsRightMenu.mobile-opened {
+
+ @include breakpoint(sm) {
+ 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;
+ }
+ }
+
+ &.jsRightMenu.mobile-closed {
+
+ @include breakpoint(sm) {
+ display: none;
+ }
+ }
}
}
\ No newline at end of file
--
GitLab
From 5a20cfe3a82e9af8bf247705ac42ed4820a82df1 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 19 Jan 2020 13:57:34 +0100
Subject: [PATCH 09/10] header is responsive
---
src/styles/base/header.scss | 21 +++++++++++++++++----
1 file changed, 17 insertions(+), 4 deletions(-)
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 6d1e7b52..95daac61 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,20 @@
}
}
}
+
+ sib-notifications {
+
+ @include breakpoint(sm) {
+ padding: 0;
+ }
+ }
details {
margin-right: 2.5rem;
+
+ @include breakpoint(sm) {
+ margin-right: 0;
+ }
summary {
@@ -142,6 +150,10 @@
margin-right: 2rem;
overflow: hidden;
width: 4.8rem;
+
+ @include breakpoint(sm) {
+ margin-right: 0;
+ }
}
img {
@@ -246,6 +258,7 @@
@include breakpoint(sm) {
display: block;
+ padding-left: 0;
}
}
}
--
GitLab
From 36a045cacbd56221a5b745b3c67c15ef05723964 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 19 Jan 2020 14:25:08 +0100
Subject: [PATCH 10/10] sidebar is responsive for the circles
---
src/page-circle.pug | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/page-circle.pug b/src/page-circle.pug
index 36a443b3..6ef51270 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -9,6 +9,9 @@
class-name='h1-like'
class-description='h1-aside description'
)
+ .mobile-sidebar-button.jsMobileSidebarOpenButton
+ button.icon-arrow-left-circle
+ span MENU
div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden)
@@ -16,7 +19,7 @@
#circle-information(hidden)
include page-circle-profile.pug
-nav.jsRightMenu(role='navigation')
+nav.jsRightMenu.mobile-closed(role='navigation')
sib-router(default-route='circle-chat')
ul
li.jsOffsiteToggle
--
GitLab