songtianlun
95f94cb73b
- Introduce a new partial for displaying weather statistics in a consistent card format. - Refactor the city show page to utilize the new statistics card partial, simplifying the code structure. - Update layout and styling for improved UX and maintainability. These changes enhance the maintainability of the codebase by promoting reuse of the statistics card component and improving the overall presentation of weather data for cities.
95 lines
3.8 KiB
Plaintext
95 lines
3.8 KiB
Plaintext
<div class="min-h-screen bg-base-100">
|
|
<!-- 页面标题和背景 -->
|
|
<div class="relative">
|
|
<!-- 背景图像和渐变 -->
|
|
<% if @city.latest_weather_art&.image&.attached? %>
|
|
<div class="absolute inset-0 h-[60vh] overflow-hidden">
|
|
<%= image_tag @city.latest_weather_art.webp_image.processed,
|
|
class: "w-full h-full object-cover object-center" %>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-base-100/40 via-base-100/80 to-base-100"></div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="relative max-w-3xl mx-auto px-4 pt-4 ">
|
|
<%= link_to cities_path,
|
|
class: "inline-flex items-center btn btn-ghost gap-2 pt-6 mb-8" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Back to Cities
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="relative pt-8 pb-32">
|
|
<div class="container mx-auto px-4">
|
|
|
|
<div class="max-w-3xl mx-auto text-center space-y-6">
|
|
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
|
|
<%= @city.localized_name %>
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap justify-center items-center gap-3">
|
|
<div class="badge badge-lg badge-primary gap-2">
|
|
<%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
|
|
</div>
|
|
<div class="badge badge-lg badge-secondary gap-2">
|
|
<%= @city&.state&.name %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要统计信息 -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8">
|
|
<%= render partial: 'cities/stat_card', collection: [
|
|
{
|
|
icon: 'temperature',
|
|
title: 'Latest Weather',
|
|
value: "#{@city.latest_weather_art&.temperature}°C",
|
|
desc: @city.latest_weather_art&.description
|
|
},
|
|
{
|
|
icon: 'location',
|
|
title: 'Coordinates',
|
|
value: "#{@city.latitude}°N, #{@city.longitude}°E",
|
|
desc: 'Geographical Location'
|
|
},
|
|
{
|
|
icon: 'history',
|
|
title: 'Records',
|
|
value: @city.weather_arts.count,
|
|
desc: 'Total Weather Arts'
|
|
}
|
|
], as: :stat %>
|
|
</div>
|
|
|
|
<%= render 'cities/admin_panel' %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术历史记录 -->
|
|
<div class="bg-base-100">
|
|
<div class="container mx-auto px-4 py-16">
|
|
<div class="max-w-7xl mx-auto space-y-8">
|
|
<!-- 标题和更新时间 -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<h2 class="text-3xl font-display font-bold">Weather Art History</h2>
|
|
<div class="card bg-base-100 p-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" 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>
|
|
<span>Last Updated: <%= time_ago_in_words(@city.last_weather_fetch) if @city.last_weather_fetch %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术卡片网格 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<%= render partial: 'weather_arts/card', collection: @city.weather_arts.order(weather_date: :desc), as: :weather_art %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|