53 lines
2.4 KiB
Plaintext
53 lines
2.4 KiB
Plaintext
|
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden">
|
||
|
|
<% if city.latest_weather_art&.image&.attached? %>
|
||
|
|
<figure class="relative aspect-[16/9]">
|
||
|
|
<%= image_tag city.latest_weather_art.image,
|
||
|
|
class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||
|
|
<div class="absolute bottom-0 left-0 right-0 p-6">
|
||
|
|
<h3 class="text-2xl font-display text-white mb-1">
|
||
|
|
<%= city.name %>
|
||
|
|
</h3>
|
||
|
|
<p class="text-white/80 text-sm">
|
||
|
|
<%= city.country.name %>, <%= city.region.name %>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</figure>
|
||
|
|
<% else %>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3 class="card-title font-display"><%= city.name %></h3>
|
||
|
|
<p class="text-base-content/70">
|
||
|
|
<%= city.country.name %>, <%= city.region.name %>
|
||
|
|
</p>
|
||
|
|
<div class="flex gap-2 text-sm text-base-content/60">
|
||
|
|
<span>Lat: <%= city.latitude %></span>
|
||
|
|
<span>Long: <%= city.longitude %></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
<div class="card-body <%= 'pt-0' if city.latest_weather_art&.image&.attached? %>">
|
||
|
|
<div class="flex gap-4 text-sm text-base-content/70">
|
||
|
|
<div class="flex items-center gap-1">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
|
|
</svg>
|
||
|
|
<%= city.timezone %>
|
||
|
|
</div>
|
||
|
|
<% if city.latest_weather_art %>
|
||
|
|
<div class="flex items-center gap-1">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
<%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-actions justify-end mt-4">
|
||
|
|
<%= link_to "View Details", city_path(city),
|
||
|
|
class: "btn btn-primary btn-sm" %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|