mirror of
https://github.com/we-promise/sure.git
synced 2026-04-18 19:44:09 +00:00
101a5ee0c5
* Add notification UI * Make animation an aribtrary value It didn't make much sense in the theme as it feels very specific, this change also means the timing information is clearer within the html itself. * Update to use tailwind theme * Refactor structure of icon * Add support for multiple notifications at once * Adjust notification animation timing * Make notification more accessible Applies role to the notification which will apply the appropriate aria-live status to ensure notifications are read out when they are rendered into the screen for screenreader users. Wraps the svg with a button tag that keyboard users can focus and engage with to close the notification. * Fix notification progress indicator placement * Map flash types to notification types automatically * Refine notification animations * Set success as default icon for notifications
91 lines
4.0 KiB
Plaintext
91 lines
4.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html class="bg-gray-25 h-full">
|
|
<head>
|
|
<title><%= content_for(:title) || "Maybe" %></title>
|
|
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Maybe">
|
|
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="icon" href="/icon.png" type="image/png">
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/icon.png">
|
|
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
|
|
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
|
|
<%= javascript_importmap_tags %>
|
|
<%= hotwire_livereload_tags if Rails.env.development? %>
|
|
|
|
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
|
|
<%= yield :head %>
|
|
</head>
|
|
|
|
<body class="h-full">
|
|
<div id="notification-tray" class="fixed top-6 right-6 space-y-1 z-50"></div>
|
|
<%= safe_join(flash.map { |type, message| notification(message, type: type) }) %>
|
|
|
|
<div class="flex">
|
|
<div class="flex-col p-5 min-w-80">
|
|
<div class="flex items-center justify-between">
|
|
<%= link_to root_path do %>
|
|
<%= image_tag 'logo.svg', alt: 'Maybe' %>
|
|
<% end %>
|
|
<div class="relative cursor-pointer" data-controller="dropdown">
|
|
<div class="flex" data-action="click->dropdown#toggleMenu">
|
|
<div class="mr-1.5 text-white w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= Current.user.email.first %></div>
|
|
</div>
|
|
|
|
<div class="absolute z-10 hidden w-screen px-2 mt-2 -translate-x-1/2 left-1/2 max-w-min" data-dropdown-target="menu">
|
|
<div class="w-48 px-3 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
|
|
<%= link_to "Settings", edit_settings_path, class: 'block p-2 hover:text-gray-600' %>
|
|
<%= button_to "Log Out", session_path, method: :delete, class: 'block p-2 hover:text-gray-600' %>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<nav>
|
|
<ul class="mt-6 space-y-1">
|
|
<li>
|
|
<%= sidebar_link_to t('.dashboard'), root_path, icon: 'layout-grid' %>
|
|
</li>
|
|
<li>
|
|
<%= sidebar_link_to t('.accounts'), accounts_path, icon: 'layers' %>
|
|
</li>
|
|
<li>
|
|
<%= sidebar_link_to t('.transactions'), "#", icon: 'credit-card' %>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="flex flex-col mt-6">
|
|
<div class="flex items-center justify-between">
|
|
<%= link_to accounts_path, class: 'text-xs uppercase text-gray-500 font-bold tracking-wide' do%>
|
|
<%= t('.accounts') %>
|
|
<% end %>
|
|
<%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: t('.new_account'), data: { turbo_frame: "modal" } do %>
|
|
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
|
|
<%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
|
|
<%= lucide_icon("plus", class: "w-5 h-5") %>
|
|
<p><%= t('.new_account') %></p>
|
|
<% end %>
|
|
|
|
<% Accountable.types.each do |type| %>
|
|
<%= render 'accounts/account_list', type: Accountable.from_type(type) %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<main class="flex-grow py-5 pr-5">
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
<%= turbo_frame_tag "modal" %>
|
|
</body>
|
|
</html>
|