From 3a685ca2b95ec60a7110a343c368e6545d35a204 Mon Sep 17 00:00:00 2001 From: Adrien Maston Date: Tue, 20 Jan 2026 13:39:00 +0100 Subject: [PATCH] Hide filters by default on mobile --- app/assets/images/funnel.svg | 1 + app/assets/stylesheets/expandable.css | 13 +++++ .../expandable_on_native_controller.js | 16 ++++++ app/javascript/helpers/platform_helpers.js | 4 ++ app/views/filters/_settings.html.erb | 54 ++++++++++--------- 5 files changed, 64 insertions(+), 24 deletions(-) create mode 100644 app/assets/images/funnel.svg create mode 100644 app/assets/stylesheets/expandable.css create mode 100644 app/javascript/controllers/expandable_on_native_controller.js diff --git a/app/assets/images/funnel.svg b/app/assets/images/funnel.svg new file mode 100644 index 000000000..26f3684d7 --- /dev/null +++ b/app/assets/images/funnel.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/expandable.css b/app/assets/stylesheets/expandable.css new file mode 100644 index 000000000..f2fe31c23 --- /dev/null +++ b/app/assets/stylesheets/expandable.css @@ -0,0 +1,13 @@ +@layer components { + .expandable-on-native { + body:not([data-platform~=native]) & { + &::details-content { + display: contents; + } + + summary { + display: none; + } + } + } +} diff --git a/app/javascript/controllers/expandable_on_native_controller.js b/app/javascript/controllers/expandable_on_native_controller.js new file mode 100644 index 000000000..a58ddfa9a --- /dev/null +++ b/app/javascript/controllers/expandable_on_native_controller.js @@ -0,0 +1,16 @@ +import { Controller } from "@hotwired/stimulus" +import { isNative } from "helpers/platform_helpers" + +export default class extends Controller { + static get shouldLoad() { + return isNative() + } + + static values = { autoExpandSelector: String } + + connect() { + if (this.hasAutoExpandSelectorValue && this.element.querySelector(this.autoExpandSelectorValue)) { + this.element.open = true + } + } +} diff --git a/app/javascript/helpers/platform_helpers.js b/app/javascript/helpers/platform_helpers.js index 636e4b968..b5056d5a6 100644 --- a/app/javascript/helpers/platform_helpers.js +++ b/app/javascript/helpers/platform_helpers.js @@ -13,3 +13,7 @@ export function isAndroid() { export function isMobile() { return isIos() || isAndroid() } + +export function isNative() { + return /Hotwire Native/.test(navigator.userAgent) +} diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index 52137b5de..66bbe3d54 100644 --- a/app/views/filters/_settings.html.erb +++ b/app/views/filters/_settings.html.erb @@ -1,29 +1,35 @@ -<%= tag.aside \ - class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }), +<%= tag.details class: "expandable-on-native", data: { - controller: "toggle-enable toggle-class filter-settings dialog-manager", - toggle_class_toggle_class: "filters--expanded", - filter_settings_filters_set_class: "filters--has-filters-set", - filter_settings_no_filtering_url_value: no_filtering_url, - filter_settings_refresh_url_value: settings_refresh_path, - filter_settings_cards_url_value: cards_path, - turbo_permanent: true } do %> - <%= form_with url: filter_url, method: :get, class: "display-contents", data: { - controller: "form", - turbo_frame: "cards_container", - filter_settings_target: "form", - action: "turbo:submit-end->filter-settings#resetIfNoFiltering", - turbo_action: "advance" } do |form| %> - <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %> + controller: "expandable-on-native", + expandable_on_native_auto_expand_selector_value: "[data-filter-show=true]" } do %> + <%= tag.summary "Toggle filters", class: "btn btn--plain margin-block-end", data: { bridge__buttons_target: "button", bridge_title: "Toggle filters", bridge_icon_url: bridge_icon("funnel") } %> + <%= tag.aside \ + class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }), + data: { + controller: "toggle-enable toggle-class filter-settings dialog-manager", + toggle_class_toggle_class: "filters--expanded", + filter_settings_filters_set_class: "filters--has-filters-set", + filter_settings_no_filtering_url_value: no_filtering_url, + filter_settings_refresh_url_value: settings_refresh_path, + filter_settings_cards_url_value: cards_path, + turbo_permanent: true } do %> + <%= form_with url: filter_url, method: :get, class: "display-contents", data: { + controller: "form", + turbo_frame: "cards_container", + filter_settings_target: "form", + action: "turbo:submit-end->filter-settings#resetIfNoFiltering", + turbo_action: "advance" } do |form| %> + <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %> - <%= yield form if block_given? %> - - <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %> <%= yield form if block_given? %> - <% end %> - <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %> - <%= render "filters/settings/toggle", user_filtering: user_filtering %> - <% end %> - <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %> + <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %> + <%= yield form if block_given? %> + <% end %> + <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %> + + <%= render "filters/settings/toggle", user_filtering: user_filtering %> + <% end %> + <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %> + <% end %> <% end %>