From db3d1581163b9bc37114854bbbc10d0c3ee44761 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 15 Apr 2021 13:13:48 +0200
Subject: [PATCH] patch: New right menu on mobile - default behavior fixed
---
src/scripts/navigate-event.js | 8 ++++----
src/styles/content/_index.scss | 4 +++-
src/views/page-admin.pug | 2 +-
src/views/page-circle.pug | 2 +-
src/views/page-project.pug | 2 +-
src/views/partials/admin/page-admin-chat-create.pug | 2 +-
src/views/partials/admin/page-admin-chat.pug | 2 +-
src/views/partials/admin/page-admin-circles-create.pug | 2 +-
src/views/partials/admin/page-admin-circles.pug | 2 +-
src/views/partials/admin/page-admin-projects-create.pug | 2 +-
src/views/partials/admin/page-admin-projects.pug | 2 +-
src/views/partials/circle/page-circle-chat.pug | 2 +-
src/views/partials/circle/page-circle-edit.pug | 2 +-
src/views/partials/circle/page-circle-profile.pug | 2 +-
src/views/partials/project/page-project-chat.pug | 2 +-
src/views/partials/project/page-project-edit.pug | 2 +-
src/views/partials/project/page-project-profile.pug | 2 +-
17 files changed, 22 insertions(+), 20 deletions(-)
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index c8473924..739df7af 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -44,12 +44,12 @@ Array.from(buttons).forEach(button =>
if (button.classList.contains('icon-close')) {
button.classList.remove('icon-close');
button.classList.add('icon-options-vertical');
- rightMenu.setAttribute('hidden', '');
+ rightMenu.classList.add('sm-hidden');
}
else {
button.classList.remove('icon-options-vertical');
button.classList.add('icon-close');
- rightMenu.removeAttribute('hidden');
+ rightMenu.classList.remove('sm-hidden');
};
})
)
@@ -66,12 +66,12 @@ contentControls.forEach(
if (contentButton.classList.contains('icon-close')) {
contentButton.classList.remove('icon-close');
contentButton.classList.add('icon-options-vertical');
- contentSidebar.setAttribute('hidden', '');
+ contentSidebar.classList.add('sm-hidden');
}
else {
contentButton.classList.remove('icon-options-vertical');
contentButton.classList.add('icon-close');
- contentSidebar.removeAttribute('hidden');
+ contentSidebar.classList.remove('sm-hidden');
};
})
)
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 71b14af9..8ca009fe 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -69,7 +69,9 @@ main {
/* Styles use with JS to open/close the sidebar */
&.jsRightMenu {
- display: block;
+ @media (min-width: 768,01px) {
+ display: block;
+ }
@media (max-width: 768px) {
position: fixed;
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 81fb3351..f7adb473 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -57,7 +57,7 @@
)
include partials/admin/page-admin-chat-create.pug
- nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+ nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
.segment.whitespace-normal.text-color-heading.text-bold
ul
li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index a3a08682..dbb98ef2 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -41,7 +41,7 @@
)
include partials/circle/page-circle-polls.pug
-nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul
li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index 834c13f4..43e415ae 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -22,7 +22,7 @@
)
include partials/project/page-project-picture.pug
-nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul
li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
diff --git a/src/views/partials/admin/page-admin-chat-create.pug b/src/views/partials/admin/page-admin-chat-create.pug
index e6b4207a..b59d8a1a 100644
--- a/src/views/partials/admin/page-admin-chat-create.pug
+++ b/src/views/partials/admin/page-admin-chat-create.pug
@@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('chat', true)}` data-trans='circle.create.backlink')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div#loader-users-title.loader.loader
diff --git a/src/views/partials/admin/page-admin-chat.pug b/src/views/partials/admin/page-admin-chat.pug
index 32a3a937..8af70194 100644
--- a/src/views/partials/admin/page-admin-chat.pug
+++ b/src/views/partials/admin/page-admin-chat.pug
@@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index d5b7e6c5..696e6274 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('circles', true)}` data-trans='circle.create.backlink')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div.loader.loader-top(id=`loader-admin-${getComponent('circles').uniq}`)
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 788532f0..e9c98432 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index 8dd66fed..467b7ae3 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('projects', true)}` data-trans='project.create.backlink')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div.loader.loader-top(id=`loader-admin-${getComponent('projects').uniq}`)
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index 6953b7ca..1258c553 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
diff --git a/src/views/partials/circle/page-circle-chat.pug b/src/views/partials/circle/page-circle-chat.pug
index c2a5a48c..80ad844f 100644
--- a/src/views/partials/circle/page-circle-chat.pug
+++ b/src/views/partials/circle/page-circle-chat.pug
@@ -10,7 +10,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
class-dash='text-color-heading text-bold'
)
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
.chat-view.segment.full.whitespace-normal
solid-xmpp-chat(
diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug
index fbad418f..a7154f03 100644
--- a/src/views/partials/circle/page-circle-edit.pug
+++ b/src/views/partials/circle/page-circle-edit.pug
@@ -13,7 +13,7 @@ solid-ac-checker(permission='acl:Read', bind-resources)
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.whitespace-normal
diff --git a/src/views/partials/circle/page-circle-profile.pug b/src/views/partials/circle/page-circle-profile.pug
index d4f92fdd..cf29c689 100644
--- a/src/views/partials/circle/page-circle-profile.pug
+++ b/src/views/partials/circle/page-circle-profile.pug
@@ -20,7 +20,7 @@ div(
class-dash='text-color-heading text-bold'
)
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
div.loader(id=`loader-${component.route}-profile-1`)
diff --git a/src/views/partials/project/page-project-chat.pug b/src/views/partials/project/page-project-chat.pug
index 8357e17e..0af86289 100644
--- a/src/views/partials/project/page-project-chat.pug
+++ b/src/views/partials/project/page-project-chat.pug
@@ -14,7 +14,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
value-dash=' - '
)
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
.chat-view.segment.full.whitespace-normal
solid-xmpp-chat(
diff --git a/src/views/partials/project/page-project-edit.pug b/src/views/partials/project/page-project-edit.pug
index 659f5526..08ff1a70 100644
--- a/src/views/partials/project/page-project-edit.pug
+++ b/src/views/partials/project/page-project-edit.pug
@@ -17,7 +17,7 @@ solid-ac-checker(permission='acl:Read', bind-resources)
div.segment.half.sm-hidden.text-right
solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink')
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.whitespace-normal
diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug
index ceb5ffa3..ca86e47c 100644
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@@ -24,7 +24,7 @@ div(
value-dash=' - '
)
div.segment.lg-hidden.sm-quarter.text-right
- div.jsMobileRightMenuButton.icon.icon-close.icon-heading
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
div.loader(id=`loader-${component.route}-profile`)
--
GitLab