feat: enhance cities filtering interface
- Introduce dropdown menus for region and country selection - Adjust padding on title section for better layout - Update filter navigation structure to improve UX This commit refines the user interface for filtering cities by allowing users to select regions and countries from dropdown menus. The filtering options are now easier to navigate and maintain a consistent aesthetic with adjusted padding for better visual hierarchies.
This commit is contained in:
parent
da7fca139c
commit
f7d295b41b
@ -8,13 +8,12 @@
|
||||
<div class="absolute inset-0 h-[60vh] overflow-hidden">
|
||||
<%= image_tag featured_art.image,
|
||||
class: "w-full h-full object-cover object-center" %>
|
||||
<!-- 更细腻的渐变效果 -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-base-100/40 via-base-100/80 to-base-100"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- 标题内容 -->
|
||||
<div class="relative pt-24 pb-48">
|
||||
<div class="relative pt-24 pb-32">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
|
||||
@ -39,83 +38,87 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选导航 -->
|
||||
<div class="sticky top-16 z-10 bg-base-100 shadow-lg">
|
||||
<!-- 筛选导航 - 使用下拉菜单 -->
|
||||
<div class="sticky top-16 z-20 bg-base-100/95 backdrop-blur-sm border-b border-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="py-4">
|
||||
<!-- 区域选择 -->
|
||||
<div class="flex flex-wrap gap-3 items-center justify-center mb-4">
|
||||
<%= link_to cities_path,
|
||||
class: "btn btn-sm #{'btn-primary' unless @current_region} btn-outline" do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div class="py-3 flex items-center justify-between gap-4">
|
||||
<!-- 左侧筛选器 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 区域选择下拉框 -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<%= @current_region&.name || 'All Regions' %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-100 rounded-box w-52">
|
||||
<li>
|
||||
<%= link_to cities_path,
|
||||
class: "#{@current_region ? '' : 'active'}" do %>
|
||||
All Regions
|
||||
<% end %>
|
||||
|
||||
</li>
|
||||
<div class="divider my-1"></div>
|
||||
<% @regions.each do |region| %>
|
||||
<li>
|
||||
<%= link_to region.name,
|
||||
cities_path(region: region.slug),
|
||||
class: "btn btn-sm #{'btn-primary' if @current_region == region} btn-outline" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- 国家选择 (如果选择了区域) -->
|
||||
<% if @current_region %>
|
||||
<div class="flex flex-wrap gap-2 items-center justify-center">
|
||||
<%= 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}" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<% if @current_region || @current_country %>
|
||||
<div class="flex justify-center mt-4">
|
||||
<div class="breadcrumbs text-sm">
|
||||
<ul>
|
||||
<li>
|
||||
<%= link_to cities_path do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Home
|
||||
<% end %>
|
||||
class: "#{@current_region == region ? 'active' : ''}" %>
|
||||
</li>
|
||||
<% if @current_region %>
|
||||
<li><%= @current_region.name %></li>
|
||||
<% end %>
|
||||
<% if @current_country %>
|
||||
<li><%= @current_country.name %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 国家选择下拉框 (如果选择了区域) -->
|
||||
<% if @current_region %>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-ghost gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
|
||||
</svg>
|
||||
<%= @current_country&.name || "All Countries" %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-100 rounded-box w-52">
|
||||
<li>
|
||||
<%= link_to "All in #{@current_region.name}",
|
||||
cities_path(region: @current_region.slug),
|
||||
class: "#{@current_country ? '' : 'active'}" %>
|
||||
</li>
|
||||
<div class="divider my-1"></div>
|
||||
<% @current_region.countries.order(:name).each do |country| %>
|
||||
<li>
|
||||
<%= link_to country.name,
|
||||
cities_path(region: @current_region.slug, country: country.slug),
|
||||
class: "#{@current_country == country ? 'active' : ''}" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 城市网格 -->
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- 结果统计 -->
|
||||
<div class="text-center text-base-content/70 mb-8">
|
||||
Showing <%= @cities.count %> <%= 'city'.pluralize(@cities.count) %>
|
||||
<!-- 右侧结果统计 -->
|
||||
<div class="text-sm text-base-content/70">
|
||||
<%= @cities.count %> <%= 'city'.pluralize(@cities.count) %>
|
||||
<% if @current_country %>
|
||||
in <%= @current_country.name %>
|
||||
<% elsif @current_region %>
|
||||
in <%= @current_region.name %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 城市卡片网格 -->
|
||||
<!-- 城市网格 -->
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<%= render partial: 'city', collection: @cities %>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user