songtianlun
f5009a6d2e
- Implement lazy loading for images in various views - Update image preview method to use medium size - Cache latest arts to improve performance These changes enhance the user experience by reducing initial load times and improving performance. Lazy loading ensures that images are only loaded when they are in the viewport, which saves bandwidth and speeds up page rendering.
46 lines
2.0 KiB
Plaintext
46 lines
2.0 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,
|
|
loading: "lazy",
|
|
alt: weather_art.image_alt,
|
|
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 %>
|
|
<%= t("button.view_detail") %>
|
|
<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> |