songtianlun
9cb1467301
- Add slug column to weather_arts for friendly URLs. - Update weather arts retrieval in the controller to use slug. - Implement region and country filtering in cities index view. - Optimize city queries with scopes for active status and region/country. - Improve UI layout and design for the cities index page. These changes allow better user experience by enabling cleaner URLs for weather arts and facilitating efficient filtering of cities based on selected regions and countries.
119 lines
5.1 KiB
Plaintext
119 lines
5.1 KiB
Plaintext
<div class="min-h-screen">
|
|
|
|
<!-- 页面标题 -->
|
|
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 py-12">
|
|
<div class="container mx-auto px-4">
|
|
<h1 class="text-4xl md:text-5xl font-display font-bold text-center mb-4">
|
|
Explore Cities
|
|
</h1>
|
|
<p class="text-xl text-center text-base-content/70 max-w-2xl mx-auto">
|
|
Discover AI-generated weather art from cities around the world
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选导航 -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex flex-wrap gap-4 items-center justify-center mb-8">
|
|
<%= link_to "All Regions",
|
|
cities_path,
|
|
class: "btn btn-outline #{'btn-primary' unless @current_region}" %>
|
|
|
|
<% @regions.each do |region| %>
|
|
<%= link_to region.name,
|
|
cities_path(region: region.slug),
|
|
class: "btn btn-outline #{'btn-primary' if @current_region == region}" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @current_region %>
|
|
<div class="flex flex-wrap gap-4 items-center justify-center mb-8">
|
|
<%= link_to "All Countries in #{@current_region.name}",
|
|
cities_path(region: @current_region.slug),
|
|
class: "btn btn-sm btn-ghost #{'btn-active' unless @current_country}" %>
|
|
|
|
<% @current_region.countries.order(:name).each do |country| %>
|
|
<%= link_to country.name,
|
|
cities_path(region: @current_region.slug, country: country.slug),
|
|
class: "btn btn-sm btn-ghost #{'btn-active' if @current_country == country}" %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- 当前选择显示 -->
|
|
<div class="text-center mb-8">
|
|
<div class="breadcrumbs text-sm justify-center">
|
|
<ul>
|
|
<li><%= link_to "All Regions", cities_path %></li>
|
|
<% if @current_region %>
|
|
<li><%= @current_region.name %></li>
|
|
<% end %>
|
|
<% if @current_country %>
|
|
<li><%= @current_country.name %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 城市网格 -->
|
|
<div class="container mx-auto px-4 pb-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<% @cities.each do |city| %>
|
|
<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>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div> |