atomaka/budget
1
0
Fork 0
Code Issues 1 Pull requests 3 Activity Actions

Improve some visuals (#62)

Browse source 
Kind of make it look better.

Reviewed-on: #62
This commit is contained in:
Andrew Tomaka 2025-06-10 23:41:42 -04:00
parent 295a5c0112
commit b43629bdc9
29 changed files with 1937 additions and 395 deletions
Download patch file Download diff file Expand all files Collapse all files

100
app/views/incomes/_form.html.erb
View file

@ -1,9 +1,13 @@
<%= form_with(model: income, class: "contents") do |form| %>
<%= form_with(model: income, class: "space-y-8") do |form| %>
<% if income.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
<h2><%= pluralize(income.errors.count, "error") %> prohibited this income from being saved:</h2>
<ul>
<div id="error_explanation" class="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
<div class="flex items-center mb-2">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<h3 class="text-sm font-medium"><%= pluralize(income.errors.count, "error") %> prohibited this income from being saved:</h3>
</div>
<ul class="list-disc list-inside text-sm space-y-1">
<% income.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
@ -11,32 +15,74 @@
</div>
<% end %>
<div class="my-5">
<%= form.label :description %>
<%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<!-- Basic Information -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-lg font-medium text-gray-900 mb-6">Basic Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-2">
<%= form.label :description, class: "block text-sm font-medium text-gray-700 mb-2" %>
<%= form.text_field :description,
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
placeholder: "Enter income description..." %>
</div>
<div>
<%= form.label :amount, class: "block text-sm font-medium text-gray-700 mb-2" %>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">$</span>
</div>
<%= form.number_field :amount,
class: "block w-full pl-7 pr-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono",
placeholder: "0.00",
step: "0.01",
min: "0" %>
</div>
</div>
<div>
<%= form.label :member_id, "Member", class: "block text-sm font-medium text-gray-700 mb-2" %>
<%= form.select :member_id,
options_for_select(members, income.member_id),
{ prompt: "Select a member..." },
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
</div>
</div>
</div>
<div class="my-5">
<%= form.label :included %>
<%= form.check_box :included, class: "block mt-2 h-5 w-5" %>
<!-- Budget Settings -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-lg font-medium text-gray-900 mb-6">Budget Settings</h3>
<div class="flex items-center justify-between">
<div class="flex-1">
<%= form.label :included, "Include in Budget", class: "block text-sm font-medium text-gray-700" %>
<p class="text-sm text-gray-500 mt-1">Whether this income should be included in budget calculations</p>
</div>
<div class="ml-6">
<%= form.check_box :included, class: "toggle-checkbox sr-only" %>
<label for="income_included" class="toggle-label relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 bg-gray-200">
<span class="toggle-switch pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0"></span>
</label>
</div>
</div>
</div>
<div class="my-5">
<%= form.label :amount %>
<%= form.text_field :amount, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<!-- Form Actions -->
<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
<%= link_to incomes_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
Cancel
<% end %>
<%= form.submit class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" %>
</div>
<div class="my-5">
<%= form.label :member_id %>
<%=
form.select :member_id,
options_for_select(members, income.member_id),
{},
class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full"
%>
</div>
<div class="inline">
<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
</div>
<style>
.toggle-checkbox:checked + .toggle-label {
background-color: #3B82F6;
}
.toggle-checkbox:checked + .toggle-label .toggle-switch {
transform: translateX(1.25rem);
}
</style>
<% end %>