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

progressive enhancement for collection filter pills

Browse Source 
Flex-wrap base (no JS needed, active pill always visible). JS hook
switches to horizontal scroll with scroll-into-view when pills exceed
2.5 rows on mobile. Desktop always wraps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-16 17:47:51 +00:00
parent bb358f890b
commit 3158a94f0b
3 changed files with 97 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
lib/simpleshop_theme_web/live/shop/collection.ex
View File

@@ -137,57 +137,44 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
<nav
aria-label="Collection filters"
class="collection-filter-scroll overflow-x-auto py-1 -mx-4 px-4 sm:overflow-visible sm:mx-0 sm:px-0 sm:py-0"
id="collection-filters"
phx-hook="CollectionFilters"
class="collection-filters"
>
<ul class="flex gap-1.5 sm:flex-wrap sm:gap-2">
<li class="shrink-0">
<ul class="collection-filter-pills">
<li>
<.link
navigate={collection_path("all", @current_sort)}
aria-current={@current_slug == nil && "page"}
class={[
"px-3 py-1.5 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm whitespace-nowrap transition-colors",
if(@current_slug == nil, do: "font-medium", else: "hover:opacity-80")
"collection-filter-pill",
if(@current_slug == nil, do: "active", else: "hover:opacity-80")
]}
style={
if(@current_slug == nil,
do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
)
}
>
All
</.link>
</li>
<li class="shrink-0">
<li>
<.link
navigate={collection_path("sale", @current_sort)}
aria-current={@current_slug == "sale" && "page"}
class={[
"px-3 py-1.5 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm whitespace-nowrap transition-colors",
if(@current_slug == "sale", do: "font-medium", else: "hover:opacity-80")
"collection-filter-pill",
if(@current_slug == "sale", do: "active", else: "hover:opacity-80")
]}
style={
if(@current_slug == "sale",
do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
)
}
>
Sale
</.link>
</li>
<%= for category <- @categories do %>
<li class="shrink-0">
<li>
<.link
navigate={collection_path(category.slug, @current_sort)}
aria-current={@current_slug == category.slug && "page"}
class={[
"px-3 py-1.5 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm whitespace-nowrap transition-colors",
if(@current_slug == category.slug, do: "font-medium", else: "hover:opacity-80")
"collection-filter-pill",
if(@current_slug == category.slug, do: "active", else: "hover:opacity-80")
]}
style={
if(@current_slug == category.slug,
do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
)
}
>
{category.name}
</.link>