songtianlun
884e1dfc9f
- Implement previous and next weather art navigation - Update weather arts controller to fetch adjacent weather arts - Modify show view to include navigation links This update enhances the user experience by allowing users to navigate through weather arts seamlessly. The previous and next buttons improve accessibility, providing a smoother browsing experience. The implementation also accounts for situations where no adjacent weather arts exist, ensuring clarity for users.
122 lines
5.4 KiB
Plaintext
122 lines
5.4 KiB
Plaintext
<% content_for :head do %>
|
|
<script type="application/ld+json">
|
|
<%= weather_art_schema(@weather_art) %>
|
|
</script>
|
|
<% end %>
|
|
|
|
<div class="relative min-h-screen bg-white"> <!-- 使用更明快的背景颜色 -->
|
|
<div class="container mx-auto px-4 pt-12 pb-16">
|
|
<div class="max-w-6xl mx-auto space-y-6">
|
|
|
|
<!-- 返回导航 -->
|
|
<div class="flex items-center">
|
|
<%= link_to city_path(@weather_art.city),
|
|
class: "btn btn-ghost btn-md gap-2 bg-base-200 hover:bg-base-300 transition-all duration-300" 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 <%= @weather_art.city.name %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="card bg-base-200/80 backdrop-blur-md shadow-lg overflow-hidden"> <!-- 调整透明度和阴影 -->
|
|
<div class="grid lg:grid-cols-2 gap-6 items-center">
|
|
|
|
<!-- 图片区域 -->
|
|
<% if @weather_art.image.attached? %>
|
|
<figure class="relative lg:h-[30rem] h-auto overflow-hidden rounded-lg"> <!-- 添加圆角 -->
|
|
<div class="gallery" data-controller="photo-swipe-lightbox">
|
|
<div data-photo-swipe-lightbox-target="gallery" class="h-full">
|
|
<% blob = @weather_art.image_blob %>
|
|
<%= link_to rails_blob_path(blob),
|
|
data: {
|
|
pswp_src: rails_blob_url(blob),
|
|
pswp_caption: 'Weather Art',
|
|
pswp_width: 1792,
|
|
pswp_height: 1024
|
|
} do %>
|
|
<%= image_tag @weather_art.image, class: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %>
|
|
<%#= image_tag @weather_art.watermarked_variant.processed , class: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
<% end %>
|
|
|
|
<!-- 信息区域 -->
|
|
<div class="card-body p-8 lg:py-10 lg:px-12">
|
|
<div class="prose max-w-none">
|
|
<h1 class="font-display text-4xl md:text-5xl font-bold text-gradient mb-6">
|
|
<%= @weather_art.city.full_name %> Weather Art
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6">
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= @weather_art.weather_date.strftime("%B %d, %Y") %>
|
|
</div>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @weather_art.weather_date.strftime("%H:%M") %>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">
|
|
<%= weather_description_icon(@weather_art.description) %>
|
|
<%= @weather_art.description %>
|
|
</h2>
|
|
<div class="divider"></div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<%= render 'weather_stats', weather_art: @weather_art %> <!-- 使用局部渲染 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Prompt -->
|
|
<div class="bg-primary/10 backdrop-blur-md p-6 rounded-lg border border-primary/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<h3 class="font-display font-bold text-lg">AI Prompt</h3>
|
|
</div>
|
|
<p class="text-base-content/80 leading-relaxed">
|
|
<%= @weather_art.prompt %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 上一个和下一个导航 -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-8">
|
|
<% if @previous_weather_art %>
|
|
<%= link_to city_weather_art_path(@city, @previous_weather_art),
|
|
class: "btn btn-outline btn-primary w-full sm:w-auto flex items-center justify-center gap-2" 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>
|
|
Previous Weather Art
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if @next_weather_art %>
|
|
<%= link_to city_weather_art_path(@city, @next_weather_art),
|
|
class: "btn btn-outline btn-primary w-full sm:w-auto flex items-center justify-center gap-2" do %>
|
|
Next Weather Art
|
|
<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="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @previous_weather_art.nil? && @next_weather_art.nil? %>
|
|
<div class="text-center text-base-content/70 py-4">
|
|
No more Weather Arts available
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|