From: Stephen Cameron Date: Thu, 16 Dec 2021 20:35:12 +0000 (+0100) Subject: Wait #4781 @26 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1572960852feaca5f75abf61bc450b7e185a5e27;p=odl.git Wait #4781 @26 --- diff --git a/resources/css/app.css b/resources/css/app.css index d12f1b7..61c266b 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,6 +1,7 @@ @import "tailwindcss/base"; @import 'common/fonts.css'; -@import 'common/menu.css'; +@import 'common/animations.css'; +@import 'common/overlays.css'; @import 'common/plyr.css'; @import 'common/global.css'; diff --git a/resources/css/common/animations.css b/resources/css/common/animations.css new file mode 100644 index 0000000..9de2f1c --- /dev/null +++ b/resources/css/common/animations.css @@ -0,0 +1,59 @@ +/* Common values */ +.animate { + animation-duration: var(--animation-duration, 0.5s); + animation-delay: var(--animation-delay, 0s); + animation-fill-mode: var(--animation-fill-mode, both); +} + +/*============================================================*/ + +.animate-in-up { + @apply ease-out-quint; + animation-name: animate-in-up; + transform: translateY(var(--start-translate-y, 100%)); +} + +@keyframes animate-in-up { + 0% { + transform: translateY(var(--start-translate-y, 100%)); + } + 100% { + transform: translateY(var(--end-translate-y, 0)); + } +} + +/*============================================================*/ + +.animate-scale-x { + @apply ease-out-quart; + animation-name: animate-scale-x; + transform: scaleX(var(--start-scale-x, 0)); +} + +@keyframes animate-scale-x { + 0% { + transform: scaleX(var(--start-scale-x, 0)); + } + 100% { + transform: scaleX(var(--start-scale-x, 1)); + } +} + +/*============================================================*/ + +.animate-fade-in { + @apply ease-out-quart; + animation-name: animate-fade-in; + opacity: 0; +} + +@keyframes animate-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/*============================================================*/ diff --git a/resources/css/common/global.css b/resources/css/common/global.css index 21e8a5d..ef72455 100644 --- a/resources/css/common/global.css +++ b/resources/css/common/global.css @@ -2,6 +2,11 @@ html, body { min-height: 100%; } +body.overlay-open { + /* Prevent scrollbars and scrolling when overlays are open */ + overflow: hidden; +} + b, strong { @apply font-semibold; } diff --git a/resources/css/common/menu.css b/resources/css/common/menu.css deleted file mode 100644 index aa9d510..0000000 --- a/resources/css/common/menu.css +++ /dev/null @@ -1,16 +0,0 @@ -body.menu-open { - /* Prevent scrollbars and scrolling when menu is open */ - max-height: 100vh; - overflow: hidden; -} - -.menu-open .site-header { - /* Header becomes fixed so that all elements are positioned at top, regardless of scroll position */ - @apply text-white; - position: fixed; - width: calc(100% - 4rem); /* Full width minus 2rem padding on each side */ -} - -.menu-open .header-logo { - @apply text-white; -} diff --git a/resources/css/common/overlays.css b/resources/css/common/overlays.css new file mode 100644 index 0000000..bbd93f3 --- /dev/null +++ b/resources/css/common/overlays.css @@ -0,0 +1,6 @@ +.overlay { + @apply fixed top-0 left-0 w-screen h-screen; + @apply flex flex-col items-center justify-center; + @apply px-30; + @apply transition ease-out-cubic duration-500; +} diff --git a/resources/js/media-library.js b/resources/js/media-library.js index 0397ee3..313442e 100644 --- a/resources/js/media-library.js +++ b/resources/js/media-library.js @@ -4,7 +4,6 @@ export default (options = {}) => ({ filters: options.filters || {}, // Filters JSON array is passed in from HTML - filtersOpen: false, // Visibility of the filters overlay activeTypeFilters: [], activeThemeFilters: [], isotope: {}, // Holds the Isotope instance @@ -13,7 +12,6 @@ export default (options = {}) => ({ percentPosition: true, }, - playerOpen: false, // Visibility of the media player overlay player: {}, // Holds the Plyr instance playerOptions: { // Settings used for Plyr instantiation (https://github.com/sampotts/plyr#options) debug: false, @@ -65,6 +63,10 @@ export default (options = {}) => ({ // Initialise Isotope this.isotope = new Isotope(element, this.isotopeOptions); + // Entry animation: unhide grid and then tell Isotope to reveal items that were hidden during init + element.classList.remove('opacity-0'); + this.isotope.revealItemElements(document.querySelectorAll('.media-item')); + // Update Isotope whenever active filters change this.$watch('activeTypeFilters', () => this.applyFilters()); this.$watch('activeThemeFilters', () => this.applyFilters()); diff --git a/resources/js/search.js b/resources/js/search.js index 9e1b943..1d4a06f 100644 --- a/resources/js/search.js +++ b/resources/js/search.js @@ -18,7 +18,7 @@ export default (searchData = []) => ({ init() { this.miniSearch = new MiniSearch(this.setup); - this.miniSearch.addAll(searchData); + this.miniSearch.addAllAsync(searchData); // Load asynchronously for better performance }, get results() { diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php new file mode 100644 index 0000000..a377f5a --- /dev/null +++ b/resources/views/components/header.blade.php @@ -0,0 +1,75 @@ +@props([ + 'main' => false, + 'class' => '', +]) + + +
+ + {{-- LEFT SIDE --}} + {{-- Menu Toggle --}} + + + {{-- Burger Menu Icon --}} + + + + + + + + + {{-- Close Icon --}} + {{-- This icon is given the same width and height as the burger icon so it aligns properly (paths will be centred in the canvas) --}} + + + + + + + + Menu + + + {{-- CENTRE --}} +
+ @if (isset($center)) + {{ $center }} + @else + {{-- VEOLIA Logo --}} + + @endif +
+ + {{-- RIGHT SIDE --}} +
+ @if (isset($right)) + {{ $right }} + @else + {{-- Search Icon --}} + {{-- Main header icon is hidden when overlay opens because it shifts position --}} + {{-- when body scrolling is disabled (due to being position: fixed) --}} + + + + + + + + Recherche + + @endif +
+ +
diff --git a/resources/views/components/media-library/filter-interface.blade.php b/resources/views/components/media-library/filter-interface.blade.php index eb6bb4f..2522931 100644 --- a/resources/views/components/media-library/filter-interface.blade.php +++ b/resources/views/components/media-library/filter-interface.blade.php @@ -2,22 +2,21 @@ @aware(['types', 'themes']) -
{{-- Close --}} - +
+ +
diff --git a/resources/views/components/media-library/filter-list.blade.php b/resources/views/components/media-library/filter-list.blade.php index 9d20d45..9fdcd02 100644 --- a/resources/views/components/media-library/filter-list.blade.php +++ b/resources/views/components/media-library/filter-list.blade.php @@ -1,14 +1,16 @@ {{-- FILTERS --}} -
+
{{-- FILTER INTERFACE BUTTON --}} + bg-black hover:bg-blue + mt-2 {{-- Margin top added here so layout doesn't shift when last filter is removed --}} + border border-black hover:border-blue {{-- Needs border so it matches the height of filter buttons --}} + text-white font-secondary font-medium leading-none + animate animate-fade-in" + style="--animation-duration: 0.5s; --animation-delay: 0.5s;"> Filtrer diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php index 72e188a..820e27f 100644 --- a/resources/views/components/media-library/index.blade.php +++ b/resources/views/components/media-library/index.blade.php @@ -27,9 +27,13 @@ {{-- MEDIA LIBRARY GRID --}} {{-- Negative margins applied here to offset margins used in Isotope grid --}} -
+
@foreach ($media as $item) -
diff --git a/resources/views/components/media-library/player-icons.blade.php b/resources/views/components/media-library/player-icons.blade.php index 089a0c9..ce4682b 100644 --- a/resources/views/components/media-library/player-icons.blade.php +++ b/resources/views/components/media-library/player-icons.blade.php @@ -1,6 +1,6 @@ {{-- Plyr custom icon SVG sprite --}} - +
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php index 0d7eafd..4a5aab3 100644 --- a/resources/views/components/search.blade.php +++ b/resources/views/components/search.blade.php @@ -4,48 +4,75 @@ @endpush -
- + + +
+ +
+ + + {{-- Search Field --}}
-

Tapez ici le ou les mots-clé de votre recherche

- - +
+

+ Tapez ici le ou les mots-clé de votre recherche +

+
+ +
+ +
+
{{-- Search Results --}} -
+

diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php index 0eb1813..53c154c 100644 --- a/resources/views/front/home.blade.php +++ b/resources/views/front/home.blade.php @@ -31,7 +31,9 @@ ]; @endphp -
+
{{-- Main home content --}}
@if($logo) Logo + x-show="shown" x-transition.opacity.scale.80.origin.bottom.duration.800ms> @endif @if($subtitle)

+ x-show="shown" x-transition.opacity.scale.80.origin.bottom.duration.500ms.delay.100ms> {{ $subtitle }}

@endif @if($button) + x-show="shown" x-transition.opacity.scale.80.origin.bottom.duration.500ms.delay.100ms> {{ $button }} @endif @@ -64,7 +66,7 @@ bg-contain bg-center bg-no-repeat transform transition duration-300" x-show="shown" - x-transition.opacity.scale.50.duration.1000ms.delay.300ms + x-transition.opacity.scale.50.duration.1000ms.delay.100ms style="@if($illustration)background-image:url({{ $illustration }})@endif">
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php index 608692d..fc9f8be 100644 --- a/resources/views/front/media-library.blade.php +++ b/resources/views/front/media-library.blade.php @@ -6,6 +6,7 @@ // TEMPORARY DATA MOCKUP $media = [ [ + 'id' => 123, 'title' => "Qu’est ce que la gouvernance ?", 'type' => 'video', 'duration' => '78', @@ -19,6 +20,7 @@ ], ], [ + 'id' => 545, 'title' => 'Les outils de communication', 'type' => 'video', 'duration' => '192', @@ -32,6 +34,7 @@ ], ], [ + 'id' => 785, 'title' => "Une organisation à plusieurs niveaux", 'type' => 'audio', 'duration' => '144', @@ -45,6 +48,7 @@ ], ], [ + 'id' => 65, 'title' => 'Système d’information', 'type' => 'audio', 'duration' => '987', @@ -58,6 +62,7 @@ ], ], [ + 'id' => 146, 'title' => "Qu’est ce que la gouvernance ?", 'type' => 'video', 'duration' => '614', @@ -71,6 +76,7 @@ ], ], [ + 'id' => 370, 'title' => 'Les outils de communication', 'type' => 'audio', 'duration' => '45', @@ -102,7 +108,12 @@ ]; @endphp -

Médiathèque

+
{{-- vertical padding so accents don't get cropped --}} +

+ Médiathèque +

+
{{-- Media library (components/media-library/index.blade.php) --}} diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php index 8c15a4d..d83a2ca 100644 --- a/resources/views/front/resources.blade.php +++ b/resources/views/front/resources.blade.php @@ -1,26 +1,43 @@ @extends('layouts.app') -@section('content') - - @php +@push('extra_body_classes') + overflow-y-scroll {{-- We already know this will be a long page so this avoids the header jumping on load --}} +@endpush - @endphp +@section('content') {{-- RESOURCES --}}
@@ -51,8 +68,9 @@ {{-- DOCUMENTS --}}
@foreach($resources['documents'] as $doc) - -
+ {{----}} + +
{{ $doc['document_title'] }} {{-- {{ $doc['document_title'] }}--}}
@@ -92,7 +110,8 @@ {{-- MEMOS --}}
@foreach ($subchapter['subchapter_memos'] as $memo) - + {{----}} +
{{-- PDF Viewer Overlay --}} -
{{-- PDF Viewer iframe --}} + + +
+ +
+ +
- {{-- Close button sits outside overlay so it can sit above and cover header search button --}} - {{-- TODO: Rework this so it's less awkward when the main menu is opened on top of the PDF viewer --}} - {{-- TODO: instead of using the same main element, consider having a header widget that can be used to redisplay header inside overlays (with option to disable / replace items via slots --}} - - -
@endsection diff --git a/resources/views/front/splash.blade.php b/resources/views/front/splash.blade.php index 41681d1..6c91bd4 100644 --- a/resources/views/front/splash.blade.php +++ b/resources/views/front/splash.blade.php @@ -1,5 +1,10 @@ @extends('layouts.base') +@section('body_tag') + {{-- Make sure no scrollbars are present because they affect the background scaling --}} + +@endsection + @section('main') {{-- Title + Illustration --}} @@ -28,6 +33,7 @@ diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 1fedc85..bfe7eeb 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,99 +1,88 @@ @extends('layouts.base') +@push('before_scripts') + +@endpush + @section('body_tag') - + @endsection @section('main') - -
- {{-- Menu Toggle --}} - - - {{-- Burger Menu Icon --}} - - - - - - - - - {{-- Close Icon --}} - {{-- This icon is given the same width and height as the burger icon so it aligns properly (paths will be centred in the canvas) --}} - - - - - - - - Menu - - - {{-- VEOLIA Logo --}} - - - - {{-- Search Icon --}} - - - - - - - - Recherche - -
- - {{-- Header spacer: same height as the header in the normal flow --}} - {{-- This is needed because the header switches to position:fixed when menu is open and therefore no longer --}} - {{-- takes any space in the document flow. This spacer is the replacement and prevents content from shifting. --}} -
- -
- @yield('content') + {{-- + Content has constrained width so that nothing shifts when overlay is opened and scrolling is disabled. + The body width changes when scrollbars are removed, which causes alignment problems, especially with + fixed-position elements. + --}} +
+ + +
+ @yield('content') +
{{-- MENU OVERLAY --}} -
+ +
    @php $menu_links = [ @@ -110,17 +99,22 @@ {{-- Extra padding and negative margin added so hover scale effect isn't clipped --}}
  • - + x-transition:leave-end="translate-y-[100px]"> + {{ $text }}
    @@ -133,9 +127,9 @@ 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="duration-500" x-transition:leave-start="scale-x-100" - x-transition:leave-end="scale-x-0"--}}> + x-transition:leave-end="scale-x-0">
    • @endforeach
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 427888a..de6567d 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -9,7 +9,7 @@ {{ config('app.name') }} @section('body_tag') - + @show @yield('main') diff --git a/tailwind.config.js b/tailwind.config.js index 447d400..60feaf4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,9 +36,11 @@ module.exports = { }, transitionTimingFunction: { 'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)', + 'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)', 'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)', }, transitionDuration: { + '1500': '1500ms', '2000': '2000ms', }, zIndex: {