feat: enhance city weather card layout
- Improve image and main info section for better aesthetics - Add gradient overlay for text readability - Include temperature display with feel-like temperature - Enhance city name and location styling - Add detailed weather information metrics (Humidity, Wind, Visibility) - Provide a backup UI for when no image is available This update enhances the user interface of the city weather card by improving the layout and adding more detailed weather information. The gradient overlays and reorganized elements improve readability and usability. Additionally, a fallback display is included for cases where weather images are not attached, ensuring consistent design.
This commit is contained in:
parent
f7d295b41b
commit
6e387d1a8c
@ -1,53 +1,126 @@
|
|||||||
|
<!-- app/views/cities/_city.html.erb -->
|
||||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden">
|
<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? %>
|
<% if city.latest_weather_art&.image&.attached? %>
|
||||||
<figure class="relative aspect-[16/9]">
|
<!-- 图片和主要信息区域 -->
|
||||||
<%= image_tag city.latest_weather_art.image,
|
<div class="relative">
|
||||||
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>
|
<figure class="aspect-[16/9] overflow-hidden">
|
||||||
|
<%= image_tag city.latest_weather_art.image,
|
||||||
|
class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<!-- 渐变遮罩 - 使用多层渐变提供更好的文字可读性 -->
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-transparent"></div>
|
||||||
|
|
||||||
|
<!-- 温度显示 - 放在右上角 -->
|
||||||
|
<div class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm rounded-xl px-3 py-2 text-white">
|
||||||
|
<div class="text-2xl font-bold leading-none">
|
||||||
|
<%= city.latest_weather_art.temperature %>°C
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-white/80">
|
||||||
|
Feels <%= city.latest_weather_art.feeling_temp %>°C
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 城市名称和位置 - 放在底部 -->
|
||||||
<div class="absolute bottom-0 left-0 right-0 p-6">
|
<div class="absolute bottom-0 left-0 right-0 p-6">
|
||||||
<h3 class="text-2xl font-display text-white mb-1">
|
<h3 class="text-2xl font-display text-white font-bold mb-2 drop-shadow-lg">
|
||||||
<%= city.name %>
|
<%= city.name %>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-white/80 text-sm">
|
<div class="flex items-center gap-2 text-white/90 text-sm drop-shadow-lg">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
<%= city.country.name %>, <%= city.region.name %>
|
<%= city.country.name %>, <%= city.region.name %>
|
||||||
</p>
|
</div>
|
||||||
</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>
|
||||||
</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="card-body bg-base-100">
|
||||||
<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">
|
<div class="flex items-center justify-between text-sm text-base-content/70 mb-3">
|
||||||
<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" />
|
<div class="flex items-center gap-2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||||
<%= city.timezone %>
|
</svg>
|
||||||
</div>
|
<%= city.latest_weather_art.description %>
|
||||||
<% if city.latest_weather_art %>
|
</div>
|
||||||
<div class="flex items-center gap-1">
|
<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">
|
<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" />
|
<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>
|
</svg>
|
||||||
<%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
|
<%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
|
|
||||||
|
<!-- 天气详情 -->
|
||||||
|
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||||
|
<div class="stat bg-base-200/50 rounded-lg p-2">
|
||||||
|
<div class="stat-title text-xs">Humidity</div>
|
||||||
|
<div class="stat-value text-lg"><%= city.latest_weather_art.humidity %>%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat bg-base-200/50 rounded-lg p-2">
|
||||||
|
<div class="stat-title text-xs">Wind</div>
|
||||||
|
<div class="stat-value text-lg"><%= city.latest_weather_art.wind_scale %></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat bg-base-200/50 rounded-lg p-2">
|
||||||
|
<div class="stat-title text-xs">Visibility</div>
|
||||||
|
<div class="stat-value text-lg"><%= city.latest_weather_art.visibility %>km</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<%= link_to city_path(city),
|
||||||
|
class: "btn btn-primary btn-sm gap-2" do %>
|
||||||
|
View Details
|
||||||
|
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-actions justify-end mt-4">
|
<% else %>
|
||||||
<%= link_to "View Details", city_path(city),
|
<!-- 无图片时的备用显示 -->
|
||||||
class: "btn btn-primary btn-sm" %>
|
<div class="card-body">
|
||||||
|
<h3 class="card-title font-display text-2xl mb-3"><%= city.name %></h3>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 text-base-content/70 mb-4">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
<%= city.country.name %>, <%= city.region.name %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-base-200 rounded-lg p-4 mb-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" 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" />
|
||||||
|
</svg>
|
||||||
|
<span>Lat: <%= city.latitude %></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" 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" />
|
||||||
|
</svg>
|
||||||
|
<span>Long: <%= city.longitude %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<%= link_to city_path(city),
|
||||||
|
class: "btn btn-primary btn-sm gap-2" do %>
|
||||||
|
View Details
|
||||||
|
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user