songtianlun
905ec35fd8
- Integrate PhotoSwipe library for enhanced image viewing - Create PhotoSwipeLightBoxController to manage images - Register lightbox controller in Stimulus framework - Update views to include lightbox functionality - Modify styles to accommodate new design elements This commit introduces a new way for users to view images with PhotoSwipe, improving the interactivity of the photo gallery. It also includes adjustments to the layout and styles for better presentation and user experience.
37 lines
1.7 KiB
Plaintext
37 lines
1.7 KiB
Plaintext
<%# Partial _weather_stats.html.erb %>
|
|
|
|
<div class="stat bg-gradient-to-br from-primary/10 to-primary/20 hover:from-primary hover:to-primary/30 p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Temperature</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.temperature %>°C</div>
|
|
<div class="stat-desc">Feels like <%= weather_art.feeling_temp %>°C</div>
|
|
</div>
|
|
|
|
<div class="stat bg-gradient-to-br from-secondary/10 to-secondary/20 hover:from-secondary hover:to-secondary/30 p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Wind</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.wind_scale %></div>
|
|
<div class="stat-desc"><%= weather_art.wind_speed %> km/h</div>
|
|
</div>
|
|
|
|
<div class="stat bg-base-300 hover:bg-base-400 p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Humidity</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.humidity %>%</div>
|
|
<div class="stat-desc">Relative humidity</div>
|
|
</div>
|
|
|
|
<div class="stat bg-base-300 hover:bg-base-400 p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Visibility</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.visibility %> km</div>
|
|
<div class="stat-desc">Clear view distance</div>
|
|
</div>
|
|
|
|
<div class="stat bg-accent/10 hover:bg-accent p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Pressure</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.pressure %> hPa</div>
|
|
<div class="stat-desc">Atmospheric pressure</div>
|
|
</div>
|
|
|
|
<div class="stat bg-base-200 hover:bg-base-100 p-4 rounded-lg">
|
|
<div class="stat-title font-medium text-base">Cloud Cover</div>
|
|
<div class="stat-value text-3xl"><%= weather_art.cloud %>%</div>
|
|
<div class="stat-desc">Sky coverage</div>
|
|
</div> |