@extends('layouts.app')
@push('extra_body_classes')
+ resources-page {{-- For CSS hooks to change menu icon colour --}}
overflow-y-scroll {{-- We already know this will be a long page so this avoids the header jumping on load --}}
@endpush
{{-- RESOURCES --}}
<div x-data="resources()"
x-cloak
- x-intersect="shown = true"
- class="resources">
-
- <h1 class="uppercase mb-8 overflow-hidden">
- <span x-show="shown"
- x-transition:enter-start="translate-y-[110%]"
- style="transition-delay: 500ms;"
- class="block transition duration-500 transform ease-out-quint">
- {{ $resources['title'] }}
- </span>
- </h1>
- <h2 class="font-medium text-2xl mb-14 w-1/2 overflow-hidden">
- <span x-show="shown"
- x-transition:enter-start="translate-y-[110%]"
- style="transition-delay: 550ms;"
- class="block transition duration-500 transform ease-out-quint">
- {{ $resources['subtitle'] }}
- </span>
- </h2>
-
- {{-- Animation wrapper for remaining content --}}
- <div class="transition duration-500 ease-out-quint"
- style="transition-delay: 750ms"
- x-show="shown"
- x-transition:enter-start="opacity-0 translate-y-[50px]">
-
- {{-- --}}{{-- DOCUMENTS --}}
- {{-- @if (count($resources->documents) > 0)--}}
- {{-- <div class="grid lg:grid-cols-2 gap-6">--}}
- {{-- @foreach($resources->documents as $doc)--}}
- {{-- @if (!$doc['document_pdf'] || !isset($resources_pdf[$doc['document_pdf']]))--}}
- {{-- @continue--}}
- {{-- @endif--}}
- {{-- @php--}}
- {{-- /** @var \Cubist\Backpack\Magic\PageData $pdf */--}}
- {{-- $pdf = $resources_pdf[$doc['document_pdf']];--}}
- {{-- $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));--}}
- {{-- $thumb = null === $pdf->get('file_thumb')--}}
- {{-- ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')--}}
- {{-- : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));--}}
- {{-- @endphp--}}
- {{-- --}}{{--<a href="{{ $doc['document_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-blue h-full flex items-center p-10 text-white rounded-md">--}}
- {{-- <img class="w-1/2 pr-6"--}}
- {{-- src="{{ $thumb }}"--}}
- {{-- alt="{{ $doc['document_title'] }}">--}}
- {{-- --}}{{--<img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">--}}
- {{-- <div class="-mr-5 space-y-4">--}}
- {{-- <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>--}}
- {{-- <p>{{ $doc['document_subtitle'] }}</p>--}}
- {{-- <span class="bg-blue-dark inline-block rounded-full--}}
- {{-- py-4 px-10--}}
- {{-- transform transition--}}
- {{-- group-hover:scale-105">--}}
- {{-- Visualiser--}}
- {{-- </span>--}}
- {{-- </div>--}}
- {{-- </div>--}}
- {{-- </a>--}}
- {{-- @endforeach--}}
- {{-- </div>--}}
- {{-- @endif--}}
-
- {{-- --}}{{-- 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">
- <ul class="sticky top-6 space-y-8">
- @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
- </ul>
- </div>
+ x-init="setTimeout(() => shown = true, 50)"
+ class="resources flex -mx-8 {{-- expand content a bit because there are 2 columns --}}">
+
+ @php
+ // Classes to control width of sidebar (also used by spacer element)
+ $sidebar_constraints = 'w-[28vw] min-w-[300px] max-w-[520px]';
+ @endphp
+
+ {{-- SIDEBAR --}}
+ <div class="fixed top-0 left-0 h-screen
+ {{ $sidebar_constraints }}
+ bg-blue text-white
+ transition duration-700 ease-out-quart
+ -translate-x-full"
+ :class="{ '-translate-x-full': !shown }"
+ style="transition-delay: 300ms">
+
+ <ul class="pt-[9.5rem]">
+ @foreach ($resources['chapters'] as $index => $chapter)
+ <li class="font-medium text-base lg:text-lg leading-snug hover:bg-white/10 group">
+ <a href="#ch-{{ $index + 1 }}" class="block py-6 mx-[15%] border-b-2 border-blue-dark group-hover:border-transparent">
+ {{ $chapter['chapter_title'] }}
+ </a>
+ </li>
+ @endforeach
+ </ul>
+ </div>
+
+ {{-- SIDEBAR SPACER --}}
+ {{-- This div reserves the space for the fixed sidebar and should have the same min/max-widths --}}
+ <div class="{{ $sidebar_constraints }} flex-shrink-0"></div>
+
+ {{-- MAIN CONTENT --}}
+ <div class="resources-main">
+
+ <h1 class="uppercase mb-8 overflow-hidden">
+ <span x-show="shown"
+ x-transition:enter-start="translate-y-[110%]"
+ style="transition-delay: 0ms;"
+ class="block transition duration-500 transform ease-out-quint">
+ {{ $resources['title'] }}
+ </span>
+ </h1>
+ <h2 class="font-medium text-2xl mb-14 w-1/2 overflow-hidden">
+ <span x-show="shown"
+ x-transition:enter-start="translate-y-[110%]"
+ style="transition-delay: 50ms;"
+ class="block transition duration-500 transform ease-out-quint">
+ {{ $resources['subtitle'] }}
+ </span>
+ </h2>
+
+ {{-- Animation wrapper for remaining content --}}
+ <div class="transition duration-500 ease-out-quint opacity-0 translate-y-[50px]"
+ :class="{ 'opacity-0 translate-y-[50px]': !shown }"
+ style="transition-delay: 200ms;">
+
+ {{-- --}}{{-- DOCUMENTS --}}
+ {{-- @if (count($resources->documents) > 0)--}}
+ {{-- <div class="grid lg:grid-cols-2 gap-6">--}}
+ {{-- @foreach($resources->documents as $doc)--}}
+ {{-- @if (!$doc['document_pdf'] || !isset($resources_pdf[$doc['document_pdf']]))--}}
+ {{-- @continue--}}
+ {{-- @endif--}}
+ {{-- @php--}}
+ {{-- /** @var \Cubist\Backpack\Magic\PageData $pdf */--}}
+ {{-- $pdf = $resources_pdf[$doc['document_pdf']];--}}
+ {{-- $pdfurl = $pdf->getImageURLbyCollection($pdf->get('file_upload'));--}}
+ {{-- $thumb = null === $pdf->get('file_thumb')--}}
+ {{-- ? $pdf->getImageURLbyCollection($pdf->get('file_upload'),'poster')--}}
+ {{-- : $pdf->getImageURLbyCollection($pdf->get('file_thumb'));--}}
+ {{-- @endphp--}}
+ {{-- --}}{{--<a href="{{ $doc['document_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-blue h-full flex items-center p-10 text-white rounded-md">--}}
+ {{-- <img class="w-1/2 pr-6"--}}
+ {{-- src="{{ $thumb }}"--}}
+ {{-- alt="{{ $doc['document_title'] }}">--}}
+ {{-- --}}{{--<img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">--}}
+ {{-- <div class="-mr-5 space-y-4">--}}
+ {{-- <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>--}}
+ {{-- <p>{{ $doc['document_subtitle'] }}</p>--}}
+ {{-- <span class="bg-blue-dark inline-block rounded-full--}}
+ {{-- py-4 px-10--}}
+ {{-- transform transition--}}
+ {{-- group-hover:scale-105">--}}
+ {{-- Visualiser--}}
+ {{-- </span>--}}
+ {{-- </div>--}}
+ {{-- </div>--}}
+ {{-- </a>--}}
+ {{-- @endforeach--}}
+ {{-- </div>--}}
+ {{-- @endif--}}
+
+ {{-- --}}{{-- 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>--}}
+
{{-- CHAPTERS --}}
<div class="space-y-20">
@endforeach
</div>
</div>
- </div>
- </div>
+
+ </div> {{-- / MAIN CONTENT --}}
+ </div> {{-- / RESOURCES --}}
@endsection
projects / odl.git / commitdiff