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

Transaction page design fixes (#1176)

Browse source 
* Fix transaction summary spacing

* Fix search input padding

* Search and transfer design fixes
This commit is contained in:
Zach Gollwitzer 2024-09-13 15:43:16 -04:00 • committed by GitHub
parent 30f7c120e1
commit 0149ca4ea1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,13 +5,13 @@
data: { controller: "auto-submit-form" } do |form| %>
<div class="flex gap-2 mb-4">
<div class="grow">
<div class="relative flex items-center bg-white border border-alpha-black-200 rounded-lg focus-within:border-alpha-black-500">
<div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
<%= form.text_field :search,
placeholder: "Search transactions by name",
value: @q[:search],
class: "placeholder:text-sm placeholder:text-gray-500 relative pl-10 w-full border-none rounded-lg focus:outline-none focus:ring-0",
class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
"data-auto-submit-form-target": "auto" %>
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>
</div>
<div data-controller="menu" class="relative">

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

@ -4,8 +4,8 @@
data-controller="tabs"
data-tabs-active-class="bg-gray-25 text-gray-900"
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 border border-alpha-black-25 bg-white rounded-lg shadow-xs">
<div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-25">
class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-alpha-black-100 bg-white rounded-lg shadow-xs">
<div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-100">
<% transaction_search_filters.each do |filter| %>
<button
class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full"
@ -20,7 +20,7 @@
</div>
<div class="flex flex-col grow">
<div class="grow p-2 border-b border-b-alpha-black-25 overflow-y-auto">
<div class="grow p-2 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 } %>

10
app/views/transactions/searches/_search.html.erb
View file

@ -1,13 +1,11 @@
<%= render "transactions/searches/form" %>
<ul id="transaction-search-filters" class="flex items-center flex-wrap gap-2">
<ul id="transaction-search-filters" class="flex items-center flex-wrap gap-2 mb-4">
<% @q.each do |param_key, param_value| %>
<% unless param_value.blank? %>
<div class="pb-4">
<% Array(param_value).each do |value| %>
<%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
<% end %>
</div>
<% Array(param_value).each do |value| %>
<%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
<% end %>
<% end %>
<% end %>
</ul>

2
app/views/transactions/searches/filters/_account_filter.html.erb
View file

@ -11,7 +11,7 @@
{
multiple: true,
checked: @q[:accounts]&.include?(account.name),
class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class: "maybe-checkbox maybe-checkbox--light"
},
account.name,
nil %>

2
app/views/transactions/searches/filters/_category_filter.html.erb
View file

@ -11,7 +11,7 @@
{
multiple: true,
checked: @q[:categories]&.include?(category.name),
class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class: "maybe-checkbox maybe-checkbox--light"
},
category.name,
nil %>

7
app/views/transactions/searches/filters/_merchant_filter.html.erb
View file

@ -11,11 +11,14 @@
{
multiple: true,
checked: @q[:merchants]&.include?(merchant.name),
class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class: "maybe-checkbox maybe-checkbox--light"
},
merchant.name,
nil %>
<%= form.label :merchants, merchant.name, value: merchant.name, class: "text-sm text-gray-900" %>
<%= form.label :merchants, value: merchant.name, class: "text-sm text-gray-900 flex items-center gap-2" do %>
<%= circle_logo(merchant.name, hex: merchant.color, size: "sm") %>
<%= merchant.name %>
<% end %>
</div>
<% end %>
</div>