From e84d9aad5baa9f82b7b467e19d968381e03afce0 Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Mon, 15 Sep 2025 18:08:05 +0200
Subject: [PATCH] feat: Improve mobile responsiveness for promoter events page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add responsive header with stacked layout on mobile
- Implement dual layout system: table for desktop, cards for mobile
- Make all action buttons full-width and accessible on mobile
- Add proper spacing and touch targets for mobile UX
- Ensure "Créer un événement" button is full-width on mobile
- Improve empty state responsiveness

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/promoter/events/index.html.erb | 155 +++++++++++++++++++----
 1 file changed, 127 insertions(+), 28 deletions(-)

diff --git a/app/views/promoter/events/index.html.erb b/app/views/promoter/events/index.html.erb
index 3712949..c90571c 100644
--- a/app/views/promoter/events/index.html.erb
+++ b/app/views/promoter/events/index.html.erb
@@ -9,19 +9,22 @@
     { name: 'Mes événements' }
   ] %>
 
-  <div class="mb-8 flex items-center justify-between">
-    <div>
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">Mes événements</h1>
-      <p class="text-gray-600">Gérez tous vos événements depuis cette interface</p>
+  <div class="mb-8">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <div>
+        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Mes événements</h1>
+        <p class="text-gray-600">Gérez tous vos événements depuis cette interface</p>
+      </div>
+      <%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 w-full sm:w-auto" do %>
+        <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
+        Créer un événement
+      <% end %>
     </div>
-    <%= link_to new_promoter_event_path, class: "inline-flex items-center px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200" do %>
-      <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
-      Créer un événement
-    <% end %>
   </div>
 
   <% if @events.any? %>
-    <div class="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
+    <!-- Desktop Table View -->
+    <div class="hidden lg:block bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
       <div class="overflow-x-auto">
         <table class="w-full">
           <thead class="bg-gray-50 border-b border-gray-200">
@@ -30,7 +33,7 @@
               <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
               <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
               <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lieu</th>
-              <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48 lg:w-auto">Actions</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
@@ -94,27 +97,32 @@
                   <div><%= event.venue_name %></div>
                   <div class="text-xs text-gray-400 truncate max-w-xs"><%= event.venue_address %></div>
                 </td>
-                <td class="px-6 py-4">
-                  <div class="flex items-center space-x-2">
-                    <%= link_to promoter_event_path(event), class: "text-gray-400 hover:text-gray-600 transition-colors", title: "Voir" do %>
-                      <i data-lucide="eye" class="w-4 h-4"></i>
+                <td class="px-6 py-4 w-48 lg:w-auto">
+                  <div class="flex flex-col lg:flex-row items-stretch lg:items-center space-y-2 lg:space-y-0 lg:space-x-2 min-w-0">
+                    <%= link_to promoter_event_path(event), class: "flex-1 lg:flex-initial inline-flex items-center justify-center px-3 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors lg:bg-transparent lg:text-gray-400 lg:hover:text-gray-600 lg:p-0 lg:rounded-none whitespace-nowrap", title: "Voir" do %>
+                      <i data-lucide="eye" class="w-4 h-4 lg:mr-0 mr-2"></i>
+                      <span class="lg:hidden">Voir</span>
                     <% end %>
-                    <%= link_to edit_promoter_event_path(event), class: "text-gray-400 hover:text-blue-600 transition-colors", title: "Modifier" do %>
-                      <i data-lucide="edit" class="w-4 h-4"></i>
+                    <%= link_to edit_promoter_event_path(event), class: "flex-1 lg:flex-initial inline-flex items-center justify-center px-3 py-2 bg-blue-100 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-200 transition-colors lg:bg-transparent lg:text-gray-400 lg:hover:text-blue-600 lg:p-0 lg:rounded-none whitespace-nowrap", title: "Modifier" do %>
+                      <i data-lucide="edit" class="w-4 h-4 lg:mr-0 mr-2"></i>
+                      <span class="lg:hidden">Modifier</span>
                     <% end %>
                     <% if event.draft? %>
-                      <%= button_to publish_promoter_event_path(event), method: :patch, class: "text-gray-400 hover:text-green-600 transition-colors", title: "Publier" do %>
-                        <i data-lucide="upload" class="w-4 h-4"></i>
+                      <%= button_to publish_promoter_event_path(event), method: :patch, class: "flex-1 lg:flex-initial inline-flex items-center justify-center px-3 py-2 bg-green-100 text-green-700 text-sm font-medium rounded-lg hover:bg-green-200 transition-colors lg:bg-transparent lg:text-gray-400 lg:hover:text-green-600 lg:p-0 lg:rounded-none whitespace-nowrap", title: "Publier" do %>
+                        <i data-lucide="upload" class="w-4 h-4 lg:mr-0 mr-2"></i>
+                        <span class="lg:hidden">Publier</span>
                       <% end %>
                     <% elsif event.published? %>
-                      <%= button_to unpublish_promoter_event_path(event), method: :patch, class: "text-gray-400 hover:text-yellow-600 transition-colors", title: "Dépublier" do %>
-                        <i data-lucide="download" class="w-4 h-4"></i>
+                      <%= button_to unpublish_promoter_event_path(event), method: :patch, class: "flex-1 lg:flex-initial inline-flex items-center justify-center px-3 py-2 bg-yellow-100 text-yellow-700 text-sm font-medium rounded-lg hover:bg-yellow-200 transition-colors lg:bg-transparent lg:text-gray-400 lg:hover:text-yellow-600 lg:p-0 lg:rounded-none whitespace-nowrap", title: "Dépublier" do %>
+                        <i data-lucide="download" class="w-4 h-4 lg:mr-0 mr-2"></i>
+                        <span class="lg:hidden">Dépublier</span>
                       <% end %>
                     <% end %>
                     <%= button_to promoter_event_path(event), method: :delete,
                         data: { confirm: "Êtes-vous sûr de vouloir supprimer cet événement ?" },
-                        class: "text-gray-400 hover:text-red-600 transition-colors", title: "Supprimer" do %>
-                      <i data-lucide="trash-2" class="w-4 h-4"></i>
+                        class: "flex-1 lg:flex-initial inline-flex items-center justify-center px-3 py-2 bg-red-100 text-red-700 text-sm font-medium rounded-lg hover:bg-red-200 transition-colors lg:bg-transparent lg:text-gray-400 lg:hover:text-red-600 lg:p-0 lg:rounded-none whitespace-nowrap", title: "Supprimer" do %>
+                      <i data-lucide="trash-2" class="w-4 h-4 lg:mr-0 mr-2"></i>
+                      <span class="lg:hidden">Supprimer</span>
                     <% end %>
                   </div>
                 </td>
@@ -125,17 +133,108 @@
       </div>
     </div>
 
+    <!-- Mobile Card View -->
+    <div class="lg:hidden space-y-4">
+      <% @events.each do |event| %>
+        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+          <div class="p-4">
+            <!-- Event Header -->
+            <div class="flex items-start space-x-4 mb-4">
+              <div class="h-12 w-12 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
+              </div>
+              <div class="flex-1 min-w-0">
+                <h3 class="text-lg font-semibold text-gray-900 mb-1">
+                  <%= link_to event.name, promoter_event_path(event), class: "hover:text-purple-600 transition-colors" %>
+                </h3>
+                <p class="text-sm text-gray-500 line-clamp-2">
+                  <%= event.description.truncate(100) %>
+                </p>
+              </div>
+            </div>
+
+            <!-- Status -->
+            <div class="flex flex-wrap items-center gap-2 mb-4">
+              <% case event.state %>
+              <% when "draft" %>
+                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
+                  <i data-lucide="edit-3" class="w-3 h-3 mr-1"></i>
+                  Brouillon
+                </span>
+              <% when "published" %>
+                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+                  <i data-lucide="eye" class="w-3 h-3 mr-1"></i>
+                  Publié
+                </span>
+              <% when "canceled" %>
+                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
+                  <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i>
+                  Annulé
+                </span>
+              <% when "sold_out" %>
+                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
+                  <i data-lucide="users" class="w-3 h-3 mr-1"></i>
+                  Complet
+                </span>
+              <% end %>
+
+              <% if event.featured? %>
+                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                  <i data-lucide="star" class="w-3 h-3 mr-1"></i>
+                  À la une
+                </span>
+              <% end %>
+            </div>
+
+            <!-- Details Grid -->
+            <div class="grid grid-cols-2 gap-4 mb-4 text-sm">
+              <div>
+                <dt class="font-medium text-gray-500 mb-1">Date</dt>
+                <dd class="text-gray-900">
+                  <% if event.start_time %>
+                    <div><%= event.start_time.strftime("%d/%m/%Y") %></div>
+                    <div class="text-xs text-gray-500"><%= event.start_time.strftime("%H:%M") %></div>
+                  <% else %>
+                    <span class="text-gray-400">Non définie</span>
+                  <% end %>
+                </dd>
+              </div>
+              <div>
+                <dt class="font-medium text-gray-500 mb-1">Lieu</dt>
+                <dd class="text-gray-900">
+                  <div class="truncate"><%= event.venue_name %></div>
+                  <div class="text-xs text-gray-500 truncate"><%= event.venue_address %></div>
+                </dd>
+              </div>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="space-y-2 pt-4 border-t border-gray-100">
+              <%= link_to promoter_event_path(event), class: "w-full inline-flex items-center justify-center px-3 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors" do %>
+                <i data-lucide="eye" class="w-4 h-4 mr-2"></i>
+                Voir
+              <% end %>
+              <%= link_to edit_promoter_event_path(event), class: "w-full inline-flex items-center justify-center px-3 py-2 bg-blue-100 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-200 transition-colors" do %>
+                <i data-lucide="edit" class="w-4 h-4 mr-2"></i>
+                Modifier
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
     <div class="mt-6">
       <%= paginate @events if respond_to?(:paginate) %>
     </div>
   <% else %>
-    <div class="bg-white rounded-2xl border-2 border-dashed border-gray-300 p-12 text-center">
-      <div class="mx-auto h-24 w-24 rounded-full bg-gray-100 flex items-center justify-center mb-6">
-        <i data-lucide="calendar-plus" class="w-12 h-12 text-gray-400"></i>
+    <div class="bg-white rounded-2xl border-2 border-dashed border-gray-300 p-6 sm:p-12 text-center">
+      <div class="mx-auto h-20 w-20 sm:h-24 sm:w-24 rounded-full bg-gray-100 flex items-center justify-center mb-6">
+        <i data-lucide="calendar-plus" class="w-10 h-10 sm:w-12 sm:h-12 text-gray-400"></i>
       </div>
-      <h3 class="text-xl font-semibold text-gray-900 mb-2">Aucun événement</h3>
-      <p class="text-gray-500 mb-6">Vous n'avez pas encore créé d'événement. Commencez dès maintenant !</p>
-      <%= link_to new_promoter_event_path, class: "inline-flex items-center px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200" do %>
+      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">Aucun événement</h3>
+      <p class="text-gray-500 mb-6 px-4">Vous n'avez pas encore créé d'événement. Commencez dès maintenant !</p>
+      <%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 w-full sm:w-auto" do %>
         <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
         Créer mon premier événement
       <% end %>