eliott/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure synced 2026-04-25 17:15:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: create new partial for tabs rendering. Address mobile UI issues. (#1534)

Browse Source
This commit is contained in:
Alessio Cappa
2026-04-21 12:43:37 +02:00
committed by GitHub
parent 3a5353c97d
commit 30481fbc07
2 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/views/budgets/_budget_tabs.html.erb Normal file
View File

@@ -0,0 +1,31 @@
<div class="w-full flex justify-center">
<div class="max-w-full w-full lg:w-auto overflow-x-auto no-scrollbar">
<div class="w-full inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="all"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
<%= t("budgets.show.filter.all") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="over_budget"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.over_budget") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="on_track"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.on_track") %>
</button>
</div>
</div>
</div>

41
app/views/budgets/show.html.erb
View File

@@ -51,45 +51,15 @@
<%= content_tag :div,
class: "w-full bg-container rounded-xl shadow-border-xs p-4",
data: (has_over_budget ? { controller: "budget-filter" } : {}) do %>
<div class="flex items-center mb-4 flex-nowrap">
<div class="flex items-center mb-4 flex-nowrap justify-between">
<h2 class="text-lg font-medium shrink-0">
<%= t("budgets.show.categories.title") %>
</h2>
<% if has_over_budget %>
<div class="flex-1 min-w-0 px-1">
<div class="w-full flex justify-center">
<div class="max-w-full overflow-x-auto no-scrollbar">
<div class="inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="all"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
<%= t("budgets.show.filter.all") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="over_budget"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.over_budget") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="on_track"
data-budget-filter-target="tab"
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.on_track") %>
</button>
</div>
</div>
<div class="hidden lg:flex flex-1 min-w-0 px-1">
<%= render "budgets/budget_tabs" %>
</div>
</div>
<% end %>
<div class="<%= has_over_budget ? "shrink-0 flex justify-end whitespace-nowrap" : "ml-auto" %>">
@@ -103,6 +73,11 @@
<% end %>
</div>
</div>
<% if has_over_budget %>
<div class="flex lg:hidden flex-1 min-w-0 mb-4">
<%= render "budgets/budget_tabs" %>
</div>
<% end %>
<%= render "budgets/budget_categories", budget: @budget %>
<% end %>