Make each card a link and add hover effect

This commit is contained in:
Eugene Burmakin 2024-11-28 15:58:30 +01:00
parent f2869347bc
commit 71cd9d507b

View file

@ -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 %>