songtianlun/today_ai_weather
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
a15bc349a2
today_ai_weather/app/views/cities/_city.html.erb

126 lines
6.2 KiB
Plaintext
Raw Normal View History

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.
2025-01-22 14:51:00 +08:00
<!-- app/views/cities/_city.html.erb -->
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
<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? %>
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.
2025-01-22 14:51:00 +08:00
<!-- 图片和主要信息区域 -->
<div class="relative">
<!-- 图片 -->
<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>
<!-- 城市名称和位置 - 放在底部 -->
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
<div class="absolute bottom-0 left-0 right-0 p-6">
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.
2025-01-22 14:51:00 +08:00
<h3 class="text-2xl font-display text-white font-bold mb-2 drop-shadow-lg">
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
<%= city.name %>
</h3>
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.
2025-01-22 14:51:00 +08:00
<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>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
<%= city.country.name %>, <%= city.region.name %>
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.
2025-01-22 14:51:00 +08:00
</div>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
</div>
</div>
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.
2025-01-22 14:51:00 +08:00
<!-- 底部信息区域 -->
<div class="card-body bg-base-100">
<!-- 天气信息和更新时间 -->
<div class="flex items-center justify-between text-sm text-base-content/70 mb-3">
<div class="flex items-center gap-2">
<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">
<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" />
</svg>
<%= city.latest_weather_art.description %>
</div>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
<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">
<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>
<%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
</div>
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.
2025-01-22 14:51:00 +08:00
</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>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
</div>
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.
2025-01-22 14:51:00 +08:00
<% else %>
<!-- 无图片时的备用显示 -->
<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>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
</div>
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.
2025-01-22 14:51:00 +08:00
<% end %>
feat: add city card component and improve index view - Create a new partial for city card display with weather image - Update index page to show featured weather art with gradient - Refactor city listing layout and navigation for improved clarity This commit introduces a new component for displaying city cards that includes weather artwork when available. The index page has been refactored for better visual presentation and usability. Users can now better navigate through cities and see relevant weather data.
2025-01-22 14:10:43 +08:00
</div>
Reference in New Issue Copy Permalink