fix: Update views and controllers for event image display
Update all event-related view templates and controllers to properly handle and display event images throughout the application. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<%= link_to event_path(event.slug, event), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
|
||||
<%= image_tag event.event_image_variant(:small), alt: event.name, class: "w-full h-full object-cover" if event.image.attached? %>
|
||||
<%= image_tag event.event_image_variant(:small), alt: event.name, class: "w-full h-full object-cover" if event.has_image? %>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<% @events.each do |event| %>
|
||||
<article class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
|
||||
<%= link_to event_path(event.slug, event), class: "block" do %>
|
||||
<% if event.image.attached? %>
|
||||
<% if event.has_image? %>
|
||||
<div class="relative overflow-hidden aspect-[4/3]">
|
||||
<%= image_tag event.event_image_variant(:medium), alt: event.name, class: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" %>
|
||||
<!-- Event featured badge -->
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<!-- Event main wrapper -->
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<!-- Event Header with Image -->
|
||||
<% if @event.image.attached? %>
|
||||
<% if @event.has_image? %>
|
||||
<div class="relative h-96">
|
||||
<%= image_tag @event.event_image_variant(:large), class: "w-full h-full object-cover" %>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
|
||||
@@ -88,12 +88,8 @@
|
||||
%>
|
||||
|
||||
<% map_providers.each do |name, url| %>
|
||||
<%= link_to url, target: "_blank", rel: "noopener",
|
||||
class: "inline-flex items-center px-3 py-2 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" do %>
|
||||
<span class="mr-1"><%= icons[name] %></span>
|
||||
<%= name %>
|
||||
<%= link_to "#{icons[name]} #{name}".html_safe, url, target: "_blank", rel: "noopener", class: "inline-flex items-center px-3 py-2 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -131,14 +127,7 @@
|
||||
|
||||
<!-- Right Column: Ticket Selection -->
|
||||
<div class="lg:col-span-1">
|
||||
<%= form_with url: event_order_new_path(@event.slug, @event.id), method: :get, id: "checkout_form", local: true, data: {
|
||||
controller: "ticket-selection",
|
||||
ticket_selection_target: "form",
|
||||
ticket_selection_event_slug_value: @event.slug,
|
||||
ticket_selection_event_id_value: @event.id,
|
||||
ticket_selection_order_new_url_value: event_order_new_path(@event.slug, @event.id),
|
||||
ticket_selection_store_cart_url_value: api_v1_store_cart_path
|
||||
} do |form| %>
|
||||
<%= form_with url: event_order_new_path(@event.slug, @event.id), method: :get, id: "checkout_form", local: true, data: { controller: "ticket-selection", ticket_selection_target: "form", ticket_selection_event_slug_value: @event.slug, ticket_selection_event_id_value: @event.id, ticket_selection_order_new_url_value: event_order_new_path(@event.slug, @event.id), ticket_selection_store_cart_url_value: api_v1_store_cart_path } do |form| %>
|
||||
|
||||
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border border-purple-100 p-6 shadow-sm">
|
||||
<div class="flex justify-center sm:justify-start mb-6">
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden">
|
||||
<!-- Event Image -->
|
||||
<div class="relative overflow-hidden aspect-[4/3]">
|
||||
<% if event.image.attached? %>
|
||||
<% if event.has_image? %>
|
||||
<%= image_tag event.event_image_variant(:medium), alt: event.name, class: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" %>
|
||||
<% else %>
|
||||
<div class="w-full h-full bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
|
||||
|
||||
@@ -70,12 +70,23 @@
|
||||
<%= form.label :image, "Image de couverture", class: "block text-sm font-medium text-gray-700 mb-2" %>
|
||||
<div class="space-y-4">
|
||||
<!-- Current image preview -->
|
||||
<% if @event.image.attached? %>
|
||||
<div class="relative">
|
||||
<%= image_tag @event.image.variant(resize_to_limit: [400, 225]), class: "w-full h-48 object-cover rounded-lg border border-gray-200" %>
|
||||
<div class="absolute top-2 right-2">
|
||||
<button type="button" onclick="this.closest('div').querySelector('input[type=file]').click()" class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition-colors">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
<% if @event.has_image? %>
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<% if @event.event_image_variant(:small).is_a?(String) %>
|
||||
<!-- Old image field -->
|
||||
<%= image_tag @event.event_image_variant(:small), class: "w-32 h-24 object-cover rounded-lg border border-gray-200" %>
|
||||
<% else %>
|
||||
<!-- Attached image -->
|
||||
<%= image_tag @event.event_image_variant(:small), class: "w-32 h-24 object-cover rounded-lg border border-gray-200" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 mb-1">Image actuelle</p>
|
||||
<p class="text-sm text-gray-600 mb-2">Uploader une nouvelle image pour la remplacer.</p>
|
||||
<button type="button" onclick="this.closest('div').querySelector('input[type=file]').click()" class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition-colors inline-flex items-center">
|
||||
<i data-lucide="trash-2" class="w-4 h-4 mr-1"></i>
|
||||
<span>Remplacer l'image</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,7 +97,7 @@
|
||||
<%= form.file_field :image, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100", accept: "image/png,image/jpeg,image/jpg,image/webp", data: { action: "change->event-form#previewImage" } %>
|
||||
<div class="mt-1 text-sm text-gray-500">
|
||||
Formats acceptés : PNG, JPG, JPEG, WebP (max 5MB)
|
||||
<% if @event.image.attached? %>
|
||||
<% if @event.has_image? %>
|
||||
<br>Laissez vide pour conserver l'image actuelle
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
<%= form.label :image, "Image de couverture", class: "block text-sm font-medium text-gray-700 mb-2" %>
|
||||
<div class="space-y-4">
|
||||
<!-- Current image preview (for edit mode) -->
|
||||
<% if @event.image.attached? %>
|
||||
<% if @event.has_image? %>
|
||||
<div class="relative">
|
||||
<%= image_tag @event.image.variant(resize_to_limit: [400, 225]), class: "w-full h-48 object-cover rounded-lg border border-gray-200" %>
|
||||
<div class="absolute top-2 right-2">
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
<!-- Main content -->
|
||||
<div class="lg:col-span-2 space-y-6 lg:space-y-8">
|
||||
<!-- Event image -->
|
||||
<% if @event.image.attached? %>
|
||||
<% if @event.has_image? %>
|
||||
<div class="aspect-video bg-gray-100 rounded-2xl overflow-hidden">
|
||||
<%= image_tag @event.event_image_variant(:large), alt: @event.name, class: "w-full h-full object-cover" %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user