From d1ef962f749478757ff9e3fd1bb9448974aec9b0 Mon Sep 17 00:00:00 2001 From: kbe Date: Mon, 15 Sep 2025 18:23:45 +0200 Subject: [PATCH] feat: Improve mobile responsiveness for promoter event detail page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/views/promoter/events/show.html.erb | 167 ++++++++++++------------ 1 file changed, 84 insertions(+), 83 deletions(-) diff --git a/app/views/promoter/events/show.html.erb b/app/views/promoter/events/show.html.erb index 33364da..b87da97 100644 --- a/app/views/promoter/events/show.html.erb +++ b/app/views/promoter/events/show.html.erb @@ -12,57 +12,58 @@
-
-
- <%= link_to promoter_events_path, class: "text-gray-400 hover:text-gray-600 transition-colors" do %> - - <% end %> -
-

<%= @event.name %>

-
- - - <%= @event.start_time&.strftime("%d/%m/%Y à %H:%M") || "Date non définie" %> - - - - <%= @event.venue_name %> - -
+ +
+ <%= link_to promoter_events_path, class: "text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0" do %> + + <% end %> +
+

<%= @event.name %>

+
+ + + <%= @event.start_time&.strftime("%d/%m/%Y à %H:%M") || "Date non définie" %> + + + + <%= @event.venue_name %> +
-
- <%= 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 %> - - Modifier - <% end %> +
- <% if @event.draft? %> - <% 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 %> - - Publier - <% end %> - <% 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 %> - - Publier - <% end %> - <% end %> - <% 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 %> - - Dépublier - <% end %> - <% end %> + +
+ <%= 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 %> + + Modifier + <% end %> - <% 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 %> - - Annuler + <% if @event.draft? %> + <% if @event.ticket_types.blank? %> + <%= 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 %> + + Publier + <% end %> + <% else %> + <%= 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 %> + + Publier <% end %> <% end %> -
+ <% elsif @event.published? %> + <%= 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 %> + + Dépublier + <% end %> + <% end %> + + <% if @event.published? %> + <%= 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 %> + + Annuler + <% end %> + <% end %>
@@ -79,17 +80,17 @@
- + <% if @event.ticket_types.blank? %>
-
- -
+
+ +

Aucun type de billet configuré

Vous devez créer au moins un type de billet avant de pouvoir publier cet événement.

-
- <%= 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 <% end %>
@@ -98,14 +99,14 @@ <% end %> <% when "published" %>
-
- -
+
+ +

Événement publié

Cet événement est visible publiquement et les utilisateurs peuvent acheter des billets.

-
- <%= 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 <% end %>
@@ -159,9 +160,9 @@
-
+
-
+
<% if @event.image.present? %>
@@ -170,27 +171,27 @@ <% end %> -
+

Description

-
+
<%= simple_format(@event.description) %>
-
+

Lieu

- -
-

<%= @event.venue_name %>

-

<%= @event.venue_address %>

+ +
+

<%= @event.venue_name %>

+

<%= @event.venue_address %>

- - <%= @event.latitude %>, <%= @event.longitude %> + + <%= @event.latitude %>, <%= @event.longitude %>
@@ -199,20 +200,20 @@
-
+

Statistiques

- Types de billets + Types de billets <%= @event.ticket_types.count %>
- Billets vendus + Billets vendus <%= @event.tickets.count %>
- Revenus - + Revenus + <%= number_to_currency(@event.tickets.sum(:price_cents) / 100.0, unit: "€") %>
@@ -220,25 +221,25 @@
-
+

Informations

Créé le -

<%= @event.created_at.strftime("%d/%m/%Y à %H:%M") %>

+

<%= @event.created_at.strftime("%d/%m/%Y à %H:%M") %>

Modifié le -

<%= @event.updated_at.strftime("%d/%m/%Y à %H:%M") %>

+

<%= @event.updated_at.strftime("%d/%m/%Y à %H:%M") %>

Réservation pendant l'événement

<% if @event.allow_booking_during_event? %> - + Autorisée <% else %> - + Interdite <% end %>

@@ -246,34 +247,34 @@ <% if @event.start_time %>
Début -

<%= @event.start_time.strftime("%d/%m/%Y à %H:%M") %>

+

<%= @event.start_time.strftime("%d/%m/%Y à %H:%M") %>

<% end %> <% if @event.end_time %>
Fin -

<%= @event.end_time.strftime("%d/%m/%Y à %H:%M") %>

+

<%= @event.end_time.strftime("%d/%m/%Y à %H:%M") %>

<% end %>
-
+

Actions rapides

- <%= 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 %> Gérer les types de billets <% 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 %> Marquer comme complet <% end %>
<%= 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." }, - 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 %> Supprimer l'événement <% end %>