From db3d1581163b9bc37114854bbbc10d0c3ee44761 Mon Sep 17 00:00:00 2001 From: gaelle morin 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 c847392..739df7a 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 71b14af..8ca009f 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 81fb335..f7adb47 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 a3a0868..dbb98ef 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 834c13f..43e415a 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 e6b4207..b59d8a1 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 32a3a93..8af7019 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 d5b7e6c..696e627 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 788532f..e9c9843 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 8dd66fe..467b7ae 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 6953b7c..1258c55 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 c2a5a48..80ad844 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 fbad418..a7154f0 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 d4f92fd..cf29c68 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 8357e17..0af8628 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 659f552..08ff1a7 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 ceb5ffa..ca86e47 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`)