From 8a80ae81c0e5b56f959d4f0ed1defc52273e8b37 Mon Sep 17 00:00:00 2001 From: Nonimart Date: Wed, 3 Sep 2025 12:27:34 +0200 Subject: [PATCH] FEATURE Adapting responsive different behaviour for index panel --- .../css/components/article-revues-toolbar.css | 10 ++++- resources/css/components/index-panel.css | 40 ++++++++++++++++--- resources/css/pages/singles.css | 32 ++++++++++++++- resources/js/singles/index-panel.ts | 15 ++++--- 4 files changed, 82 insertions(+), 15 deletions(-) diff --git a/resources/css/components/article-revues-toolbar.css b/resources/css/components/article-revues-toolbar.css index c47da8e..e6afe39 100644 --- a/resources/css/components/article-revues-toolbar.css +++ b/resources/css/components/article-revues-toolbar.css @@ -3,9 +3,15 @@ @apply col-span-2 container mx-auto; .tablist { - @apply flex items-center gap-12 border-b border-primary; + @apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary; button { - @apply text-xl mt-8 nunito pb-4 flex items-center gap-4; + @apply text-base md:text-lg lg:text-xl mt-8 nunito pb-4 flex flex-col lg:flex-row items-center gap-2 lg:gap-4 text-left; + grid-template-columns: auto 1fr; + /* white-space: normal; + word-wrap: break-word; */ + /* break-word: break-; */ + word-break: keep-all; + .icon { @apply w-8 h-8 block; } diff --git a/resources/css/components/index-panel.css b/resources/css/components/index-panel.css index 6c16a12..785c86f 100644 --- a/resources/css/components/index-panel.css +++ b/resources/css/components/index-panel.css @@ -1,13 +1,13 @@ .index-panel { - @apply p-6 m-0 border-primary border my-2; - max-height: 80vh; - overflow-y: auto; + @apply m-0 border-primary border my-2; + /* max-height: 80vh; + overflow-y: auto; */ &__header { - @apply flex gap-4 border-b border-gray-300 mb-8; + @apply p-4 md:p-6 pb-0 flex gap-4 border-b border-gray-300; button { - @apply pb-6 text-carhop-gray opacity-60 relative; + @apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative; box-sizing: border-box; @apply flex items-center gap-2; .icon { @@ -33,10 +33,16 @@ } &__content { + @apply p-4; + overflow-wrap: anywhere; ul[aria-hidden='true'] { @apply hidden; } + ul.sommaire-index, + ul.footnotes-index { + @apply bg-white overflow-y-auto max-h-[200px] lg:max-h-[calc(80vh-80px)] p-6 mb-0; + } } .sommaire-index a:hover, @@ -44,4 +50,28 @@ @apply text-carhop-green-800 underline-offset-8 underline decoration-neutral-400; text-decoration-thickness: 1px; } + + @media (max-width: 960px) { + @apply bg-carhop-green-700 relative z-50; + + .index-panel__header { + border-bottom: 0.25px solid rgba(255, 255, 255, 0.4); + button { + @apply text-white; + + img { + @apply filter-white; + } + &[aria-selected='true'] { + @apply text-white opacity-100; + .icon { + @apply filter-white opacity-100; + } + &:after { + @apply bg-white; + } + } + } + } + } } diff --git a/resources/css/pages/singles.css b/resources/css/pages/singles.css index 02e16f6..6a73104 100644 --- a/resources/css/pages/singles.css +++ b/resources/css/pages/singles.css @@ -1,8 +1,16 @@ .page--single-revue, .page--single-articles { .content-wrapper { - @apply container mx-auto grid grid-cols-12 gap-12 py-12 items-start; + /* @apply bg-yellow-400; */ + @apply container; + @apply mx-auto grid gap-12 py-12 items-start; + grid-template-columns: 1fr 2fr; + + @media (max-width: 1024px) { + grid-template-columns: 1fr; + } + &[data-active-tab='article'] { #article-tags, #article-authors, @@ -56,7 +64,11 @@ } .sidebar { - @apply sticky top-0 left-0 h-fit; + @media (max-width: 1024px) { + #article-tags { + @apply hidden; + } + } .search-field { input { @apply border border-primary w-full; @@ -133,3 +145,19 @@ @apply text-4xl uppercase font-thin mb-12; } } + +/* HANDLING STICKY SIDEBAR ON MOBILE */ +.content-wrapper[data-active-tab='article'] { + .sidebar { + @apply sticky top-0; + + /* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */ + /* We need to reverse the content order */ + @media (max-width: 1024px) { + @apply sticky bottom-0; + order: 2; + @apply sticky bottom-0; + align-self: flex-end; + } + } +} diff --git a/resources/js/singles/index-panel.ts b/resources/js/singles/index-panel.ts index 44c1370..94384a5 100644 --- a/resources/js/singles/index-panel.ts +++ b/resources/js/singles/index-panel.ts @@ -122,17 +122,20 @@ export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void { export function scrollToFootnoteInIndexPanel(footnoteId: string): void { const footnotesIndex = document.querySelector('#footnotes-index') as HTMLElement; - const indexPanel = document.querySelector('.index-panel') as HTMLElement; - const currentFootnote = indexPanel?.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement; + const footnotesIndexContainer = document.querySelector('ul#footnotes-index'); + const indexPanelContent = document.querySelector('.index-panel__content') as HTMLElement; + const currentFootnote = footnotesIndexContainer?.querySelector( + `a[href="#${footnoteId}"]` + ) as HTMLElement; - if (currentFootnote && indexPanel) { - const containerRect = indexPanel.getBoundingClientRect(); + if (currentFootnote && footnotesIndexContainer) { + const containerRect = footnotesIndexContainer.getBoundingClientRect(); const elementRect = currentFootnote.getBoundingClientRect(); const relativeTop = elementRect.top - containerRect.top; - const scrollTop = indexPanel.scrollTop + relativeTop - 20; + const scrollTop = footnotesIndexContainer.scrollTop + relativeTop - 20; - indexPanel.scrollTo({ + footnotesIndexContainer.scrollTo({ top: scrollTop, behavior: 'smooth', });