mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +02:00
Feature: Implement Mobile Responsiveness (#2092)
* WIP * WIP * WIP * WIP * WIP * WIP * WIP * format * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * fix conflict * fix conflict * chore: run rubocop * fix test * update PWA logo * fix tests * chore: lint * fix test * Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index --------- Co-authored-by: Josh Pigford <josh@joshpigford.com>
This commit is contained in:
neo773
GitHub
parent
6a21f26d2d
commit
65e1bc6edd
91 changed files with 1333 additions and 527 deletions
|
|
@ -1,10 +1,11 @@
|
|||
<%= render "layouts/shared/htmldoc" do %>
|
||||
<% sidebar_config = app_sidebar_config(Current.user) %>
|
||||
|
||||
<div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface"
|
||||
<div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface pt-safe"
|
||||
data-controller="sidebar"
|
||||
data-sidebar-user-id-value="<%= Current.user.id %>"
|
||||
data-sidebar-config-value="<%= sidebar_config.to_json %>">
|
||||
<% unless controller_name == 'chats' %>
|
||||
<nav class="flex justify-between lg:justify-start lg:flex-col shrink-0 lg:w-[84px] p-3 lg:px-0 lg:py-4 lg:mr-3">
|
||||
|
||||
<button data-action="sidebar#toggleLeftPanelMobile" class="lg:hidden inline-flex p-2 rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
</button>
|
||||
|
||||
<%# Mobile only account sidebar groups %>
|
||||
<%= tag.div class: class_names("hidden bg-surface z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
|
||||
<%= tag.div class: class_names("hidden bg-surface z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300 pt-safe"),
|
||||
data: { sidebar_target: "leftPanelMobile" } do %>
|
||||
<div id="account-sidebar-tabs">
|
||||
<div class="mb-4">
|
||||
|
|
@ -54,6 +55,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="flex justify-between lg:justify-normal grow overflow-y-auto">
|
||||
<%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 hidden lg:block"),
|
||||
|
|
@ -108,7 +110,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<nav class="lg:hidden bg-container shrink-0 z-10 pb-2">
|
||||
<nav class="lg:hidden bg-surface md:bg-container shrink-0 z-10 pb-2 border border-tertiary pb-safe">
|
||||
<ul class="flex items-center justify-around gap-1">
|
||||
<li>
|
||||
<%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
|
||||
|
|
@ -123,7 +125,7 @@
|
|||
</li>
|
||||
|
||||
<li>
|
||||
<%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "bot" %>
|
||||
<%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "icon-assistant", is_custom: true %>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -3,28 +3,38 @@
|
|||
<div class="flex flex-col h-screen px-6 py-12 bg-surface">
|
||||
<div class="grow flex flex-col justify-center">
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="flex justify-center mt-2 md:mb-6">
|
||||
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-3xl font-medium text-primary text-center">
|
||||
<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3 md:hidden w-full my-4">
|
||||
<div class="bg-surface-inset rounded-lg p-1 flex">
|
||||
<%= link_to new_session_path,
|
||||
class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
|
||||
<%= t("layouts.auth.sign_in") %>
|
||||
<% end %>
|
||||
<%= link_to new_registration_path,
|
||||
class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{!current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
|
||||
<%= t("layouts.auth.sign_up") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% if controller_name == "sessions" %>
|
||||
<p class="text-sm text-center">
|
||||
<p class="text-sm text-center hidden md:block">
|
||||
<%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
|
||||
</p>
|
||||
<% elsif controller_name == "registrations" %>
|
||||
<p class="text-sm text-center text-gray-600">
|
||||
<p class="text-sm text-center text-gray-600 hidden md:block">
|
||||
<%= t(".existing_account") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
|
||||
<div class="mt-0 md:mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<%= render "layouts/shared/htmldoc" do %>
|
||||
<div class="flex flex-col h-dvh bg-surface">
|
||||
<div class="flex flex-col h-dvh bg-white pt-safe">
|
||||
<header class="flex items-center justify-between p-8">
|
||||
<%= link_to content_for(:previous_path) || imports_path do %>
|
||||
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
|
||||
|
|
@ -14,7 +14,11 @@
|
|||
<% end %>
|
||||
</header>
|
||||
|
||||
<main class="grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<main class="grow px-8 md:pt-12 pb-32 overflow-y-auto">
|
||||
<div class="flex md:hidden justify-center w-full">
|
||||
<%= yield :mobile_import_progress %>
|
||||
</div>
|
||||
|
||||
<%= yield %>
|
||||
</main>
|
||||
</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">
|
||||
<%= render "settings/settings_nav" %>
|
||||
</div>
|
||||
|
||||
<main class="py-4 px-10 grow flex h-full overflow-y-auto">
|
||||
<main class="px-4 pt-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,12 +14,13 @@
|
|||
<% 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 %>
|
||||
|
||||
<%= yield %>
|
||||
<%= settings_nav_footer_mobile %>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (breadcrumbs:, sidebar_toggle_enabled: true) %>
|
||||
|
||||
<nav class="flex items-center gap-2 mb-6">
|
||||
<nav class="items-center gap-2 mb-6 hidden md:flex">
|
||||
<% if sidebar_toggle_enabled %>
|
||||
<button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer">
|
||||
<%= icon("panel-left", color: "gray") %>
|
||||
|
|
|
|||
|
|
@ -12,14 +12,19 @@
|
|||
<%= javascript_importmap_tags %>
|
||||
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
|
||||
|
||||
<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="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
|
||||
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<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">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="manifest" href="<%= pwa_manifest_path %>">
|
||||
<link rel="apple-touch-icon" href="/logo-pwa.png">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="/icon.png">
|
||||
|
||||
<%= yield :head %>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<%= yield :head %>
|
||||
</head>
|
||||
|
||||
<body class="h-full overflow-hidden lg:overflow-auto antialiased">
|
||||
<div class="fixed z-50 bottom-6 left-24 w-80">
|
||||
<body class="h-screen overflow-hidden lg:overflow-auto antialiased h-screen-safe ">
|
||||
<div class="fixed z-50 top-6 md:top-auto md:bottom-6 md:left-24 w-full md:w-80 mx-auto md:mx-0 md:right-auto mt-safe">
|
||||
<div id="notification-tray" class="space-y-1 w-full">
|
||||
<%= render_flash_notifications %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
<%# locals: (name:, path:, icon_key:) %>
|
||||
|
||||
<%= link_to path, class: "space-y-1 lg:py-1 group block" do %>
|
||||
<%# locals: (name:, path:, icon_key:, is_custom: false) %>
|
||||
<%= link_to path, class: "space-y-1 lg:py-1 group block relative" do %>
|
||||
<% if page_active?(path) %>
|
||||
<%= tag.div class: "w-4 h-1 bg-nav-indicator rounded-bl-sm rounded-br-sm absolute top-0 left-1/2 -translate-x-1/2 lg:hidden" %>
|
||||
<% end %>
|
||||
<div class="grow flex flex-col lg:flex-row gap-1 items-center">
|
||||
<%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-container-inset" => page_active?(path)) %>
|
||||
<%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => page_active?(path)) %>
|
||||
|
||||
<%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container-inset shadow-xs text-primary" : "group-hover:bg-container-inset-hover text-secondary") do %>
|
||||
<%= icon(icon_key) %>
|
||||
<% icon_color = page_active?(path) ? "current" : "gray" %>
|
||||
<%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary") do %>
|
||||
<%= is_custom ? icon_custom(icon_key, color: icon_color) : icon(icon_key, color: icon_color) %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="grow pl-2">
|
||||
<%= tag.p class: class_names("text-center font-medium text-[11px]", page_active?(path) ? "text-primary" : "text-secondary") do %>
|
||||
<div class="grow flex justify-center">
|
||||
<%= tag.p class: class_names("font-medium text-[11px]", page_active?(path) ? "text-primary" : "text-secondary") do %>
|
||||
<%= name %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<%= render "layouts/shared/htmldoc" do %>
|
||||
<div class="flex flex-col h-dvh">
|
||||
<div class="flex flex-col h-dvh pt-safe">
|
||||
<header class="flex items-center justify-between p-8">
|
||||
<%= link_to content_for(:previous_path) || root_path do %>
|
||||
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue