This commit is contained in:
neo773
2025-04-13 01:32:43 +05:30
parent 5f1e512939
commit e82909fe07
9 changed files with 116 additions and 42 deletions

View File

@@ -4,17 +4,20 @@
<div class="flex items-center gap-2">
<%= button_to sync_all_accounts_path,
disabled: Current.family.syncing?,
class: "btn btn--outline flex items-center gap-2",
class: "md:btn md:btn--outline flex items-center justify-center gap-2 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg",
title: t(".sync") do %>
<%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
<span><%= t(".sync") %></span>
<span class="hidden md:inline"><%= t(".sync") %></span>
<% end %>
<%= link_to new_account_path(return_to: accounts_path),
data: { turbo_frame: "modal" },
class: "btn btn--primary flex items-center gap-1" do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<p class="text-sm font-medium"><%= t(".new_account") %></p>
class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
<div class="flex items-center justify-center w-5 h-5">
<%= lucide_icon("plus")%>
</div>
<p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
<% end %>
</div>
</div>

View File

@@ -1,10 +1,10 @@
<%= render "layouts/shared/htmldoc" do %>
<div class="flex h-full bg-surface">
<div class="p-4 w-96 shrink-0 h-full overflow-y-auto">
<div class="md:flex h-full bg-surface">
<div class="p-4 w-full md:w-96 shrink-0 md:h-full md:overflow-y-auto pt-safe">
<%= render "settings/settings_nav" %>
</div>
<main class="py-4 px-10 grow flex h-full overflow-y-auto">
<main class="px-4 py-2 md:py-4 md:px-10 grow flex h-full overflow-y-auto">
<div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
<div class="grow space-y-4 overflow-y-auto -mx-1 px-1 pb-12">
<% if content_for?(:breadcrumbs) %>
@@ -14,7 +14,7 @@
<% end %>
<% if content_for?(:page_title) %>
<h1 class="text-primary text-xl font-medium">
<h1 class="text-primary text-3xl md:text-xl font-medium">
<%= content_for :page_title %>
</h1>
<% end %>

View File

@@ -2,13 +2,13 @@
<div class="flex items-center gap-2 p-1.5">
<%= link_to previous_path, class: "flex items-center gap-1 text-primary font-medium text-sm" do %>
<%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
<span>Back</span>
<span class="hidden md:block">Back</span>
<% end %>
<%= link_to previous_path, class: "uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
<%= link_to previous_path, class: "hidden md:block uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
esc
<% end %>
</div>
<nav class="space-y-4">
<nav class="space-y-4 hidden md:block">
<section class="space-y-2">
<div class="flex items-center gap-2 px-3">
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".general_section_title") %></h3>
@@ -86,4 +86,73 @@
<% end %>
</section>
</nav>
<nav class="space-y-4 overflow-y-auto md:hidden">
<ul class="flex space-y-1">
<li>
<%= render "settings/settings_nav_item", name: t(".profile_label"), path: settings_profile_path, icon: "circle-user" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".preferences_label"), path: settings_preferences_path, icon: "bolt" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".security_label"), path: settings_security_path, icon: "shield-check" %>
</li>
<% if self_hosted? %>
<li>
<%= render "settings/settings_nav_item", name: t(".self_hosting_label"), path: settings_hosting_path, icon: "database" %>
</li>
<% end %>
<% unless self_hosted? %>
<li>
<%= render "settings/settings_nav_item", name: t(".billing_label"), path: settings_billing_path, icon: "circle-dollar-sign" %>
</li>
<% end %>
<li>
<%= render "settings/settings_nav_item", name: t(".accounts_label"), path: accounts_path, icon: "layers" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".imports_label"), path: imports_path, icon: "download" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".tags_label"), path: tags_path, icon: "tags" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".categories_label"), path: categories_path, icon: "shapes" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".merchants_label"), path: merchants_path, icon: "store" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".whats_new_label"), path: changelog_path, icon: "box" %>
</li>
<li>
<%= render "settings/settings_nav_item", name: t(".feedback_label"), path: feedback_path, icon: "megaphone" %>
</li>
<%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 btn btn--ghost text-destructive w-full" do %>
<%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
<span><%= t(".logout") %></span>
<% end %>
</ul>
</nav>
</div>

View File

@@ -1,13 +1,13 @@
<% if Current.user.admin? %>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="w-2/3">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="w-full md:w-2/3">
<h3 class="font-medium text-primary"><%= t("settings.hostings.show.clear_cache") %></h3>
<p class="text-secondary text-sm"><%= t("settings.hostings.show.clear_cache_warning") %></p>
</div>
<%=
button_to t("settings.hostings.show.clear_cache"), clear_cache_settings_hosting_path, method: :delete,
class: "bg-orange-500 text-white text-sm font-medium rounded-lg px-4 py-2",
class: "w-full md:w-auto bg-orange-500 text-white text-sm font-medium rounded-lg px-4 py-2",
data: { turbo_confirm: {
title: t("settings.hostings.show.confirm_clear_cache.title"),
body: t("settings.hostings.show.confirm_clear_cache.body"),

View File

@@ -47,7 +47,7 @@
<%= settings_section title: t(".theme_title"), subtitle: t(".theme_subtitle") do %>
<div>
<%= styled_form_with model: @user, class: "flex justify-between items-center", data: { controller: "auto-submit-form" } do |form| %>
<%= styled_form_with model: @user, class: "flex flex-col md:flex-row justify-between items-center gap-4", data: { controller: "auto-submit-form" } do |form| %>
<%= form.hidden_field :redirect_to, value: "preferences" %>
<div class="text-center">
<%= image_tag("light-mode-preview.png", alt: "Light Theme Preview", class: "h-44 mb-4") %>

View File

@@ -129,14 +129,14 @@
<%= settings_section title: t(".danger_zone_title") do %>
<div class="space-y-4">
<% if Current.user.admin? %>
<div class="flex items-center justify-between">
<div class="w-2/3">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="w-full md:w-2/3">
<h3 class="font-medium text-primary"><%= t(".reset_account") %></h3>
<p class="text-secondary text-sm"><%= t(".reset_account_warning") %></p>
</div>
<%=
button_to t(".reset_account"), reset_user_path(@user), method: :delete,
class: "btn btn--destructive",
class: "w-full md:w-auto btn btn--destructive",
data: { turbo_confirm: {
title: t(".confirm_reset.title"),
body: t(".confirm_reset.body"),
@@ -146,14 +146,14 @@
%>
</div>
<% end %>
<div class="flex items-center justify-between">
<div>
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="w-full md:w-2/3">
<h3 class="font-medium text-primary"><%= t(".delete_account") %></h3>
<p class="text-secondary text-sm"><%= t(".delete_account_warning") %></p>
</div>
<%=
button_to t(".delete_account"), user_path(@user), method: :delete,
class: "btn btn--destructive",
class: "w-full md:w-auto btn btn--destructive",
data: { turbo_confirm: {
title: t(".confirm_delete.title"),
body: t(".confirm_delete.body"),

View File

@@ -2,7 +2,7 @@
<%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
<div class="space-y-4">
<div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
<div class="p-3 shadow-border-xs bg-container rounded-lg md:flex md:justify-between md:items-center">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
<%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
@@ -19,20 +19,22 @@
</div>
</div>
<% if Current.user.otp_required? %>
<%= button_to t(".disable_mfa"), disable_mfa_path,
method: :delete,
class: "btn btn--secondary flex items-center gap-1",
data: { turbo_confirm: {
title: t(".disable_mfa_confirm"),
body: t(".disable_mfa_confirm"),
accept: t(".disable_mfa"),
acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
} } %>
<% else %>
<%= link_to t(".enable_mfa"), new_mfa_path,
class: "btn btn--primary flex items-center gap-1" %>
<% end %>
<div class="mt-4 md:mt-0">
<% if Current.user.otp_required? %>
<%= button_to t(".disable_mfa"), disable_mfa_path,
method: :delete,
class: "w-full md:w-auto btn btn--secondary flex items-center gap-1 justify-center",
data: { turbo_confirm: {
title: t(".disable_mfa_confirm"),
body: t(".disable_mfa_confirm"),
accept: t(".disable_mfa"),
acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
} } %>
<% else %>
<%= link_to t(".enable_mfa"), new_mfa_path,
class: "w-full md:w-auto btn btn--primary flex items-center gap-1 justify-center" %>
<% end %>
</div>
</div>
</div>
<% end %>

View File

@@ -1,7 +1,7 @@
<%# locals: (content:, reload_on_close: false) %>
<%= turbo_frame_tag "drawer" do %>
<dialog class="ml-auto bg-container md:shadow-border-xs md:rounded-2xl max-w-screen max-h-screen md:max-w-[480px] h-full w-full md:mt-4 md:mr-4 focus-visible:outline-hidden"
<dialog class="ml-auto bg-container md:shadow-border-xs md:rounded-2xl max-w-screen max-h-screen md:max-w-[480px] h-full w-full md:mt-4 md:mr-4 pt-safe focus-visible:outline-hidden"
data-controller="modal"
data-action="mousedown->modal#clickOutside"
data-modal-reload-on-close-value="<%= reload_on_close %>">

View File

@@ -7,19 +7,19 @@
<% end %>
<section>
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 asdd">
<%= link_to new_account_transaction_path(nature: "expense"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued" do %>
<%= lucide_icon "minus-circle", class: "w-5 h-5" %>
<%= lucide_icon "minus-circle", class: "w-4 h-4" %>
<%= tag.span t(".expense") %>
<% end %>
<%= link_to new_account_transaction_path(nature: "income"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued" do %>
<%= lucide_icon "plus-circle", class: "w-5 h-5" %>
<%= lucide_icon "plus-circle", class: "w-4 h-4" %>
<%= tag.span t(".income") %>
<% end %>
<%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued bg-container text-gray-800 shadow-sm" do %>
<%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
<%= lucide_icon "arrow-right-left", class: "w-4 h-4" %>
<%= tag.span t(".transfer") %>
<% end %>
</fieldset>