songtianlun
905ec35fd8
- Integrate PhotoSwipe library for enhanced image viewing - Create PhotoSwipeLightBoxController to manage images - Register lightbox controller in Stimulus framework - Update views to include lightbox functionality - Modify styles to accommodate new design elements This commit introduces a new way for users to view images with PhotoSwipe, improving the interactivity of the photo gallery. It also includes adjustments to the layout and styles for better presentation and user experience.
91 lines
3.9 KiB
Plaintext
91 lines
3.9 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.variant(resize_to_fit: [896, 512])),
|
|
data: {
|
|
pswp_src: rails_blob_url(blob),
|
|
pswp_caption: 'Weather Art',
|
|
pswp_width: 1792,
|
|
pswp_height: 1024
|
|
} do %>
|
|
<%= image_tag @weather_art.image.variant(resize_to_fill: [896, 512]),
|
|
class: "object-cover w-full h-full transition-transform scale-95 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
|
|
</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>
|
|
</div>
|
|
</div> |