eminuxandCursor
0e8730b889
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>
51 lines
2.5 KiB
ERB
51 lines
2.5 KiB
ERB
<div class="space-y-4">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<h1 class="text-xl font-semibold md:text-2xl">Contatti</h1>
|
|
<div class="flex w-full flex-wrap gap-2 sm:w-auto">
|
|
<%= link_to "Export CSV", contacts_path(format: :csv), class: "#{btn_secondary} flex-1 sm:flex-none" %>
|
|
<%= link_to "Nuovo", new_contact_path, class: "#{btn_primary} flex-1 sm:flex-none" %>
|
|
</div>
|
|
</div>
|
|
<%= form_with url: contacts_path, method: :get, class: "flex flex-col gap-2 sm:flex-row" do %>
|
|
<%= text_field_tag :q, params[:q], placeholder: "Cerca…", class: input_class %>
|
|
<%= submit_tag "Cerca", class: btn_primary %>
|
|
<% end %>
|
|
|
|
<div class="space-y-2 md:hidden">
|
|
<% @contacts.each do |c| %>
|
|
<%= link_to c.organization, class: "#{card_class} block p-4 active:bg-zinc-50 dark:active:bg-zinc-800" do %>
|
|
<div class="font-semibold"><%= c.full_name %><% if c.primary_contact? %> ★<% end %></div>
|
|
<div class="mt-0.5 text-sm text-zinc-500"><%= c.organization.name %></div>
|
|
<div class="mt-1 text-sm break-anywhere text-zinc-600 dark:text-zinc-300"><%= c.email %></div>
|
|
<% if c.phone.present? || c.mobile.present? %>
|
|
<div class="mt-0.5 text-sm text-zinc-500"><%= c.phone.presence || c.mobile %></div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if @contacts.blank? %>
|
|
<p class="<%= card_class %> p-6 text-sm text-zinc-500">Nessun contatto.</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="hidden <%= card_class %> md:block">
|
|
<div class="<%= table_wrap_class %>">
|
|
<table class="<%= table_class %>">
|
|
<thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
|
|
<tr><th class="px-4 py-3">Nome</th><th class="px-4 py-3">Organizzazione</th><th class="px-4 py-3">Email</th><th class="px-4 py-3">Telefono</th></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
<% @contacts.each do |c| %>
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium"><%= link_to c.full_name, c.organization, class: "hover:underline" %><% if c.primary_contact? %> ★<% end %></td>
|
|
<td class="px-4 py-3"><%= c.organization.name %></td>
|
|
<td class="px-4 py-3"><%= c.email %></td>
|
|
<td class="px-4 py-3"><%= c.phone.presence || c.mobile %></td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<%== pagy_nav(@pagy) if @pagy.pages > 1 %>
|
|
</div>
|