WIP
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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") %>
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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 %>">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user