From 7b5b3d2ba2443fcbd1eaf7f7dcf7d8f289e9b88f Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 13 Jan 2022 13:34:04 +0100
Subject: [PATCH] Wait #5018 @2

---
 resources/css/common/global.css               |   1 +
 .../components/media-library/index.blade.php  |   1 -
 resources/views/front/resources.blade.php     | 128 ++++++++++++------
 3 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/resources/css/common/global.css b/resources/css/common/global.css
index ef72455..79ded0a 100644
--- a/resources/css/common/global.css
+++ b/resources/css/common/global.css
@@ -1,5 +1,6 @@
 html, body {
     min-height: 100%;
+    scroll-behavior: smooth;
 }
 
 body.overlay-open {
diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php
index 558a7bc..6f39110 100644
--- a/resources/views/components/media-library/index.blade.php
+++ b/resources/views/components/media-library/index.blade.php
@@ -53,7 +53,6 @@
                     'image' => $item['image'],
                 ];
             @endphp
-            {{-- TODO: deep-linking - is it actually needed here? Probably won't be linking directly to media... Could use replaceState() to update URL with querystring when opening / closing media. Check this on init / page load so that player can open the overlay already. Since the player needs several details, it's better to store this all in a data attribute and load the player based on the ID of the media / element that contains the data --}}
 
             <div id="media_{{ $item['id'] }}"
                  @click="openPlayer(JSON.parse($el.dataset.player))"
diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php
index 15924e3..f012c33 100644
--- a/resources/views/front/resources.blade.php
+++ b/resources/views/front/resources.blade.php
@@ -124,56 +124,94 @@
                 </div>
             @endif
 
-            {{-- CHAPTERS --}}
-            @foreach ($resources['chapters'] as $chapter)
-                <div class="mt-15">
-                    <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
-
-                    {{-- SUB-CHAPTERS --}}
-                    @foreach ($chapter['subchapters'] as $subchapter)
-                        <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
-                        <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
-
-                        {{-- MEMOS --}}
-                        <div class="grid grid-cols-2 gap-5 mt-8">
-                            @foreach ($subchapter['subchapter_memos'] as $memo)
-                                @if (!$memo['memo_pdf'] || !isset($resources_pdf[$memo['memo_pdf']]))
-                                    @continue
-                                @endif
-                                @php
-                                    /** @var \Cubist\Backpack\Magic\PageData $pdf */
-                                    $pdf = $resources_pdf[$memo['memo_pdf']];
-                                    $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));
-                                    $thumb = !$pdf->get('file_thumb') || !$pdf->getImageURLbyCollection($pdf->get('file_thumb'))
-                                        ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')
-                                        : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));
-                                @endphp
-
-                                {{--<a href="{{ $memo['memo_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
-                                <a href="{{ $pdfurl }}"
-                                   @click.prevent="openPDF($el.attributes.href.value)"
-                                   class="group">
-                                    <div class="bg-grey-50 flex items-start h-full p-[1.875rem] rounded-md">
-                                        <img class="w-1/4 mr-5 shadow-sm"
-                                             style="min-width: 105px; box-shadow: 2px 3px 3px 0 rgb(0 0 0 / 15%);"
-                                             src="{{ $thumb }}"
-                                             alt="{{ $memo['memo_title'] }}">
-                                        <div class="space-y-2.5 pt-4">
-                                            @if ($memo['memo_number'])
-                                                <h3 class="text-lg font-semibold">{{ $memo['memo_number'] }}</h3>
+            {{-- MEMOS TITLE --}}
+            <p class="my-15">
+                <span class="inline-block p-2.5
+                             font-secondary font-bold uppercase text-xs leading-none
+                             border border-current">
+                    Les mémos
+                </span>
+            </p>
+
+            {{-- MAIN SECTION WITH SIDEBAR --}}
+            <div class="flex">
+                {{-- SIDEBAR --}}
+                <div class="flex-shrink-0 w-1/4 mr-10" style="max-width: 265px">
+                    <ol class="sticky top-6 list-decimal space-y-8 pl-4">
+                        @foreach ($resources['chapters'] as $index => $chapter)
+                            <li class="font-semibold text-lg leading-snug">
+                                <a href="#ch-{{ $index + 1 }}" class="block hover:text-blue">
+                                    {{ $chapter['chapter_title'] }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ol>
+                </div>
+
+                {{-- CHAPTERS --}}
+                <div class="space-y-20">
+                    @foreach ($resources['chapters'] as $index => $chapter)
+                        {{-- CHAPTER BLOCK --}}
+                        <div class="chapter">
+                                {{--
+                                    Opposing top padding (pt-4) + negative top margin (-mt-4) gives
+                                    space above scroll anchor position without misaligning anything
+                                --}}
+                                <h3 class="text-4xl pt-4 -mt-4" id="ch-{{ $index + 1 }}">
+                                    {{ $index + 1 }}. {{ $chapter['chapter_title'] }}
+                                </h3>
+
+                                {{-- SUB-CHAPTERS --}}
+                                @foreach ($chapter['subchapters'] as $subchapter_index => $subchapter)
+                                    @if (empty($subchapter['subchapter_title']))
+                                        @continue
+                                    @endif
+
+                                    <h4 class="mt-8 text-2xl">{{ $index + 1 }}.{{ $subchapter_index + 1 }} {{ $subchapter['subchapter_title'] }}</h4>
+                                    <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
+
+                                    {{-- MEMOS --}}
+                                    <div class="grid grid-cols-2 gap-5 mt-8">
+                                        @foreach ($subchapter['subchapter_memos'] as $memo)
+                                            @if (!$memo['memo_pdf'] || !isset($resources_pdf[$memo['memo_pdf']]))
+                                                @continue
                                             @endif
-                                            <h4 class="text-base font-semibold">{{ $memo['memo_title'] }}</h4>
-                                            <h5 class="text-base">{{ $memo['memo_subtitle'] }}</h5>
-                                            <span
-                                                class="circle-arrow transform transition group-hover:scale-110"></span>
-                                        </div>
+                                            @php
+                                                /** @var \Cubist\Backpack\Magic\PageData $pdf */
+                                                $pdf = $resources_pdf[$memo['memo_pdf']];
+                                                $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));
+                                                $thumb = !$pdf->get('file_thumb') || !$pdf->getImageURLbyCollection($pdf->get('file_thumb'))
+                                                    ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')
+                                                    : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));
+                                            @endphp
+
+                                            {{--<a href="{{ $memo['memo_pdf'] }}" @click.prevent="openPDF($el.attributes.href.value)" class="group">--}}
+                                            <a href="{{ $pdfurl }}"
+                                               @click.prevent="openPDF($el.attributes.href.value)"
+                                               class="group">
+                                                <div class="bg-grey-50 flex items-start h-full p-[1.875rem] rounded-md">
+                                                    <img class="w-1/4 mr-5 shadow-sm"
+                                                         style="min-width: 105px; box-shadow: 2px 3px 3px 0 rgb(0 0 0 / 15%);"
+                                                         src="{{ $thumb }}"
+                                                         alt="{{ $memo['memo_title'] }}">
+                                                    <div class="space-y-2.5 pt-4">
+                                                        @if ($memo['memo_number'])
+                                                            <h3 class="text-lg font-semibold">{{ $memo['memo_number'] }}</h3>
+                                                        @endif
+                                                        <h4 class="text-base font-semibold">{{ $memo['memo_title'] }}</h4>
+                                                        <h5 class="text-base">{{ $memo['memo_subtitle'] }}</h5>
+                                                        <span
+                                                            class="circle-arrow transform transition group-hover:scale-110"></span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        @endforeach
                                     </div>
-                                </a>
-                            @endforeach
+                                @endforeach
                         </div>
                     @endforeach
                 </div>
-            @endforeach
+            </div>
         </div>
 
         {{-- PDF Viewer Overlay --}}
-- 
2.39.5