Aggiunge navigazione mobile dedicata e trasforma le principali liste operative in layout più leggibili e facili da toccare. Co-authored-by: Cursor <cursoragent@cursor.com>
142 lines
7.9 KiB
ERB
142 lines
7.9 KiB
ERB
<!DOCTYPE html>
|
|
<html lang="it" class="<%= cookies[:theme] == "dark" ? "dark" : nil %>">
|
|
<head>
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var stored = localStorage.getItem("theme");
|
|
var dark = stored ? stored === "dark" : document.cookie.indexOf("theme=dark") !== -1;
|
|
document.documentElement.classList.toggle("dark", dark);
|
|
} catch (_) {}
|
|
})();
|
|
</script>
|
|
<title><%= page_title %><% if current_project %> · <%= current_project.name %><% end %> · <%= app_name %></title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="application-name" content="<%= app_name %>">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
|
<%= stylesheet_link_tag "trix", "data-turbo-track": "reload" %>
|
|
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
<%= javascript_importmap_tags %>
|
|
</head>
|
|
<body class="min-h-screen bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
|
<% if logged_in? && in_project_space? %>
|
|
<div class="flex min-h-screen">
|
|
<aside class="hidden w-60 shrink-0 flex-col border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950 md:flex">
|
|
<div class="border-b border-zinc-100 px-5 py-5 dark:border-zinc-800">
|
|
<%= link_to root_path, class: "flex items-start gap-2.5 text-zinc-900 dark:text-zinc-100" do %>
|
|
<%= render "shared/logo", variant: :mark, size: :sm %>
|
|
<span class="min-w-0">
|
|
<span class="block truncate text-base font-semibold tracking-tight"><%= current_project.name %></span>
|
|
<span class="mt-0.5 block text-[11px] text-zinc-400">istanza <%= app_name %></span>
|
|
</span>
|
|
<% end %>
|
|
<%= link_to "← Tutti i progetti", root_path, class: "mt-3 inline-block text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100" %>
|
|
</div>
|
|
<nav class="flex flex-1 flex-col gap-0.5 p-3">
|
|
<%= nav_link "Dashboard", project_root_path %>
|
|
<%= nav_link "Oggi", today_path %>
|
|
<%= nav_link "Organizzazioni", organizations_path %>
|
|
<%= nav_link "Contatti", contacts_path %>
|
|
<%= nav_link "Pipeline", pipeline_path %>
|
|
<%= nav_link "Task", tasks_path %>
|
|
<%= nav_link "Email", dashboard_mailings_path %>
|
|
<%= nav_link "Report", reports_path %>
|
|
<%= nav_link "Impostazioni", settings_path %>
|
|
<% if current_user.admin? %>
|
|
<%= nav_link "Utenti", users_path %>
|
|
<% end %>
|
|
</nav>
|
|
<div class="border-t border-zinc-100 p-3 space-y-2 dark:border-zinc-800">
|
|
<div class="text-xs font-medium uppercase tracking-wide text-zinc-400">Cambia progetto</div>
|
|
<% available_projects.each do |project| %>
|
|
<%= link_to project.name,
|
|
project_root_path(project_code: project.code),
|
|
class: "block truncate rounded-md px-2 py-1 text-xs #{project.id == current_project.id ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900' : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'}" %>
|
|
<% end %>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="flex min-w-0 flex-1 flex-col">
|
|
<header class="sticky top-0 z-20 border-b border-zinc-200 bg-white/90 pt-[env(safe-area-inset-top)] backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/90">
|
|
<div class="flex items-center gap-2 px-3 py-2 md:gap-3 md:px-6 md:py-3">
|
|
<div class="min-w-0 md:hidden">
|
|
<%= link_to root_path, class: "flex max-w-[9rem] items-center gap-2 font-semibold tracking-tight" do %>
|
|
<%= render "shared/logo", variant: :mark, size: :xs %>
|
|
<span class="truncate"><%= current_project.name %></span>
|
|
<% end %>
|
|
</div>
|
|
<%= form_with url: search_path, method: :get, class: "min-w-0 flex-1" do %>
|
|
<%= text_field_tag :q, params[:q], placeholder: "Cerca…", class: "#{input_class} min-h-10 py-2", aria: { label: "Cerca in #{current_project.name}" } %>
|
|
<% end %>
|
|
<div class="relative shrink-0" data-controller="dropdown">
|
|
<button type="button" data-action="dropdown#toggle" class="<%= btn_primary %> px-3">
|
|
<span class="md:hidden">+</span>
|
|
<span class="hidden md:inline">+ Nuovo</span>
|
|
</button>
|
|
<div data-dropdown-target="menu" class="absolute right-0 z-30 mt-2 hidden w-48 rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
|
|
<%= link_to "Organizzazione", new_organization_path, class: "block px-4 py-2.5 text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800" %>
|
|
<%= link_to "Contatto", new_contact_path, class: "block px-4 py-2.5 text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800" %>
|
|
<%= link_to "Opportunità", new_opportunity_path, class: "block px-4 py-2.5 text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800" %>
|
|
<%= link_to "Task", new_task_path, class: "block px-4 py-2.5 text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800" %>
|
|
<%= link_to "Invio email", new_mailing_path, class: "block px-4 py-2.5 text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800" %>
|
|
</div>
|
|
</div>
|
|
<%= render "shared/theme_toggle" %>
|
|
<%= render "shared/user_menu" %>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="min-w-0 flex-1 overflow-x-hidden p-4 pb-24 md:p-6">
|
|
<div id="flash"><%= render "shared/flash" %></div>
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="md:hidden" data-controller="sheet">
|
|
<%= render "shared/mobile_bottom_nav" %>
|
|
<%= render "shared/mobile_more_sheet" %>
|
|
</div>
|
|
<% elsif logged_in? %>
|
|
<div data-controller="modal" data-modal-open-value="<%= params[:new_project].present? %>">
|
|
<header class="border-b border-zinc-200 bg-white pt-[env(safe-area-inset-top)] dark:border-zinc-800 dark:bg-zinc-950">
|
|
<div class="mx-auto flex max-w-5xl items-center justify-between gap-3 px-4 py-3 md:py-4">
|
|
<div class="min-w-0">
|
|
<%= link_to root_path, class: "text-zinc-900 dark:text-zinc-100" do %>
|
|
<%= render "shared/logo", subtitle: (@page_title || "Seleziona un'istanza progetto") %>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<% if current_user.admin? %>
|
|
<button type="button" data-action="modal#show" class="<%= btn_primary %>" aria-label="Nuovo progetto" title="Nuovo progetto">+</button>
|
|
<%= link_to "Impostazioni", admin_path, class: "#{btn_secondary} hidden sm:inline-flex" %>
|
|
<% end %>
|
|
<%= render "shared/theme_toggle" %>
|
|
<%= render "shared/user_menu" %>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="mx-auto max-w-5xl p-4 md:p-8">
|
|
<div id="flash"><%= render "shared/flash" %></div>
|
|
<%= yield %>
|
|
</main>
|
|
<% if current_user.admin? %>
|
|
<%= render "projects/new_modal" %>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div class="absolute right-4 top-[max(1rem,env(safe-area-inset-top))] z-10">
|
|
<%= render "shared/theme_toggle" %>
|
|
</div>
|
|
<main class="min-h-screen">
|
|
<div id="flash"><%= render "shared/flash" %></div>
|
|
<%= yield %>
|
|
</main>
|
|
<% end %>
|
|
</body>
|
|
</html>
|