songtianlun
0bca23ff77
- Update condition to check for state presence instead of name - Ensure proper rendering of state badge in city and weather art views This change improves the logic for displaying the state badge by checking for the presence of the state object directly, which prevents potential errors when the state name is not set. It ensures that the badge is displayed correctly when a state is associated with a city or weather art.
150 lines
6.7 KiB
Plaintext
150 lines
6.7 KiB
Plaintext
<% content_for :head do %>
|
|
<script type="application/ld+json">
|
|
<%= weather_art_schema(@weather_art) %>
|
|
</script>
|
|
<% end %>
|
|
|
|
<div class="min-h-screen bg-base-100">
|
|
<div class="container mx-auto px-4 md:px-6 pt-8 pb-16">
|
|
<!-- 返回按钮 -->
|
|
<%= 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 mb-4" 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>
|
|
<%= "#{t("button.back_to")} #{@weather_art.city.name}" %>
|
|
<% end %>
|
|
|
|
<!-- 标题区域 -->
|
|
<div class="max-w-6xl mx-auto mb-8">
|
|
<h1 class="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
|
|
<%= @weather_art.city.full_name %> Weather Art
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6">
|
|
<!-- Country budge -->
|
|
<% if @weather_art.city.country.present? && @weather_art.city.country.region.present? %>
|
|
<%= link_to cities_path(country: @weather_art.city.country, region: @weather_art.city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
|
|
<%= "#{@weather_art.city.country.emoji + " " || ""}#{@weather_art.city.country.localized_name}" %>
|
|
<% end %>
|
|
<% elsif @weather_art.city.country.present? %>
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
|
|
</div>
|
|
<% end %>
|
|
<!-- State budge -->
|
|
<% if @weather_art.city.country.present? && @weather_art.city.state.present? && @weather_art.city.country.region.present? %>
|
|
<%= link_to cities_path(country: @weather_art.city.country, state: @weather_art.city.state, region: @weather_art.city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
|
|
<%= @weather_art.city.state.name %>
|
|
<% end %>
|
|
<% elsif @weather_art.city.state.present? %>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @weather_art&.city&.state&.name %>
|
|
</div>
|
|
<% end %>
|
|
<%= render "shared/wiki_data_badge", city: @weather_art&.city %>
|
|
<div class="badge badge-lg badge-ghost">
|
|
<%= @weather_art.formatted_time(:date) %>
|
|
</div>
|
|
<div class="badge badge-lg badge-ghost">
|
|
<%= @weather_art.formatted_time(:time, true) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- 艺术图像区域 - 移动端全宽显示 -->
|
|
<% if @weather_art.image.attached? %>
|
|
<div class="md:rounded-xl overflow-hidden mb-8 -mx-4 md:mx-0"> <!-- 负margin实现移动端全宽 -->
|
|
<div class="gallery" data-controller="photo-swipe-lightbox">
|
|
<div data-photo-swipe-lightbox-target="gallery">
|
|
<% watermarked = @weather_art.webp_image.processed %>
|
|
<%= link_to rails_blob_path(watermarked),
|
|
data: {
|
|
pswp_src: rails_blob_url(watermarked),
|
|
pswp_caption: 'Weather Art',
|
|
pswp_width: 1792,
|
|
pswp_height: 1024
|
|
} do %>
|
|
<%= image_tag @weather_art.preview_image(:big).processed,
|
|
alt: @weather_art.image_alt,
|
|
class: "w-full h-auto object-cover transition-transform hover:scale-105 duration-300 ease-in-out" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- 天气信息卡片 -->
|
|
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
|
<div class="card bg-base-100 shadow-lg">
|
|
<div class="card-body">
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center gap-2">
|
|
<%= 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>
|
|
|
|
<!-- AI Prompt 卡片 -->
|
|
<div class="card bg-primary/10 shadow-lg">
|
|
<div class="card-body">
|
|
<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"><%= t("title.ai_prompt") %></h3>
|
|
</div>
|
|
<p class="text-base-content/80 leading-relaxed">
|
|
<%= @weather_art.prompt %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-lg mb-8">
|
|
<%= render 'shared/city_ai_description', city: @city %>
|
|
</div>
|
|
|
|
<!-- 地图区域 -->
|
|
<div class="card bg-base-100 shadow-lg mb-8">
|
|
<%= render 'shared/map', city: @weather_art.city %>
|
|
</div>
|
|
|
|
<!-- 下载选项卡片 -->
|
|
<%#= render 'shared/download_card', weather_art: @weather_art %>
|
|
|
|
<!-- 广告区域 -->
|
|
<div class="card bg-base-100 shadow-lg mb-8">
|
|
<%= render 'shared/auto_ad' %>
|
|
</div>
|
|
|
|
<!-- 社交分享 -->
|
|
<%
|
|
share_title = [
|
|
"🎨 Amazing AI Weather Art: #{@weather_art.city.full_name}",
|
|
"#{@weather_art.description} at #{@weather_art.temperature}°C",
|
|
"#{@weather_art.formatted_time(:all, true)}"
|
|
].join("\n")
|
|
|
|
share_description = [
|
|
"Discover this stunning AI-generated weather art!",
|
|
"#{@weather_art.description} in #{@weather_art.city.full_name}.",
|
|
"Created at #{@weather_art.formatted_time(:time, true)}",
|
|
"Visit TodayAIWeather to see more amazing weather art."
|
|
].join(" ")
|
|
%>
|
|
<%= render "shared/share_social",
|
|
title: share_title,
|
|
description: share_description,
|
|
tags: "AIWeather,Art,AIart,Weather,#{format_as_tag(@weather_art.city&.name)},#{format_as_tag(@weather_art.city&.country&.name)},#{format_as_tag(@weather_art.city&.country&.region&.name)},#{format_as_tag(@weather_art.city&.country&.subregion&.name)}",
|
|
image: url_for(@weather_art.webp_image.processed)
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div> |