kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Improve mobile responsiveness

Browse Source
This commit is contained in:
kbe
2025-09-15 19:06:15 +02:00
parent 20f926cd7a
commit f0d32bf3f1
3 changed files with 48 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/views/components/_breadcrumb.html.erb
View File

@@ -6,26 +6,41 @@
<%# ] %>
<!-- Breadcrumb -->
<nav class="inline-flex items-center gap-2 bg-white px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-8" aria-label="Breadcrumb">
<% crumbs.each_with_index do |crumb, index| %>
<% if crumb[:path].present? %>
<%# Crumb with link %>
<%= link_to crumb[:path], class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200" do %>
<% if index == 0 %>
<i data-lucide="home" class="w-4 h-4 mr-2"></i>
<nav class="w-full bg-white px-3 sm:px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-6 sm:mb-8 overflow-hidden" aria-label="Breadcrumb">
<div class="flex items-center gap-1 sm:gap-2 min-w-0">
<% crumbs.each_with_index do |crumb, index| %>
<% if crumb[:path].present? %>
<%# Crumb with link %>
<%= link_to crumb[:path], class: "inline-flex items-center text-xs sm:text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200 flex-shrink-0" do %>
<% if index == 0 %>
<i data-lucide="home" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"></i>
<% end %>
<span class="<%= 'hidden sm:inline' if index > 0 && index < crumbs.length - 2 %>">
<%= crumb[:name] %>
</span>
<% end %>
<% else %>
<%# Current page (no link) %>
<span class="text-xs sm:text-sm font-medium text-primary-600 truncate min-w-0 flex-1" aria-current="page">
<%= crumb[:name] %>
</span>
<% end %>
<%# Separator (except for the last item) %>
<% if index < crumbs.length - 1 %>
<% if index == 0 || index >= crumbs.length - 2 %>
<i data-lucide="chevron-right" class="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0"></i>
<% else %>
<span class="hidden sm:inline">
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 flex-shrink-0"></i>
</span>
<% end %>
<%= crumb[:name] %>
<% end %>
<% else %>
<%# Current page (no link) %>
<span class="text-sm font-medium text-primary-600 truncate max-w-xs" aria-current="page">
<%= crumb[:name] %>
</span>
<% end %>
<%# Separator (except for the last item) %>
<% if index < crumbs.length - 1 %>
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
<%# Show ellipsis on mobile when there are more than 3 items %>
<% if crumbs.length > 3 %>
<span class="text-gray-400 text-xs font-medium sm:hidden flex-shrink-0">...</span>
<% end %>
<% end %>
</div>
</nav>