From 946c9ae80442bb3b413d0af44545f432e06f781c Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 27 May 2023 16:58:10 +0100 Subject: [PATCH] Image manager: supported a tabbed interface on mobile Makes interface relatively usable now on mobile sizes. Required updating of tab handling to support tabs being active at only mobile screen sizes, include change on resize, upon support for potentially nested tab usage. Tab component will now search within sensible depths for finding its own tabs and panels to control. --- resources/js/components/tabs.js | 48 ++++++- resources/sass/_components.scss | 12 ++ resources/sass/_layout.scss | 4 + .../views/pages/parts/image-manager.blade.php | 136 ++++++++++-------- 4 files changed, 139 insertions(+), 61 deletions(-) diff --git a/resources/js/components/tabs.js b/resources/js/components/tabs.js index 560dc6273..c3788c747 100644 --- a/resources/js/components/tabs.js +++ b/resources/js/components/tabs.js @@ -21,15 +21,23 @@ export class Tabs extends Component { setup() { this.container = this.$el; - this.tabs = Array.from(this.container.querySelectorAll('[role="tab"]')); - this.panels = Array.from(this.container.querySelectorAll('[role="tabpanel"]')); + this.tabList = this.container.querySelector('[role="tablist"]'); + this.tabs = Array.from(this.tabList.querySelectorAll('[role="tab"]')); + this.panels = Array.from(this.container.querySelectorAll(':scope > [role="tabpanel"], :scope > * > [role="tabpanel"]')); + this.activeUnder = this.$opts.activeUnder ? Number(this.$opts.activeUnder) : 10000; + this.active = null; this.container.addEventListener('click', event => { - const button = event.target.closest('[role="tab"]'); - if (button) { - this.show(button.getAttribute('aria-controls')); + const tab = event.target.closest('[role="tab"]'); + if (tab && this.tabs.includes(tab)) { + this.show(tab.getAttribute('aria-controls')); } }); + + window.addEventListener('resize', this.updateActiveState.bind(this), { + passive: true, + }); + this.updateActiveState(); } show(sectionId) { @@ -46,4 +54,34 @@ export class Tabs extends Component { this.$emit('change', {showing: sectionId}); } + updateActiveState() { + const active = window.innerWidth < this.activeUnder; + if (active === this.active) { + return; + } + + if (active) { + this.activate(); + } else { + this.deactivate(); + } + + this.active = active; + } + + activate() { + this.show(this.panels[0].id); + this.tabList.toggleAttribute('hidden', false); + } + + deactivate() { + for (const panel of this.panels) { + panel.removeAttribute('hidden'); + } + for (const tab of this.tabs) { + tab.setAttribute('aria-selected', 'false'); + } + this.tabList.toggleAttribute('hidden', true); + } + } diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 51d95236e..1a3e1669e 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -380,6 +380,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { background-color: #FFF; } } + +@include smaller-than($s) { + .image-manager-filter-bar .contained-search-box input { + width: 180px; + } +} .image-manager-filters { box-shadow: $bs-med; border-radius: 4px; @@ -475,6 +481,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .image-manager-sidebar { width: 300px; + margin: 0 auto; overflow-y: auto; overflow-x: hidden; border-inline-start: 1px solid #DDD; @@ -500,6 +507,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } } +@include smaller-than($m) { + .image-manager-sidebar { + border-inline-start: 0; + } +} .image-manager-content { display: flex; diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index 541978a65..11889da17 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -298,6 +298,10 @@ body.flexbox { } } +[hidden] { + display: none !important; +} + /** * Border radiuses */ diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php index 53a361c27..9945f4d6c 100644 --- a/resources/views/pages/parts/image-manager.blade.php +++ b/resources/views/pages/parts/image-manager.blade.php @@ -24,67 +24,91 @@ -
-
-
-
-
-
- - - -
-
-
-
- - - +
+
+
+ + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
-
- - -
- -
-
-
- -
-

{{ trans('components.image_intro') }}

-

{{ trans('components.image_intro_upload') }}

-
- -
-
-
-