refactor: dashboard views by extracting metric card and party item partials, and fix metric card rendering issue
This commit is contained in:
kbe
12
app/views/components/_metric_card.html.erb
Normal file
12
app/views/components/_metric_card.html.erb
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br <%= @classes %> opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
|
||||||
|
<%= value %>
|
||||||
|
</div>
|
||||||
|
<p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
|
||||||
|
<%= title %>
|
||||||
|
</p>
|
||||||
|
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
15
app/views/components/_party_item.html.erb
Normal file
15
app/views/components/_party_item.html.erb
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<%= link_to party_path(party.slug, party), 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 party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
|
||||||
|
</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">
|
||||||
|
<%= party.name %>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||||
|
<%= l(party.start_time, format: :short) %>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
@@ -4,46 +4,11 @@
|
|||||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
|
<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
|
||||||
<div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
|
<%= render partial: 'components/metric_card', locals: { title: "Événements disponibles", value: @available_parties, classes: "from-purple-100 to-indigo-100" } %>
|
||||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
|
|
||||||
<%= @available_parties %>
|
|
||||||
</div>
|
|
||||||
<p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
|
|
||||||
Événements disponibles
|
|
||||||
</p>
|
|
||||||
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
|
<%= render partial: 'components/metric_card', locals: { title: "Événements aujourd'hui", value: @events_this_week, classes: "from-purple-100 to-indigo-100" } %>
|
||||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
|
|
||||||
<%= @events_this_week %>
|
|
||||||
</div>
|
|
||||||
<p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
|
|
||||||
Événements aujourd'hui
|
|
||||||
</p>
|
|
||||||
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<%= render partial: 'components/metric_card', locals: { title: "Événements cette semaine", value: @events_this_week, classes: "from-purple-100 to-indigo-100" } %>
|
||||||
|
|
||||||
<div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
|
|
||||||
<%= @events_this_week %>
|
|
||||||
</div>
|
|
||||||
<p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
|
|
||||||
Événements cette semaine
|
|
||||||
</p>
|
|
||||||
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,21 +23,7 @@
|
|||||||
<ul class="space-y-4">
|
<ul class="space-y-4">
|
||||||
<% @today_parties.each do |party| %>
|
<% @today_parties.each do |party| %>
|
||||||
<li>
|
<li>
|
||||||
<%= link_to party_path(party.slug, party), 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 %>
|
<%= render partial: 'components/party_item', locals: { party: party } %>
|
||||||
<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 party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
|
|
||||||
</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">
|
|
||||||
<%= party.name %>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
||||||
<%= l(party.start_time, format: :short) %>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -92,21 +43,7 @@
|
|||||||
<ul class="space-y-4">
|
<ul class="space-y-4">
|
||||||
<% @tomorrow_parties.each do |party| %>
|
<% @tomorrow_parties.each do |party| %>
|
||||||
<li>
|
<li>
|
||||||
<%= link_to party_path(party.slug, party), 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 %>
|
<%= render partial: 'components/party_item', locals: { party: party } %>
|
||||||
<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 party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
|
|
||||||
</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">
|
|
||||||
<%= party.name %>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
||||||
<%= l(party.start_time, format: :short) %>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -126,21 +63,7 @@
|
|||||||
<ul class="space-y-4">
|
<ul class="space-y-4">
|
||||||
<% @other_parties.each do |party| %>
|
<% @other_parties.each do |party| %>
|
||||||
<li>
|
<li>
|
||||||
<%= link_to party_path(party.slug, party), 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 %>
|
<%= render partial: 'components/party_item', locals: { party: party } %>
|
||||||
<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 party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
|
|
||||||
</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">
|
|
||||||
<%= party.name %>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
||||||
<%= l(party.start_time, format: :short) %>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -23,13 +23,46 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card">
|
<div class="space-y-6">
|
||||||
<div class="card-body">
|
<!-- Fake Ticket Types -->
|
||||||
<h5 class="card-title">Ticket Information</h5>
|
<div class="card hover-lift">
|
||||||
<p class="card-text">
|
<div class="card-body p-6">
|
||||||
<!-- Ticket types would go here -->
|
<h5 class="card-title text-lg font-bold mb-4">Early Bird</h5>
|
||||||
<a href="#" class="btn btn-primary">Get Tickets</a>
|
<p class="text-slate-600 mb-4">€49.99 - 30 min early access</p>
|
||||||
</p>
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="text-sm font-medium">Quantity:</span>
|
||||||
|
<input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card hover-lift">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h5 class="card-title text-lg font-bold mb-4">Standard</h5>
|
||||||
|
<p class="text-slate-600 mb-4">€29.99 - Regular access</p>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="text-sm font-medium">Quantity:</span>
|
||||||
|
<input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card hover-lift">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h5 class="card-title text-lg font-bold mb-4">VIP</h5>
|
||||||
|
<p class="text-slate-600 mb-4">€99.99 - Premium access</p>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="text-sm font-medium">Quantity:</span>
|
||||||
|
<input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="button" class="btn-primary w-full sm:w-auto hover-lift focus-ring transition-normal">
|
||||||
|
Proceed to Checkout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user