jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix breadcrumb styling: semantic markup, chevron separators, mobile sizing

Browse Source 
Rewrite breadcrumb as semantic ol/li with aria-current="page", CSS
chevron separators, 0.875em font size, and ellipsis truncation on
mobile for long product names.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-10 15:58:26 +00:00
parent 8445e9e8b1
commit dc8bf28892
3 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
lib/simpleshop_theme_web/components/shop_components/product.ex
View File

@@ -1040,28 +1040,29 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
def breadcrumb(assigns) do
~H"""
<nav class="mb-8 flex items-center gap-2 text-sm" style="color: var(--t-text-secondary);">
<%= for {item, index} <- Enum.with_index(@items) do %>
<%= if index > 0 do %>
<span>/</span>
<% end %>
<%= if item[:current] do %>
<span style="color: var(--t-text-primary);">{item.label}</span>
<% else %>
<%= if @mode == :preview do %>
<a
href="#"
phx-click="change_preview_page"
phx-value-page={item.page}
class="hover:underline"
>
{item.label}
</a>
<nav aria-label="Breadcrumb" class="breadcrumb" style="color: var(--t-text-secondary);">
<ol>
<%= for {item, _index} <- Enum.with_index(@items) do %>
<%= if item[:current] do %>
<li aria-current="page" style="color: var(--t-text-primary);">{item.label}</li>
<% else %>
<a href={item.href || "/"} class="hover:underline">{item.label}</a>
<li>
<%= if @mode == :preview do %>
<a
href="#"
phx-click="change_preview_page"
phx-value-page={item.page}
class="hover:underline"
>
{item.label}
</a>
<% else %>
<a href={item.href || "/"} class="hover:underline">{item.label}</a>
<% end %>
</li>
<% end %>
<% end %>
<% end %>
</ol>
</nav>
"""
end