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

feat: Improve mobile responsiveness for promoter event detail page

Browse Source 
- Restructure header layout with separated title and action buttons
- Make all action buttons full-width on mobile (w-full sm:w-auto)
- Add responsive text sizing and proper truncation for long titles
- Improve status banners with flexible layouts for mobile
- Enhance content cards with responsive padding (p-4 sm:p-6)
- Add better text wrapping and overflow handling throughout
- Optimize sidebar with responsive font sizes and spacing
- Ensure consistent touch targets and button accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
2025-09-15 18:23:45 +02:00
parent e84d9aad5b
commit d1ef962f74
1 changed files with 84 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
app/views/promoter/events/show.html.erb
View File

@@ -12,59 +12,60 @@
<!-- Header with actions --> <!-- Header with actions -->
<div class="mb-8"> <div class="mb-8">
<div class="flex items-center justify-between"> <!-- Back button and title -->
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4 mb-6">
<%= link_to promoter_events_path, class: "text-gray-400 hover:text-gray-600 transition-colors" do %> <%= link_to promoter_events_path, class: "text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0" do %>
<i data-lucide="arrow-left" class="w-5 h-5"></i> <i data-lucide="arrow-left" class="w-5 h-5"></i>
<% end %> <% end %>
<div> <div class="min-w-0 flex-1">
<h1 class="text-3xl font-bold text-gray-900 mb-2"><%= @event.name %></h1> <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 truncate"><%= @event.name %></h1>
<div class="flex items-center space-x-4 text-sm text-gray-500"> <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-sm text-gray-500">
<span class="flex items-center"> <span class="flex items-center">
<i data-lucide="calendar" class="w-4 h-4 mr-1"></i> <i data-lucide="calendar" class="w-4 h-4 mr-1 flex-shrink-0"></i>
<%= @event.start_time&.strftime("%d/%m/%Y à %H:%M") || "Date non définie" %> <span class="truncate"><%= @event.start_time&.strftime("%d/%m/%Y à %H:%M") || "Date non définie" %></span>
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-1"></i> <i data-lucide="map-pin" class="w-4 h-4 mr-1 flex-shrink-0"></i>
<%= @event.venue_name %> <span class="truncate"><%= @event.venue_name %></span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center space-x-3">
<%= link_to edit_promoter_event_path(@event), class: "inline-flex items-center px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors duration-200" do %> <!-- Action buttons -->
<div class="flex flex-col sm:flex-row gap-3">
<%= link_to edit_promoter_event_path(@event), class: "w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors duration-200" do %>
<i data-lucide="edit" class="w-4 h-4 mr-2"></i> <i data-lucide="edit" class="w-4 h-4 mr-2"></i>
Modifier Modifier
<% end %> <% end %>
<% if @event.draft? %> <% if @event.draft? %>
<% if @event.ticket_types.blank? %> <% if @event.ticket_types.blank? %>
<%= button_to publish_promoter_event_path(@event), method: :patch, disabled: true, class: "inline-flex items-center px-4 py-2 bg-gray-400 text-white font-medium rounded-lg cursor-not-allowed transition-colors duration-200", title: "Vous devez créer au moins un type de billet avant de publier" do %> <%= button_to publish_promoter_event_path(@event), method: :patch, disabled: true, class: "w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 bg-gray-400 text-white font-medium rounded-lg cursor-not-allowed transition-colors duration-200", title: "Vous devez créer au moins un type de billet avant de publier" do %>
<i data-lucide="upload" class="w-4 h-4 mr-2"></i> <i data-lucide="upload" class="w-4 h-4 mr-2"></i>
Publier Publier
<% end %> <% end %>
<% else %> <% else %>
<%= button_to publish_promoter_event_path(@event), method: :patch, class: "inline-flex items-center px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-200" do %> <%= button_to publish_promoter_event_path(@event), method: :patch, class: "w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-200" do %>
<i data-lucide="upload" class="w-4 h-4 mr-2"></i> <i data-lucide="upload" class="w-4 h-4 mr-2"></i>
Publier Publier
<% end %> <% end %>
<% end %> <% end %>
<% elsif @event.published? %> <% elsif @event.published? %>
<%= button_to unpublish_promoter_event_path(@event), method: :patch, class: "inline-flex items-center px-4 py-2 bg-yellow-600 text-white font-medium rounded-lg hover:bg-yellow-700 transition-colors duration-200" do %> <%= button_to unpublish_promoter_event_path(@event), method: :patch, class: "w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 bg-yellow-600 text-white font-medium rounded-lg hover:bg-yellow-700 transition-colors duration-200" do %>
<i data-lucide="download" class="w-4 h-4 mr-2"></i> <i data-lucide="download" class="w-4 h-4 mr-2"></i>
Dépublier Dépublier
<% end %> <% end %>
<% end %> <% end %>
<% if @event.published? %> <% if @event.published? %>
<%= button_to cancel_promoter_event_path(@event), method: :patch, class: "inline-flex items-center px-4 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors duration-200", data: { confirm: "Êtes-vous sûr de vouloir annuler cet événement ?" } do %> <%= button_to cancel_promoter_event_path(@event), method: :patch, class: "w-full sm:w-auto inline-flex items-center justify-center px-4 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors duration-200", data: { confirm: "Êtes-vous sûr de vouloir annuler cet événement ?" } do %>
<i data-lucide="x-circle" class="w-4 h-4 mr-2"></i> <i data-lucide="x-circle" class="w-4 h-4 mr-2"></i>
Annuler Annuler
<% end %> <% end %>
<% end %> <% end %>
</div> </div>
</div> </div>
</div>
<!-- Status banner --> <!-- Status banner -->
<div class="mb-8"> <div class="mb-8">
@@ -82,14 +83,14 @@
<% if @event.ticket_types.blank? %> <% if @event.ticket_types.blank? %>
<div class="bg-amber-50 border border-amber-200 rounded-2xl p-4 mt-4"> <div class="bg-amber-50 border border-amber-200 rounded-2xl p-4 mt-4">
<div class="flex items-center"> <div class="flex flex-col sm:flex-row sm:items-center gap-3">
<i data-lucide="alert-triangle" class="w-5 h-5 text-amber-400 mr-3"></i> <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-400 flex-shrink-0"></i>
<div> <div class="flex-1 min-w-0">
<h3 class="text-sm font-medium text-amber-900">Aucun type de billet configuré</h3> <h3 class="text-sm font-medium text-amber-900">Aucun type de billet configuré</h3>
<p class="text-sm text-amber-700">Vous devez créer au moins un type de billet avant de pouvoir publier cet événement.</p> <p class="text-sm text-amber-700">Vous devez créer au moins un type de billet avant de pouvoir publier cet événement.</p>
</div> </div>
<div class="ml-auto"> <div class="flex-shrink-0">
<%= link_to promoter_event_ticket_types_path(@event), class: "text-amber-600 hover:text-amber-800 font-medium text-sm" do %> <%= link_to promoter_event_ticket_types_path(@event), class: "text-amber-600 hover:text-amber-800 font-medium text-sm whitespace-nowrap" do %>
Configurer les billets <i data-lucide="external-link" class="w-4 h-4 inline ml-1"></i> Configurer les billets <i data-lucide="external-link" class="w-4 h-4 inline ml-1"></i>
<% end %> <% end %>
</div> </div>
@@ -98,14 +99,14 @@
<% end %> <% end %>
<% when "published" %> <% when "published" %>
<div class="bg-green-50 border border-green-200 rounded-2xl p-4"> <div class="bg-green-50 border border-green-200 rounded-2xl p-4">
<div class="flex items-center"> <div class="flex flex-col sm:flex-row sm:items-center gap-3">
<i data-lucide="eye" class="w-5 h-5 text-green-400 mr-3"></i> <i data-lucide="eye" class="w-5 h-5 text-green-400 flex-shrink-0"></i>
<div> <div class="flex-1 min-w-0">
<h3 class="text-sm font-medium text-green-900">Événement publié</h3> <h3 class="text-sm font-medium text-green-900">Événement publié</h3>
<p class="text-sm text-green-700">Cet événement est visible publiquement et les utilisateurs peuvent acheter des billets.</p> <p class="text-sm text-green-700">Cet événement est visible publiquement et les utilisateurs peuvent acheter des billets.</p>
</div> </div>
<div class="ml-auto"> <div class="flex-shrink-0">
<%= link_to event_path(@event.slug, @event), target: "_blank", class: "text-green-600 hover:text-green-800 font-medium text-sm" do %> <%= link_to event_path(@event.slug, @event), target: "_blank", class: "text-green-600 hover:text-green-800 font-medium text-sm whitespace-nowrap" do %>
Voir publiquement <i data-lucide="external-link" class="w-4 h-4 inline ml-1"></i> Voir publiquement <i data-lucide="external-link" class="w-4 h-4 inline ml-1"></i>
<% end %> <% end %>
</div> </div>
@@ -159,9 +160,9 @@
</div> </div>
<!-- Event details --> <!-- Event details -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Main content --> <!-- Main content -->
<div class="lg:col-span-2 space-y-8"> <div class="lg:col-span-2 space-y-6 lg:space-y-8">
<!-- Event image --> <!-- Event image -->
<% if @event.image.present? %> <% if @event.image.present? %>
<div class="aspect-video bg-gray-100 rounded-2xl overflow-hidden"> <div class="aspect-video bg-gray-100 rounded-2xl overflow-hidden">
@@ -170,27 +171,27 @@
<% end %> <% end %>
<!-- Description --> <!-- Description -->
<div class="bg-white rounded-2xl border border-gray-200 p-6"> <div class="bg-white rounded-2xl border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Description</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Description</h3>
<div class="prose prose-gray max-w-none"> <div class="prose prose-gray prose-sm sm:prose-base max-w-none">
<%= simple_format(@event.description) %> <%= simple_format(@event.description) %>
</div> </div>
</div> </div>
<!-- Location details --> <!-- Location details -->
<div class="bg-white rounded-2xl border border-gray-200 p-6"> <div class="bg-white rounded-2xl border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Lieu</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Lieu</h3>
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-3">
<i data-lucide="building" class="w-5 h-5 text-gray-400 mt-0.5"></i> <i data-lucide="building" class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0"></i>
<div> <div class="min-w-0 flex-1">
<p class="font-medium text-gray-900"><%= @event.venue_name %></p> <p class="font-medium text-gray-900 break-words"><%= @event.venue_name %></p>
<p class="text-gray-500"><%= @event.venue_address %></p> <p class="text-gray-500 break-words"><%= @event.venue_address %></p>
</div> </div>
</div> </div>
<div class="flex items-center space-x-3 text-sm text-gray-500"> <div class="flex items-center space-x-3 text-sm text-gray-500">
<i data-lucide="map-pin" class="w-4 h-4"></i> <i data-lucide="map-pin" class="w-4 h-4 flex-shrink-0"></i>
<span><%= @event.latitude %>, <%= @event.longitude %></span> <span class="break-all"><%= @event.latitude %>, <%= @event.longitude %></span>
</div> </div>
</div> </div>
</div> </div>
@@ -199,20 +200,20 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="space-y-6"> <div class="space-y-6">
<!-- Event stats --> <!-- Event stats -->
<div class="bg-white rounded-2xl border border-gray-200 p-6"> <div class="bg-white rounded-2xl border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Statistiques</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Statistiques</h3>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Types de billets</span> <span class="text-gray-500 text-sm sm:text-base">Types de billets</span>
<span class="font-medium"><%= @event.ticket_types.count %></span> <span class="font-medium"><%= @event.ticket_types.count %></span>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Billets vendus</span> <span class="text-gray-500 text-sm sm:text-base">Billets vendus</span>
<span class="font-medium"><%= @event.tickets.count %></span> <span class="font-medium"><%= @event.tickets.count %></span>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Revenus</span> <span class="text-gray-500 text-sm sm:text-base">Revenus</span>
<span class="font-medium"> <span class="font-medium text-sm sm:text-base">
<%= number_to_currency(@event.tickets.sum(:price_cents) / 100.0, unit: "€") %> <%= number_to_currency(@event.tickets.sum(:price_cents) / 100.0, unit: "€") %>
</span> </span>
</div> </div>
@@ -220,25 +221,25 @@
</div> </div>
<!-- Event info --> <!-- Event info -->
<div class="bg-white rounded-2xl border border-gray-200 p-6"> <div class="bg-white rounded-2xl border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Informations</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations</h3>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<span class="text-sm text-gray-500">Créé le</span> <span class="text-sm text-gray-500">Créé le</span>
<p class="text-sm"><%= @event.created_at.strftime("%d/%m/%Y à %H:%M") %></p> <p class="text-sm break-words"><%= @event.created_at.strftime("%d/%m/%Y à %H:%M") %></p>
</div> </div>
<div> <div>
<span class="text-sm text-gray-500">Modifié le</span> <span class="text-sm text-gray-500">Modifié le</span>
<p class="text-sm"><%= @event.updated_at.strftime("%d/%m/%Y à %H:%M") %></p> <p class="text-sm break-words"><%= @event.updated_at.strftime("%d/%m/%Y à %H:%M") %></p>
</div> </div>
<div> <div>
<span class="text-sm text-gray-500">Réservation pendant l'événement</span> <span class="text-sm text-gray-500">Réservation pendant l'événement</span>
<p class="text-sm flex items-center"> <p class="text-sm flex items-center">
<% if @event.allow_booking_during_event? %> <% if @event.allow_booking_during_event? %>
<i data-lucide="check-circle" class="w-4 h-4 text-green-500 mr-1"></i> <i data-lucide="check-circle" class="w-4 h-4 text-green-500 mr-1 flex-shrink-0"></i>
Autorisée Autorisée
<% else %> <% else %>
<i data-lucide="x-circle" class="w-4 h-4 text-red-500 mr-1"></i> <i data-lucide="x-circle" class="w-4 h-4 text-red-500 mr-1 flex-shrink-0"></i>
Interdite Interdite
<% end %> <% end %>
</p> </p>
@@ -246,34 +247,34 @@
<% if @event.start_time %> <% if @event.start_time %>
<div> <div>
<span class="text-sm text-gray-500">Début</span> <span class="text-sm text-gray-500">Début</span>
<p class="text-sm"><%= @event.start_time.strftime("%d/%m/%Y à %H:%M") %></p> <p class="text-sm break-words"><%= @event.start_time.strftime("%d/%m/%Y à %H:%M") %></p>
</div> </div>
<% end %> <% end %>
<% if @event.end_time %> <% if @event.end_time %>
<div> <div>
<span class="text-sm text-gray-500">Fin</span> <span class="text-sm text-gray-500">Fin</span>
<p class="text-sm"><%= @event.end_time.strftime("%d/%m/%Y à %H:%M") %></p> <p class="text-sm break-words"><%= @event.end_time.strftime("%d/%m/%Y à %H:%M") %></p>
</div> </div>
<% end %> <% end %>
</div> </div>
</div> </div>
<!-- Quick actions --> <!-- Quick actions -->
<div class="bg-white rounded-2xl border border-gray-200 p-6"> <div class="bg-white rounded-2xl border border-gray-200 p-4 sm:p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Actions rapides</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Actions rapides</h3>
<div class="space-y-3"> <div class="space-y-3">
<%= link_to promoter_event_ticket_types_path(@event), class: "w-full inline-flex items-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200" do %> <%= link_to promoter_event_ticket_types_path(@event), class: "w-full inline-flex items-center justify-center px-4 py-3 bg-purple-600 text-white font-medium text-sm rounded-lg hover:bg-purple-700 transition-colors duration-200" do %>
<i data-lucide="ticket" class="w-4 h-4 mr-2"></i> <i data-lucide="ticket" class="w-4 h-4 mr-2"></i>
Gérer les types de billets Gérer les types de billets
<% end %> <% end %>
<%= button_to mark_sold_out_promoter_event_path(@event), method: :patch, class: "w-full inline-flex items-center px-4 py-2 bg-gray-50 text-gray-700 font-medium rounded-lg hover:bg-gray-100 transition-colors duration-200", disabled: !@event.published? do %> <%= button_to mark_sold_out_promoter_event_path(@event), method: :patch, class: "w-full inline-flex items-center justify-center px-4 py-3 bg-gray-50 text-gray-700 font-medium text-sm rounded-lg hover:bg-gray-100 transition-colors duration-200", disabled: !@event.published? do %>
<i data-lucide="users" class="w-4 h-4 mr-2"></i> <i data-lucide="users" class="w-4 h-4 mr-2"></i>
Marquer comme complet Marquer comme complet
<% end %> <% end %>
<hr class="border-gray-200"> <hr class="border-gray-200">
<%= button_to promoter_event_path(@event), method: :delete, <%= button_to promoter_event_path(@event), method: :delete,
data: { confirm: "Êtes-vous sûr de vouloir supprimer cet événement ? Cette action est irréversible." }, data: { confirm: "Êtes-vous sûr de vouloir supprimer cet événement ? Cette action est irréversible." },
class: "w-full inline-flex items-center px-4 py-2 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors duration-200" do %> class: "w-full inline-flex items-center justify-center px-4 py-3 text-red-600 font-medium text-sm rounded-lg hover:bg-red-50 transition-colors duration-200" do %>
<i data-lucide="trash-2" class="w-4 h-4 mr-2"></i> <i data-lucide="trash-2" class="w-4 h-4 mr-2"></i>
Supprimer l'événement Supprimer l'événement
<% end %> <% end %>