Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 15:35:22 +02:00
Code Issues Releases Activity Actions

Filters fixed on mobile and apply button css fixed

Browse source
This commit is contained in:
Luan Estradioto 2025-04-14 21:48:31 -03:00
parent 77bffbe6ce
commit 7f7f8335df
3 changed files with 63 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/controllers/menu_controller.js
View file

@ -19,6 +19,9 @@ export default class extends Controller {
offset: { type: Number, default: 6 },
};
// Tailwind's sm breakpoint
#smBreakpoint = 640;
connect() {
this.show = this.showValue;
this.boundUpdate = this.update.bind(this);
@ -86,7 +89,8 @@ export default class extends Controller {
}
startAutoUpdate() {
if (!this._cleanup) {
// Only run autoUpdate on desktop screens
if (this.isDesktop && !this._cleanup) {
this._cleanup = autoUpdate(
this.buttonTarget,
this.contentTarget,
@ -102,7 +106,22 @@ export default class extends Controller {
}
}
get isDesktop() {
return window.innerWidth >= this.#smBreakpoint;
}
update() {
// Only compute position on desktop screens
if (!this.isDesktop) {
// Ensure floating styles are removed if switching from desktop to mobile while open
Object.assign(this.contentTarget.style, {
position: "",
left: "",
top: "",
});
return;
}
computePosition(this.buttonTarget, this.contentTarget, {
placement: this.placementValue,
middleware: [offset(this.offsetValue), flip(), shift({ padding: 5 })],

19
app/views/transactions/searches/_form.html.erb
View file

@ -6,7 +6,7 @@
<%= hidden_field_tag :per_page, params[:per_page] %>
<div class="flex gap-2 mb-4">
<div class="grow relative" data-controller="menu">
<div class="grow relative">
<div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-secondary focus-within:border-secondary">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
<%= form.text_field :search,
@ -20,21 +20,14 @@
responsive_attribute_attribute_value: "placeholder",
auto_submit_form_target: "auto"
} %>
<button id="mobile-filter-button" data-menu-target="button" type="button" class="sm:hidden text-secondary">
<%= lucide_icon("list-filter", class: "w-5 h-5") %>
</button>
</div>
<!-- Mobile-only filter menu -->
<div class="sm:hidden">
<%= render "transactions/searches/menu", form: form %>
</div>
</div>
<div data-controller="menu" class="relative hidden sm:block">
<button id="transaction-filters-button" data-menu-target="button" type="button" class="btn btn--outline flex items-center gap-2">
<div data-controller="menu" class="relative">
<!-- Desktop button -->
<button id="transaction-filters-button" data-menu-target="button" type="button" class="btn border-0 absolute right-2 sm:border-1 sm:right-0 sm:relative sm:flex btn--outline items-center gap-2">
<%= lucide_icon("list-filter", class: "w-5 h-5 text-secondary") %>
<p class="text-sm font-medium text-primary">Filter</p>
<p class="hidden sm:block text-sm font-medium text-primary">Filter</p>
</button>
<%= render "transactions/searches/menu", form: form %>

66
app/views/transactions/searches/_menu.html.erb
View file

@ -6,42 +6,50 @@
data-controller="tabs"
data-tabs-active-class="bg-gray-25 text-primary"
data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg">
<div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-secondary border-r border-r-alpha-black-100">
<% transaction_search_filters.each do |filter| %>
<button
class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 w-full"
type="button"
data-id="<%= filter[:key] %>"
data-tabs-target="btn"
data-action="tabs#select">
<%= lucide_icon(filter[:icon], class: "w-5 h-5") %>
<span class="text-sm font-medium"><%= t(".#{filter[:key]}") %></span>
</button>
<% end %>
class="hidden fixed inset-0 h-screen w-screen flex flex-col sm:flex-row z-10 sm:h-80 sm:max-w-[540px] right-0 shadow-border-xs bg-container sm:rounded-lg">
<!-- Mobile header - only visible on small screens -->
<div class="flex items-center justify-between p-3 border-b border-b-alpha-black-100 sm:hidden">
<h2 class="text-lg font-medium">Filters</h2>
<button type="button" data-action="menu#close" class="p-2 hover:bg-container-inset rounded-md">
<%= lucide_icon("x", class: "w-5 h-5 text-secondary") %>
</button>
</div>
<div class="flex flex-col grow">
<div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto">
<div class="flex flex-row grow overflow-y-auto sm:overflow-y-hidden pb-16 sm:pb-0">
<div class="flex w-auto sm:w-44 flex-col items-start p-1 sm:p-3 text-sm font-medium text-secondary border-r border-r-alpha-black-100">
<% transaction_search_filters.each do |filter| %>
<div id="<%= filter[:key] %>" data-tabs-target="tab">
<%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
</div>
<button
class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 w-full"
type="button"
data-id="<%= filter[:key] %>"
data-tabs-target="btn"
data-action="tabs#select">
<%= lucide_icon(filter[:icon], class: "w-5 h-5") %>
<span class="text-sm font-medium"><%= t(".#{filter[:key]}") %></span>
</button>
<% end %>
</div>
<div class="flex justify-between items-center gap-2 bg-container p-3">
<div>
<% if @q.present? %>
<%= link_to t(".clear_filters"), transactions_path(clear_filters: true), class: "btn btn--ghost" %>
<div class="flex flex-col grow">
<div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto">
<% transaction_search_filters.each do |filter| %>
<div id="<%= filter[:key] %>" data-tabs-target="tab">
<%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
</div>
<% end %>
</div>
<div>
<%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-container-inset rounded-lg text-sm text-primary font-medium" do %>
<%= t(".cancel") %>
<% end %>
<%= form.submit t(".apply"), name: nil, class: "py-2 px-3 bg-primary hover:bg-primary-dark rounded-lg text-sm text-white font-medium cursor-pointer" %>
<div class="flex justify-between items-center gap-2 bg-container p-3">
<div>
<% if @q.present? %>
<%= link_to t(".clear_filters"), transactions_path(clear_filters: true), class: "btn btn--ghost" %>
<% end %>
</div>
<div>
<%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-container-inset rounded-lg text-sm text-primary font-medium" do %>
<%= t(".cancel") %>
<% end %>
<%= form.submit t(".apply"), name: nil, class: "py-2 px-3 btn btn--primary rounded-lg text-sm text-white font-medium cursor-pointer" %>
</div>
</div>
</div>
</div>