From dc8bf2889280f5e6253be2684ce11bcac424eb3d Mon Sep 17 00:00:00 2001 From: jamey Date: Tue, 10 Feb 2026 15:58:26 +0000 Subject: [PATCH] fix breadcrumb styling: semantic markup, chevron separators, mobile sizing 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 --- PROGRESS.md | 6 ++- assets/css/theme-layer2-attributes.css | 37 ++++++++++++++++++ .../components/shop_components/product.ex | 39 ++++++++++--------- 3 files changed, 61 insertions(+), 21 deletions(-) diff --git a/PROGRESS.md b/PROGRESS.md index 5600e34..9ae2aa4 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -41,7 +41,8 @@ Issues found during hands-on testing of the deployed prod site on mobile and des - [x] Product card second image: swipe to reveal on mobile (currently hover-only) ### Product detail page -- [ ] Product category breadcrumbs look bad — review styling/layout +- [x] PDP image gallery: scroll-snap carousel with dots (mobile), thumbnails + arrows + lightbox (desktop) +- [x] Product category breadcrumbs look bad — review styling/layout - [ ] Quantity selector on product page doesn't work - [ ] Trust badges: two different tick icons, should use sentence case not title case - [ ] Real product variants need testing and refinement with live data @@ -303,7 +304,8 @@ See: [docs/plans/page-builder.md](docs/plans/page-builder.md) for design | PageSpeed CI | 516d0d0 | `mix lighthouse` task, prod asset build, gzip, 99-100 mobile scores | | Observability | eaa4bbb | LiveDashboard in prod, ErrorTracker, JSON logging, Oban/LV metrics, os_mon | | Hosting & deployment | — | Alpine Docker, Fly.io, health check, release path fixes | -| CI pipeline | — | mix ci/precommit aliases, credo, dialyzer, 612 tests | +| PDP image gallery | 8445e9e | Scroll-snap carousel, dots, thumbnails, arrows, lightbox, 9 tests | +| CI pipeline | — | mix ci/precommit aliases, credo, dialyzer, 621 tests | | Default content pages | 5a43cfc | Generic Content LiveView, delivery/privacy/terms pages, 10 tests | | Transactional emails | — | Plain text order confirmation + shipping notification, 10 tests | | Printify order submission & fulfilment | — | Submit, track, webhooks, polling, admin UI, 33 tests | diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css index f1137b8..3a3c9d1 100644 --- a/assets/css/theme-layer2-attributes.css +++ b/assets/css/theme-layer2-attributes.css @@ -435,6 +435,43 @@ transition: transform 0.2s ease; } +/* Breadcrumb */ +.breadcrumb { + margin-bottom: 1rem; + font-size: 0.875em; + + & ol { + display: flex; + flex-wrap: wrap; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + } + + & li + li::before { + content: "\203A"; + padding-inline: 0.375em; + } + + & li[aria-current="page"] { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 20ch; + } +} + +@media (min-width: 640px) { + .breadcrumb { + margin-bottom: 2rem; + + & li[aria-current="page"] { + max-width: none; + } + } +} + /* PDP Gallery — mobile: swipe + dots, desktop: carousel + thumbs */ .pdp-gallery-carousel, .pdp-gallery-single { diff --git a/lib/simpleshop_theme_web/components/shop_components/product.ex b/lib/simpleshop_theme_web/components/shop_components/product.ex index 0ed7d2d..6d939f3 100644 --- a/lib/simpleshop_theme_web/components/shop_components/product.ex +++ b/lib/simpleshop_theme_web/components/shop_components/product.ex @@ -1040,28 +1040,29 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do def breadcrumb(assigns) do ~H""" -