songtianlun
da7fca139c
- Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
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> |