From da7fca139ca5b69ca6078444295f3d79eeb85ac0 Mon Sep 17 00:00:00 2001 From: songtianlun Date: Wed, 22 Jan 2025 14:10:43 +0800 Subject: [PATCH] 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. --- app/views/cities/_city.html.erb | 53 +++++++++ app/views/cities/index.html.erb | 202 ++++++++++++++++---------------- 2 files changed, 156 insertions(+), 99 deletions(-) create mode 100644 app/views/cities/_city.html.erb diff --git a/app/views/cities/_city.html.erb b/app/views/cities/_city.html.erb new file mode 100644 index 0000000..bc7177e --- /dev/null +++ b/app/views/cities/_city.html.erb @@ -0,0 +1,53 @@ +
+ <% 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" %> +
+
+

+ <%= 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.weather_date.strftime("%b %d, %Y") %> +
+ <% end %> +
+ +
+ <%= link_to "View Details", city_path(city), + class: "btn btn-primary btn-sm" %> +
+
+
\ No newline at end of file diff --git a/app/views/cities/index.html.erb b/app/views/cities/index.html.erb index c995f4b..399d8de 100644 --- a/app/views/cities/index.html.erb +++ b/app/views/cities/index.html.erb @@ -1,119 +1,123 @@ +
+ + <% featured_art = WeatherArt.includes(:city).joins(:image_attachment).order(created_at: :desc).first %> +
+ + <% if featured_art&.image&.attached? %> +
+ <%= image_tag featured_art.image, + class: "w-full h-full object-cover object-center" %> + +
+
+ <% end %> - -
-
-

- Explore Cities -

-

- Discover AI-generated weather art from cities around the world -

+ +
+
+
+

+ Explore Cities +

+

+ Discover AI-generated weather art from cities around the world +

+ + + <% if featured_art %> +
+ Latest from + <%= featured_art.city.name %>, + <%= featured_art.city.country.name %> + • + <%= featured_art.weather_date.strftime("%B %d, %Y") %> +
+ <% end %> +
+
-
-
- <%= link_to "All Regions", - cities_path, - class: "btn btn-outline #{'btn-primary' unless @current_region}" %> +
+
+
+ +
+ <%= link_to cities_path, + class: "btn btn-sm #{'btn-primary' unless @current_region} btn-outline" do %> + + + + All Regions + <% end %> - <% @regions.each do |region| %> - <%= link_to region.name, - cities_path(region: region.slug), - class: "btn btn-outline #{'btn-primary' if @current_region == region}" %> - <% end %> -
+ <% @regions.each do |region| %> + <%= link_to region.name, + cities_path(region: region.slug), + class: "btn btn-sm #{'btn-primary' if @current_region == region} btn-outline" %> + <% end %> +
- <% if @current_region %> -
- <%= link_to "All Countries in #{@current_region.name}", - cities_path(region: @current_region.slug), - class: "btn btn-sm btn-ghost #{'btn-active' unless @current_country}" %> + + <% if @current_region %> +
+ <%= link_to cities_path(region: @current_region.slug), + class: "btn btn-sm btn-ghost #{'btn-active' unless @current_country}" do %> + All in <%= @current_region.name %> + <% end %> - <% @current_region.countries.order(:name).each do |country| %> - <%= link_to country.name, - cities_path(region: @current_region.slug, country: country.slug), - class: "btn btn-sm btn-ghost #{'btn-active' if @current_country == country}" %> + <% @current_region.countries.order(:name).each do |country| %> + <%= link_to country.name, + cities_path(region: @current_region.slug, country: country.slug), + class: "btn btn-sm btn-ghost #{'btn-active' if @current_country == country}" %> + <% end %> +
<% end %> -
- <% end %> - -
-
-
    -
  • <%= link_to "All Regions", cities_path %>
    • - <% if @current_region %> -
  • <%= @current_region.name %>
    • - <% end %> - <% if @current_country %> -
  • <%= @current_country.name %>
    • - <% end %> -
+ + <% if @current_region || @current_country %> +
+
+
    +
  • + <%= link_to cities_path do %> + + + + Home + <% end %> +
    • + <% if @current_region %> +
  • <%= @current_region.name %>
    • + <% end %> + <% if @current_country %> +
  • <%= @current_country.name %>
    • + <% end %> +
+
+
+ <% end %>
-
-
- <% @cities.each do |city| %> -
- <% 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" %> -
-
-

- <%= 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.weather_date.strftime("%b %d, %Y") %> -
- <% end %> -
- -
- <%= link_to "View Details", city_path(city), - class: "btn btn-primary btn-sm" %> -
-
-
+
+ +
+ Showing <%= @cities.count %> <%= 'city'.pluralize(@cities.count) %> + <% if @current_country %> + in <%= @current_country.name %> + <% elsif @current_region %> + in <%= @current_region.name %> <% end %>
+ + +
+ <%= render partial: 'city', collection: @cities %> +
\ No newline at end of file