songtianlun
95f94cb73b
- Introduce a new partial for displaying weather statistics in a consistent card format. - Refactor the city show page to utilize the new statistics card partial, simplifying the code structure. - Update layout and styling for improved UX and maintainability. These changes enhance the maintainability of the codebase by promoting reuse of the statistics card component and improving the overall presentation of weather data for cities.
44 lines
1.9 KiB
Plaintext
44 lines
1.9 KiB
Plaintext
<!-- app/views/weather_arts/_card.html.erb -->
|
|
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
<figure class="relative aspect-video overflow-hidden">
|
|
<% if weather_art.image.attached? %>
|
|
<%= image_tag weather_art.preview_image.processed,
|
|
class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
|
|
<div class="flex items-center justify-between text-white">
|
|
<div class="text-2xl font-bold"><%= weather_art.temperature %>°C</div>
|
|
<div class="text-right">
|
|
<div class="font-medium"><%= weather_art.formatted_time(:date) %></div>
|
|
<div class="text-sm opacity-80"><%= weather_art.formatted_time(:time, true) %></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</figure>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display">
|
|
<%= weather_description_icon(weather_art.description) %>
|
|
<%= weather_art.description %>
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-2 gap-4 my-4">
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<%= weather_stat_icon("humidity") %>
|
|
<span>Humidity: <%= weather_art.humidity %>%</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<%= weather_stat_icon("wind") %>
|
|
<span>Wind: <%= weather_art.wind_scale %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<%= link_to city_weather_art_path(weather_art.city, weather_art),
|
|
class: "btn btn-primary btn-block" do %>
|
|
View Details
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" 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 %>
|
|
</div>
|
|
</div> |