From a8195c1c9742d91223c184e73518cf10e94ffd23 Mon Sep 17 00:00:00 2001 From: fabiodalez-dev Date: Fri, 31 Jul 2026 20:06:06 +0200 Subject: [PATCH 1/2] fix(frontend): mobile layout fixes for catalogue + book detail MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Pagination: the .pagination/.page-item/.page-link classes carried no framework CSS after Bootstrap's removal, so the page links stacked vertically. Lay them out as a centred, wrapping flex row. - Source links ("Cerca su"): on mobile they rendered ~300px wide and left-packed, misaligned with the full-width Reserve/Favourite buttons above. Stack them full width so the whole action area reads as one column. - Info sections: dropped the 2rem all-around mobile padding that doubled up with the column's px-3; vertical-only padding makes the info span the same width as the title above. - Card header (Informazioni Libro): removed the bottom hairline (explicit border-bottom:none to beat the global .card-header rule) and balanced the vertical padding. - Related books (mobile carousel): below 767px it is a snap-scroll strip showing one dominant whole book with ~15% of the next peeking as the scroll affordance. Fixed the real bug: the base grid's justify-content:center leaked into the overflowing flex strip and centred the cells, showing two half-covers at scrollLeft 0 — reset to flex-start, start-aligned, snap-stop:always. - Breadcrumb: the divider was scoped to .book-breadcrumb only, so the catalogue breadcrumb had none — generalise it to every .breadcrumb, with currentColor so it works on dark and light backgrounds. - Add a theme-color meta so the mobile browser chrome uses the theme's primary colour. --- app/Views/frontend/book-detail.php | 56 +++++++++++++++++++++--------- app/Views/frontend/catalog.php | 22 +++++++++--- app/Views/frontend/layout.php | 3 ++ public/assets/frontend-layouts.css | 19 ++++++++-- 4 files changed, 77 insertions(+), 23 deletions(-) diff --git a/app/Views/frontend/book-detail.php b/app/Views/frontend/book-detail.php index 198d3b79..fff213af 100644 --- a/app/Views/frontend/book-detail.php +++ b/app/Views/frontend/book-detail.php @@ -1123,15 +1123,14 @@ .card-header { background: transparent; - border-bottom: 1px solid var(--border-color); - /* Side MARGIN (not padding): padding would leave the border-bottom - full-width, since a border sits on the box perimeter outside the - padding. Margin shrinks the box itself, so this rule lines up - exactly with the .meta-item hairlines (which are inset 1.5rem by - .card-body's padding). Vertical padding gives the label air above - the line. */ + /* Explicit `none` (not just omitted) so it beats the global .card-header + border in main.css. The header is just a small section label above the + meta rows, not a boxed card head, so the hairline read as clutter. + Balanced vertical padding; margin keeps the label inset in line with + the .card-body content (1.5rem). */ + border-bottom: none; margin: 0 1.5rem; - padding: 0.25rem 0 1rem; + padding: 0.5rem 0; } .card-header h6 { @@ -1276,7 +1275,10 @@ .book-description-section, .book-details-section, .book-reviews-section { - padding: 2rem; + /* Vertical padding only: horizontal spacing comes from the column + container (`px-3`), so the info spans the same width as the title + above instead of double-padding and looking narrow on mobile. */ + padding: 2rem 0; } /* Card contenuti full-bleed su mobile */ @@ -1407,7 +1409,10 @@ .book-description-section, .book-details-section, .book-reviews-section { - padding: 2rem; + /* Vertical padding only: horizontal spacing comes from the column + container (`px-3`), so the info spans the same width as the title + above instead of double-padding and looking narrow on mobile. */ + padding: 2rem 0; } .breadcrumb { @@ -1511,7 +1516,9 @@ .book-description-section, .book-details-section, .book-reviews-section { - padding: 1.5rem; + /* Vertical padding only — see the note above; keeps the info full + width (as wide as the title) on the smallest screens. */ + padding: 1.5rem 0; } .hero-text { @@ -1568,11 +1575,12 @@ min-width: 0; } - /* Narrow phones (~360-390px): the grid collapses to a single visible column - so only one related book shows. Switch to a horizontal snap-scroll strip - instead, so all related books are reachable by swiping. The 80% flex-basis - leaves a ~20% peek of the next card as the scroll affordance (F003). */ - @media (max-width: 480px) { + /* Phones and small tablets: the desktop grid packs 2+ partial, cut-off cards. + Switch to a horizontal snap-scroll strip that shows ONE whole book per view + and snaps book-by-book, so all related books are reachable by swiping. + Breakpoint raised to 767px so every phone (and small portrait tablet) gets + the one-book carousel instead of clipped grid cards. */ + @media (max-width: 767px) { .related-books-grid { display: flex; flex-wrap: nowrap; @@ -1580,6 +1588,12 @@ overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; + /* CRITICAL: the base grid rule sets justify-content:center for the + centred desktop grid. On an OVERFLOWING flex scroll strip that + centres the cells, pushing the first one off-screen left so two + half-cells show at scrollLeft:0. Reset to flex-start so the strip + starts on the first whole card. */ + justify-content: flex-start; /* neutralize the desktop grid props so they don't interfere */ grid-template-columns: none; grid-template-rows: none; @@ -1594,8 +1608,16 @@ display: none; } .related-book-cell { - flex: 0 0 80%; + /* One dominant whole book per view, with ~15% of the NEXT card + peeking on the right as the scroll affordance (otherwise a + full-width card gives no hint that the strip scrolls). start + + scroll-snap-stop:always still land each swipe on exactly one card. + The peek is one-sided (the base grid centering was reset to + flex-start above), so it reads as more-to-the-right, not as two + half-covers. */ + flex: 0 0 85%; scroll-snap-align: start; + scroll-snap-stop: always; } } diff --git a/app/Views/frontend/catalog.php b/app/Views/frontend/catalog.php index 94dec0a3..8fed4680 100644 --- a/app/Views/frontend/catalog.php +++ b/app/Views/frontend/catalog.php @@ -1095,6 +1095,24 @@ } /* Pagination - keep in sync with global dark accent */ + /* Horizontal row of page links. The .pagination/.page-item classes carry no + framework CSS anymore (Bootstrap was removed), so the list is laid out + here: a centered, wrapping flex row instead of stacked
  • blocks. */ + .pagination { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0.4rem; + list-style: none; + padding: 0; + margin: 0; + } + + .pagination .page-item { + margin: 0; + } + .pagination .page-link { color: #111827; border-color: #111827; @@ -1119,10 +1137,6 @@ border-color: #000000; } - ul.pagination.justify-content-center { - gap: 20px; - } - .page-item:first-child .page-link { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); diff --git a/app/Views/frontend/layout.php b/app/Views/frontend/layout.php index af653c62..f63dca87 100644 --- a/app/Views/frontend/layout.php +++ b/app/Views/frontend/layout.php @@ -140,6 +140,9 @@ + + <?= HtmlHelper::e($seoTitle ?? $title ?? $appName) ?> diff --git a/public/assets/frontend-layouts.css b/public/assets/frontend-layouts.css index 789d53e2..2fa9e113 100644 --- a/public/assets/frontend-layouts.css +++ b/public/assets/frontend-layouts.css @@ -52,9 +52,13 @@ body[class*="layout-"] .book-breadcrumb .breadcrumb-item { line-height: 1.4; } -body[class*="layout-"] .book-breadcrumb .breadcrumb-item + .breadcrumb-item::before { +/* Breadcrumb separator for EVERY breadcrumb (book detail, catalogue, CMS…): + the catalogue `
      ` is not inside `.book-breadcrumb`, so + it had no divider. currentColor adapts to any background — dark text on the + book page, white text on the coloured catalogue hero. */ +body[class*="layout-"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin-right: .4rem; - color: color-mix(in srgb, var(--text-color) 38%, var(--light-bg)); + color: color-mix(in srgb, currentColor 55%, transparent); content: '›'; font-size: 1rem; line-height: 1; @@ -2009,6 +2013,17 @@ body.layout-soft .plugin-source-link { border-radius: 13px; } +/* Mobile: the source links were ~300px wide and left-packed into a column that + looked narrower than — and misaligned with — the full-width Reserve/Favourite + buttons right above them. Stack them full width so the whole action area reads + as one consistent column of buttons. */ +@media (max-width: 767px) { + body[class*="layout-"] #book-action-buttons .plugin-source-link { + flex: 1 0 100%; + max-width: 100%; + } +} + body.layout-soft .plugin-source-search--frontend { border-top-color: transparent; background: color-mix(in srgb, var(--primary-color) 5%, transparent); From a206a56d14d07d67b14f2af0c60a72026dae6795 Mon Sep 17 00:00:00 2001 From: fabiodalez-dev Date: Fri, 31 Jul 2026 20:40:17 +0200 Subject: [PATCH 2/2] fix(frontend): address CodeRabbit review - Align the book-info card header with the reduced card-body padding on mobile (<=576px), overriding main.css's `.card-header { margin:0 !important }` so the section label lines up with the meta rows below it. - Lowercase `currentcolor` in the breadcrumb separator (stylelint value-keyword-case). --- app/Views/frontend/book-detail.php | 9 +++++++++ public/assets/frontend-layouts.css | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/Views/frontend/book-detail.php b/app/Views/frontend/book-detail.php index fff213af..be4800fd 100644 --- a/app/Views/frontend/book-detail.php +++ b/app/Views/frontend/book-detail.php @@ -1472,6 +1472,15 @@ .card-body { padding: 1rem; } + + /* Match the header inset to the reduced .card-body padding (1rem) so the + section label lines up with the meta rows below it on mobile. Needs + !important to beat main.css .card-header { margin:0 !important } which + otherwise leaves the label flush-left of the inset meta rows. */ + .card-header { + margin-left: 1rem !important; + margin-right: 1rem !important; + } } @media (max-width: 400px) { diff --git a/public/assets/frontend-layouts.css b/public/assets/frontend-layouts.css index 2fa9e113..206c3e27 100644 --- a/public/assets/frontend-layouts.css +++ b/public/assets/frontend-layouts.css @@ -58,7 +58,7 @@ body[class*="layout-"] .book-breadcrumb .breadcrumb-item { book page, white text on the coloured catalogue hero. */ body[class*="layout-"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin-right: .4rem; - color: color-mix(in srgb, currentColor 55%, transparent); + color: color-mix(in srgb, currentcolor 55%, transparent); content: '›'; font-size: 1rem; line-height: 1;