From 71cd9d507b38756bae27fbcd7cced3297ebec33b Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 28 Nov 2024 15:58:30 +0100
Subject: [PATCH] Make each card a link and add hover effect

---
 app/views/trips/index.html.erb | 40 ++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/app/views/trips/index.html.erb b/app/views/trips/index.html.erb
index 46218299..eb0c2078 100644
--- a/app/views/trips/index.html.erb
+++ b/app/views/trips/index.html.erb
@@ -27,28 +27,30 @@
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
         <% @trips.each do |trip| %>
-          <div class="card bg-base-200 shadow-xl" data-trip-id="<%= trip.id %>" id="trip-<%= trip.id %>">
-            <div class="card-body">
-              <h2 class="card-title justify-center">
-                <%= link_to trip.name, trip, class: 'hover:underline' %>
-              </h2>
-              <p class="text-sm text-gray-600 text-center">
-                <%= "#{human_date(trip.started_at)} – #{human_date(trip.ended_at)}, #{trip.distance} #{DISTANCE_UNIT}" %>
-              </p>
+          <%= link_to trip, class: "block hover:shadow-lg rounded-lg" do %>
+            <div class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200" data-trip-id="<%= trip.id %>" id="trip-<%= trip.id %>">
+              <div class="card-body">
+                <h2 class="card-title justify-center">
+                  <span class="hover:underline"><%= trip.name %></span>
+                </h2>
+                <p class="text-sm text-gray-600 text-center">
+                  <%= "#{human_date(trip.started_at)} – #{human_date(trip.ended_at)}, #{trip.distance} #{DISTANCE_UNIT}" %>
+                </p>
 
-              <div style="width: 100%; aspect-ratio: 1/1;"
-                   id="map-<%= trip.id %>"
-                   class="rounded-lg"
-                   data-controller="trip-map"
-                   data-trip-map-trip-id-value="<%= trip.id %>"
-                   data-trip-map-coordinates-value="<%= trip.points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id, :country).to_json %>"
-                   data-trip-map-api-key-value="<%= current_user.api_key %>"
-                   data-trip-map-user-settings-value="<%= current_user.settings.to_json %>"
-                   data-trip-map-timezone-value="<%= Rails.configuration.time_zone %>"
-                   data-trip-map-distance-unit-value="<%= DISTANCE_UNIT %>">
+                <div style="width: 100%; aspect-ratio: 1/1;"
+                     id="map-<%= trip.id %>"
+                     class="rounded-lg"
+                     data-controller="trip-map"
+                     data-trip-map-trip-id-value="<%= trip.id %>"
+                     data-trip-map-coordinates-value="<%= trip.points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id, :country).to_json %>"
+                     data-trip-map-api-key-value="<%= current_user.api_key %>"
+                     data-trip-map-user-settings-value="<%= current_user.settings.to_json %>"
+                     data-trip-map-timezone-value="<%= Rails.configuration.time_zone %>"
+                     data-trip-map-distance-unit-value="<%= DISTANCE_UNIT %>">
+                </div>
               </div>
             </div>
-          </div>
+          <% end %>
         <% end %>
       </div>
     <% end %>