kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Update breadcrumbs to use dynamic component with new design system colors

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
2025-09-08 17:51:11 +02:00
parent 259837622a
commit 569303b631
6 changed files with 996 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/views/tickets/show.html.erb
View File

@@ -1,37 +1,12 @@
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Breadcrumb -->
<nav class="flex mb-6" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
<li class="inline-flex items-center">
<%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<%= link_to "Commande ##{@order.id}", order_path(@order), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Billet #<%= @ticket.id %></span>
</div>
</li>
</ol>
</nav>
<%= render 'components/breadcrumb', crumbs: [
{ name: 'Accueil', path: root_path },
{ name: 'Tableau de bord', path: dashboard_path },
{ name: "Commande ##{@order.id}", path: order_path(@order) },
{ name: "Billet ##{@ticket.id}", path: nil }
] %>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Ticket Header -->
@@ -42,7 +17,7 @@
<p class="text-purple-100">ID: #<%= @ticket.id %></p>
</div>
<div class="text-right">
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
case @ticket.status
when 'active' then 'bg-green-100 text-green-800'
when 'draft' then 'bg-yellow-100 text-yellow-800'
@@ -51,7 +26,7 @@
when 'refunded' then 'bg-blue-100 text-blue-800'
else 'bg-gray-100 text-gray-800'
end %>">
<%=
<%=
case @ticket.status
when 'active' then 'Valide'
when 'draft' then 'En attente'
@@ -81,9 +56,7 @@
<div>
<label class="block text-sm font-medium text-gray-500 mb-1">Date et heure</label>
<div class="flex items-center text-gray-900">
<svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<i data-lucide="calendar" class="w-4 h-4 mr-2 text-gray-400"></i>
<%= @event.start_time.strftime("%d %B %Y") %><br>
<small class="text-gray-600"><%= @event.start_time.strftime("%H:%M") %></small>
</div>
@@ -92,10 +65,7 @@
<div>
<label class="block text-sm font-medium text-gray-500 mb-1">Lieu</label>
<div class="flex items-center text-gray-900">
<svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-gray-400"></i>
<%= @event.venue_name %>
</div>
</div>
@@ -163,18 +133,14 @@
<div class="flex flex-col sm:flex-row gap-4">
<%= link_to order_path(@order),
class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" do %>
<svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
</svg>
<i data-lucide="arrow-left" class="w-4 h-4 inline-block mr-2"></i>
Retour aux informations de commande
<% end %>
<% if @ticket.status == 'active' %>
<%= link_to ticket_download_path(@ticket.qr_code),
class: "flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5 text-center" do %>
<svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
class: "flex-1 btn btn-primary py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5 text-center" do %>
<i data-lucide="download" class="w-4 h-4 inline-block mr-2"></i>
Télécharger le PDF
<% end %>
<% end %>
@@ -184,9 +150,7 @@
<!-- Important Notice -->
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="info" class="w-5 h-5 text-blue-600 mr-2 mt-0.5"></i>
<div class="flex-1">
<h3 class="text-blue-800 font-medium mb-1">Informations importantes</h3>
<ul class="text-blue-700 text-sm space-y-1">
@@ -200,4 +164,4 @@
</div>
</div>
</div>
</div>
</div>