From 21a83896332d9982033ee43da4b7e5e16d3bea98 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 4 Nov 2021 19:46:37 +0100
Subject: [PATCH] WIP #4781 @4

---
 resources/css/app.css                         |  18 ++--
 resources/css/common/fonts.css                |  24 ++---
 resources/views/front/home.blade.php          |   4 +-
 resources/views/front/media-library.blade.php | 102 +++++++++++++++++-
 resources/views/layouts/app.blade.php         |  53 ++++++---
 tailwind.config.js                            |   7 ++
 6 files changed, 165 insertions(+), 43 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 2c062a0..7518436 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,13 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import 'common/fonts.css';
+@import 'common/menu.css';
+@import 'common/global.css';
 
-@layer base {
-    @import 'common/fonts.css';
-    @import 'common/menu.css';
-    @import 'common/global.css';
-}
+@import "tailwindcss/components";
 
-@layer utilities {
-    @import 'common/utilities.css';
-}
+@import "tailwindcss/utilities";
+@import 'common/utilities.css';
diff --git a/resources/css/common/fonts.css b/resources/css/common/fonts.css
index e31a08e..d62e891 100644
--- a/resources/css/common/fonts.css
+++ b/resources/css/common/fonts.css
@@ -26,9 +26,9 @@
 /*=== GeneralSans-Variable ===*/
 @font-face {
     font-family: 'GeneralSans';
-    src: url('../../fonts/GeneralSans-Variable.woff2') format('woff2'),
-    url('../../fonts/GeneralSans-Variable.woff') format('woff'),
-    url('../../fonts/GeneralSans-Variable.ttf') format('truetype');
+    src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
+    url('../fonts/GeneralSans-Variable.woff') format('woff'),
+    url('../fonts/GeneralSans-Variable.ttf') format('truetype');
     font-weight: 200 700;
     font-display: swap;
     font-style: normal;
@@ -37,9 +37,9 @@
 /*=== GeneralSans-VariableItalic ===*/
 @font-face {
     font-family: 'GeneralSans';
-    src: url('../../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
-    url('../../fonts/GeneralSans-VariableItalic.woff') format('woff'),
-    url('../../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
+    src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
+    url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
+    url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
     font-weight: 200 700;
     font-display: swap;
     font-style: italic;
@@ -56,8 +56,8 @@
     font-style: normal;
     font-weight: 400;
     src: local(''),
-    url('../../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-500 - latin */
 @font-face {
@@ -65,8 +65,8 @@
     font-style: normal;
     font-weight: 500;
     src: local(''),
-    url('../../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url('../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-700 - latin */
 @font-face {
@@ -74,6 +74,6 @@
     font-style: normal;
     font-weight: 700;
     src: local(''),
-    url('../../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url('../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
index 8deba39..c8b0bea 100644
--- a/resources/views/front/home.blade.php
+++ b/resources/views/front/home.blade.php
@@ -33,8 +33,9 @@
     <div class="flex flex-col flex-1 -mx-22 -mt-22">
 
         {{-- Main home content --}}
-        <div x-data="{ shown: false }" x-intersect="shown = true"
+        <div x-cloak x-data="{ shown: false }" x-intersect="shown = true"
              class="flex flex-1 justify-center -mb-16">{{-- negative margin so image shadow sits under shortcuts --}}
+
             {{-- Left Column: logo + text + CTA --}}
             <div class="home-left flex flex-1 flex-col justify-center items-center p-6 max-w-[360px]">
                 @if($logo)
@@ -55,6 +56,7 @@
                     </a>
                 @endif
             </div>
+
             {{-- Right Column: Illustration image --}}
             <div class="home-right flex-1 max-w-[550px]">
                 <div class="w-full h-full
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php
index 1c7f2a3..b76de3f 100644
--- a/resources/views/front/media-library.blade.php
+++ b/resources/views/front/media-library.blade.php
@@ -72,13 +72,29 @@
                 ],
             ],
         ];
+
+        $media_types = [
+            'video' => 'Vidéos',
+            'audio' => 'Podcast',
+        ];
+
+        $themes = [
+            '1' => "Gouvernance",
+            '5' => "Responsabilité sociétale et environnementale",
+            '2' => "Communication",
+            '6' => "Recherche et innovation",
+            '3' => "Organisation",
+            '7' => "Qualité de service à l'usager",
+            '4' => "Système d'information",
+            '8' => "Conditions techniques",
+        ];
     @endphp
 
     <h1 class="uppercase">Médiathèque</h1>
 
     {{-- FILTERS --}}
-    <div class="mt-10">
-        <a href="#" class="inline-block bg-black hover:bg-blue text-white font-secondary font-medium leading-none py-4 px-6 rounded-full">Filtrer</a>
+    <div class="mt-10" x-data>
+        <a @click.prevent="$dispatch('open-filters')" href="#" class="inline-block bg-black hover:bg-blue text-white font-secondary font-medium leading-none py-4 px-6 rounded-full">Filtrer</a>
     </div>
 
     {{-- MEDIA LIBRARY GRID --}}
@@ -97,7 +113,89 @@
                 </div>
             </div>
         @endforeach
+    </div>
+
+    <div x-data="{ filtersOpen: false }" @open-filters.window="filtersOpen = true">
+        {{-- FILTERING INTERFACE --}}
+        <div class="filters-overlay
+                fixed top-0 left-0 w-screen h-screen
+                flex items-center
+                bg-blue text-white
+                px-30
+                z-20
+                transition ease-out-cubic duration-500"
+             x-show="filtersOpen"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             x-cloak>
+
+            {{-- Close --}}
+            <a href="#" @click.prevent="filtersOpen = false" class="absolute top-8 right-8 flex">
+                <span class="mr-8">Fermer</span>
+
+                <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="33" height="26" viewBox="0 0 25.098 25.098">
+                    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path d="m1.414 23.683 22.27-22.27"/>
+                        <path d="m1.414 1.414 22.27 22.27"/>
+                    </g>
+                </svg>
+            </a>
+
+            <div class="w-full">
+
+                <h2 class="text-6xl uppercase">Filtres</h2>
+
+                {{-- Filter Options --}}
+                <div class="flex mt-15">
+                    {{-- Media Type Filters --}}
+                    <div class="w-1/3">
+                        <h3 class="font-medium text-4xl mb-5">Média</h3>
+                        <div class="grid grid-cols-1 gap-5">
+                            @foreach($media_types as $media_type_id => $media_type)
+                                <div>
+                                    <button class="font-secondary font-medium
+                                                   py-2.5 px-5 rounded-full border
+                                                   hover:bg-white hover:text-black">
+                                        {{ $media_type }}
+                                    </button>
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+
+                    {{-- Theme Filters --}}
+                    <div class="w-2/3">
+                        <h3 class="font-medium text-4xl mb-5">Thème</h3>
+                        <div class="grid grid-cols-2 gap-5">
+                            @foreach($themes as $theme_id => $theme)
+                                <div>
+                                    <button class="font-secondary font-medium
+                                                   py-2.5 px-5 rounded-full border whitespace-nowrap
+                                                   hover:bg-white hover:text-black">
+                                        {{ $theme }}
+                                    </button>
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="text-right mt-20">
+                    <button @click="filtersOpen = false"
+                        class="bg-blue-dark
+                               font-medium
+                               py-3 px-8 rounded-full">
+                        Valider
+                    </button>
+                </div>
+
+            </div>
+
 
+        </div>
     </div>
 
 @endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index bd7d457..868f39f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -65,12 +65,17 @@
                 flex items-center
                 bg-blue text-white
                 px-30
-                z-10"
+                z-10
+                transition ease-out-cubic duration-500"
          x-show="menuOpen"
-         x-transition.opacity.duration.500ms
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         {{--x-transition:leave="delay-1000"--}}
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
          x-cloak>
 
-        <ul class="w-full font-medium text-6xl space-y-8">
+        <ul class="w-full font-medium text-6xl">
             @php
                 $menu_links = [
                     '/' => 'Accueil',
@@ -82,22 +87,36 @@
             @endphp
 
             @foreach ($menu_links as $link => $text)
-                <li x-show="menuOpen"
-                    style="transition-delay: {{ 300 + (200 * $loop->iteration) }}ms"
-                    x-transition:enter="transition transform ease-out duration-1000"
-                    x-transition:enter-start="opacity-0 translate-x-[-100px]"
-                    x-transition:enter-end="opacity-100 translate-x-0">
-                    <x-link class="inline-block text-current transition-transform transform duration-200 hover:scale-105"
-                            href="{{ $link }}">
-                        {{ $text }}
-                    </x-link>
+                {{-- Overflow is hidden for text entrance animation. --}}
+                {{-- Extra padding and negative margin added so hover scale effect isn't clipped --}}
+                <li class="overflow-hidden pl-4 -ml-4">
+                    <div x-show="menuOpen"
+                         class="py-8
+                                transition transform ease-out-quint"
+                         style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
+                         x-transition:enter="duration-1000"
+                         x-transition:enter-start="translate-y-[100px]"
+                         x-transition:enter-end="translate-x-0"
+                         {{--x-transition:leave="duration-500"
+                         x-transition:leave-start="translate-x-0"
+                         x-transition:leave-end="translate-y-[100px]"--}}>
+                        <x-link class="inline-block text-current transition-transform transform duration-200 hover:scale-105"
+                                href="{{ $link }}">
+                            {{ $text }}
+                        </x-link>
+                    </div>
                 </li>
-                <li class="bg-blue-dark h-px"
+                <li class="bg-blue-dark h-px
+                           transform origin-left
+                           transition ease-out-quint"
                     x-show="menuOpen"
-                    style="transition-delay: {{ 600 + (200 * $loop->iteration) }}ms; transition-duration: 1700ms;"
-                    x-transition:enter="transition transform origin-left ease-in-out"
-                    x-transition:enter-start="opacity-0 scale-x-0"
-                    x-transition:enter-end="opacity-100 scale-x-100">
+                    style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
+                    x-transition:enter="duration-2000"
+                    x-transition:enter-start="scale-x-0"
+                    x-transition:enter-end="scale-x-100"
+                    {{--x-transition:leave="duration-1000"
+                    x-transition:leave-start="scale-x-100"
+                    x-transition:leave-end="scale-x-0"--}}>
                 </li>
             @endforeach
         </ul>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5f19ae7..22a9416 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,13 @@ module.exports = {
         '15': '3.75rem', // 60px
         '22': '5.5rem', // 88px
         '30': '7.5rem', // 120px
+      },
+      transitionTimingFunction: {
+        'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
+        'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)',
+      },
+      transitionDuration: {
+        '2000': '2000ms',
       }
     },
     fontFamily: {
-- 
2.39.5