From 6e387d1a8cd34c9466fec5d418caf50876f6a493 Mon Sep 17 00:00:00 2001 From: songtianlun Date: Wed, 22 Jan 2025 14:51:00 +0800 Subject: [PATCH] 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. --- app/views/cities/_city.html.erb | 141 ++++++++++++++++++++++++-------- 1 file changed, 107 insertions(+), 34 deletions(-) diff --git a/app/views/cities/_city.html.erb b/app/views/cities/_city.html.erb index bc7177e..aae338b 100644 --- a/app/views/cities/_city.html.erb +++ b/app/views/cities/_city.html.erb @@ -1,53 +1,126 @@ +
<% if city.latest_weather_art&.image&.attached? %> -
- <%= image_tag city.latest_weather_art.image, - class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %> -
+ +
+ +
+ <%= image_tag city.latest_weather_art.image, + class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %> +
+ + +
+
+ + +
+
+ <%= city.latest_weather_art.temperature %>°C +
+
+ Feels <%= city.latest_weather_art.feeling_temp %>°C +
+
+ +
-

+

<%= city.name %>

-

+

+ + + <%= city.country.name %>, <%= city.region.name %> -

-
-
- <% else %> -
-

<%= city.name %>

-

- <%= city.country.name %>, <%= city.region.name %> -

-
- Lat: <%= city.latitude %> - Long: <%= city.longitude %> +
- <% end %> -
-
-
- - - - - <%= city.timezone %> -
- <% if city.latest_weather_art %> + +
+ +
+
+ + + + <%= city.latest_weather_art.description %> +
<%= city.latest_weather_art.weather_date.strftime("%b %d, %Y") %>
- <% end %> +
+ + +
+
+
Humidity
+
<%= city.latest_weather_art.humidity %>%
+
+
+
Wind
+
<%= city.latest_weather_art.wind_scale %>
+
+
+
Visibility
+
<%= city.latest_weather_art.visibility %>km
+
+
+ + +
+ <%= link_to city_path(city), + class: "btn btn-primary btn-sm gap-2" do %> + View Details + + + + <% end %> +
-
- <%= link_to "View Details", city_path(city), - class: "btn btn-primary btn-sm" %> + <% else %> + +
+

<%= city.name %>

+ +
+ + + + <%= city.country.name %>, <%= city.region.name %> +
+ +
+
+
+ + + + Lat: <%= city.latitude %> +
+
+ + + + Long: <%= city.longitude %> +
+
+
+ +
+ <%= link_to city_path(city), + class: "btn btn-primary btn-sm gap-2" do %> + View Details + + + + <% end %> +
-
+ <% end %>
\ No newline at end of file