feat: enhance city and weather art views with links

- Update country and state badges to be links when region is present
- Maintain fallback display for badges when region is not available
- Improve user navigation by linking to relevant city pages

These changes enhance the user experience by allowing users to
click on country and state badges to view related cities. The
previous static display has been improved to provide more
contextual navigation options, making the application more
interactive and user-friendly.
This commit is contained in:
songtianlun 2025-04-26 00:14:34 +08:00
parent 2a4faca6c8
commit 5b7f0bba4f
2 changed files with 46 additions and 12 deletions

View File

@ -30,12 +30,32 @@
</h1> </h1>
<div class="flex flex-wrap justify-center items-center gap-3"> <div class="flex flex-wrap justify-center items-center gap-3">
<div class="badge badge-lg badge-primary gap-2"> <!-- Country budge -->
<%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %> <% if @city.country.present? && @city.country.region.present? %>
<%= link_to cities_path(country: @city.country, region: @city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
<%= "#{@city.country.emoji + " " || ""}#{@city.country.localized_name}" %>
<% end %>
<% else %>
<div class="badge badge-lg badge-primary">
<%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
</div> </div>
<div class="badge badge-lg badge-secondary gap-2"> <% end %>
<!-- State budge -->
<% if @city.country.present? && @city.state.present? && @city.country.region.present? %>
<%= link_to cities_path(country: @city.country, state: @city.state, region: @city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
<%= @city.state.name %>
<% end %>
<% else %>
<div class="badge badge-lg badge-secondary">
<%= @city&.state&.name %> <%= @city&.state&.name %>
</div> </div>
<% end %>
<!-- <div class="badge badge-lg badge-primary gap-2">-->
<%#= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
<!-- </div>-->
<!-- <div class="badge badge-lg badge-secondary gap-2">-->
<%#= @city&.state&.name %>
<!-- </div>-->
<%= render "shared/wiki_data_badge", city: @city %> <%= render "shared/wiki_data_badge", city: @city %>
</div> </div>

View File

@ -22,12 +22,26 @@
</h1> </h1>
<div class="flex flex-wrap gap-4 mb-6"> <div class="flex flex-wrap gap-4 mb-6">
<!-- Country budge -->
<% if @weather_art.city.country.present? && @weather_art.city.country.region.present? %>
<%= link_to cities_path(country: @weather_art.city.country, region: @weather_art.city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
<%= "#{@weather_art.city.country.emoji + " " || ""}#{@weather_art.city.country.localized_name}" %>
<% end %>
<% else %>
<div class="badge badge-lg badge-primary"> <div class="badge badge-lg badge-primary">
<%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %> <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
</div> </div>
<% end %>
<!-- State budge -->
<% if @weather_art.city.country.present? && @weather_art.city.state.present? && @weather_art.city.country.region.present? %>
<%= link_to cities_path(country: @weather_art.city.country, state: @weather_art.city.state, region: @weather_art.city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
<%= @weather_art.city.state.name %>
<% end %>
<% else %>
<div class="badge badge-lg badge-secondary"> <div class="badge badge-lg badge-secondary">
<%= @weather_art&.city&.state&.name %> <%= @weather_art&.city&.state&.name %>
</div> </div>
<% end %>
<%= render "shared/wiki_data_badge", city: @weather_art&.city %> <%= render "shared/wiki_data_badge", city: @weather_art&.city %>
<div class="badge badge-lg badge-ghost"> <div class="badge badge-lg badge-ghost">
<%= @weather_art.formatted_time(:date) %> <%= @weather_art.formatted_time(:date) %>