From: Stephen Cameron Date: Wed, 24 Nov 2021 22:27:33 +0000 (+0100) Subject: WIP #4781 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=341380aa803e54cddfac2934217f67ea9527c1c5;p=odl.git WIP #4781 @8 --- diff --git a/package-lock.json b/package-lock.json index 696a89c..d098bf4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,12 +6,14 @@ "": { "devDependencies": { "@alpinejs/intersect": "^3.4.2", + "@tailwindcss/line-clamp": "^0.2.2", "alpinejs": "^3.4.2", "autoprefixer": "^10.3.7", "axios": "^0.21", "isotope-layout": "^3.0.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", + "minisearch": "^3.1.0", "plyr": "^3.6.9", "postcss": "^8.3.10", "postcss-import": "^14.0.2", @@ -1670,6 +1672,15 @@ "node": ">= 8" } }, + "node_modules/@tailwindcss/line-clamp": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.2.2.tgz", + "integrity": "sha512-NgA4Ds+/eCiO+6O3SooRsfJ8m7M2+QvNvHwOjBQq7FIYoWwAV4I4Wu4fjHeuO9Yi6p47ceHUKEGGEBh0ozQodg==", + "dev": true, + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -6256,6 +6267,12 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "node_modules/minisearch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-3.1.0.tgz", + "integrity": "sha512-Lm1YCI3O1BGZFm4RG0LSHCslR4DlW/idmv/QuLdBfI7toDkI8NPcFbo1673tkq4Vz3KqwfnS/6500qSJckcy6A==", + "dev": true + }, "node_modules/mkdirp": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", @@ -10884,6 +10901,13 @@ "fastq": "^1.6.0" } }, + "@tailwindcss/line-clamp": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.2.2.tgz", + "integrity": "sha512-NgA4Ds+/eCiO+6O3SooRsfJ8m7M2+QvNvHwOjBQq7FIYoWwAV4I4Wu4fjHeuO9Yi6p47ceHUKEGGEBh0ozQodg==", + "dev": true, + "requires": {} + }, "@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -14562,6 +14586,12 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "minisearch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-3.1.0.tgz", + "integrity": "sha512-Lm1YCI3O1BGZFm4RG0LSHCslR4DlW/idmv/QuLdBfI7toDkI8NPcFbo1673tkq4Vz3KqwfnS/6500qSJckcy6A==", + "dev": true + }, "mkdirp": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", diff --git a/package.json b/package.json index 939c6e9..b8c29a1 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,14 @@ }, "devDependencies": { "@alpinejs/intersect": "^3.4.2", + "@tailwindcss/line-clamp": "^0.2.2", "alpinejs": "^3.4.2", "autoprefixer": "^10.3.7", "axios": "^0.21", "isotope-layout": "^3.0.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", + "minisearch": "^3.1.0", "plyr": "^3.6.9", "postcss": "^8.3.10", "postcss-import": "^14.0.2", diff --git a/resources/css/app.css b/resources/css/app.css index 7518436..d12f1b7 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/plyr.css'; @import 'common/global.css'; @import "tailwindcss/components"; diff --git a/resources/css/common/global.css b/resources/css/common/global.css index 21e8a5d..5b8f38b 100644 --- a/resources/css/common/global.css +++ b/resources/css/common/global.css @@ -13,7 +13,7 @@ h1, h2, h3, h4 { h1 { @apply text-6xl; } h2 { @apply text-4xl; } -[x-cloak] { display: none !important; } +[x-cloak] { visibility: hidden !important; } .circle-arrow { display: inline-block; diff --git a/resources/css/common/plyr.css b/resources/css/common/plyr.css new file mode 100644 index 0000000..03a12c3 --- /dev/null +++ b/resources/css/common/plyr.css @@ -0,0 +1,16 @@ +:root { + --plyr-color-main: theme('colors.blue-dark'); + --plyr-range-fill-background: #fff; + --plyr-control-radius: 50%; + --plyr-control-spacing: 21.45px; +} + +.plyr--audio { + --plyr-range-fill-background: #000; +} + +.plyr__time { + @apply font-secondary; + font-feature-settings: "tnum"; + font-variant-numeric: tabular-nums; +} diff --git a/resources/js/alpine.js b/resources/js/alpine.js index 7df739f..74788ba 100644 --- a/resources/js/alpine.js +++ b/resources/js/alpine.js @@ -1,13 +1,16 @@ // AlpineJS setup - https://alpinejs.dev/ import Alpine from 'alpinejs'; +import intersect from '@alpinejs/intersect'; +import media_library from './media-library'; +import search from './search'; + window.Alpine = Alpine; // Plugins -import intersect from '@alpinejs/intersect'; Alpine.plugin(intersect); // Components -import media_library from './media-library'; Alpine.data('media_library', media_library); +Alpine.data('search', search); Alpine.start(); diff --git a/resources/js/media-library.js b/resources/js/media-library.js index b3f9522..acb2c8e 100644 --- a/resources/js/media-library.js +++ b/resources/js/media-library.js @@ -16,7 +16,7 @@ export default (options = {}) => ({ 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: true, + debug: false, }, /***********\ diff --git a/resources/js/search.js b/resources/js/search.js new file mode 100644 index 0000000..9e1b943 --- /dev/null +++ b/resources/js/search.js @@ -0,0 +1,43 @@ +//=======================// +// Search functionality // +//=====================// + +import MiniSearch from 'minisearch'; + +export default (searchData = []) => ({ + + miniSearch: {}, // Holds the MiniSearch instance + setup: { // MiniSearch options: https://lucaong.github.io/minisearch/#search-options + fields: ['title', 'text'], // fields to index for full-text search + storeFields: ['id', 'title', 'text', 'type', 'url', 'thumb'], // fields to return with search results + searchOptions: { + prefix: true, // Allow partial matches + }, + }, + query: '', // The search query + + init() { + this.miniSearch = new MiniSearch(this.setup); + this.miniSearch.addAll(searchData); + }, + + get results() { + if (this.query === '') { + return []; + } + + // console.log(`search results: ${this.query}`); + // console.table(this.miniSearch.search(this.query)) + + return this.miniSearch.search(this.query) + }, + + get resultCount() { + if (this.results.length === 1) { + return '1 résultat' + } + + return `${this.results.length} résultats`; + }, + +}); diff --git a/resources/views/components/link.blade.php b/resources/views/components/link.blade.php index 10a8a95..e9a130e 100644 --- a/resources/views/components/link.blade.php +++ b/resources/views/components/link.blade.php @@ -1,6 +1,8 @@ {{-- Standard Link --}} @php - if (Illuminate\Support\Str::startsWith($href, '/')) { + use Illuminate\Support\Str; + + if (!Str::startsWith($href, 'http') && !Str::startsWith($href, '/tools/')) { // TODO: add adapt local URLs based on environment (whether dynamic or static HTML output) $href = '/front' . $href; // Prefix URLs for frontend preview } diff --git a/resources/views/components/media-library/filter-interface.blade.php b/resources/views/components/media-library/filter-interface.blade.php index a719053..468842f 100644 --- a/resources/views/components/media-library/filter-interface.blade.php +++ b/resources/views/components/media-library/filter-interface.blade.php @@ -24,9 +24,9 @@

Filtres

{{-- Filter Options --}} -
+
{{-- Media Type Filters --}} -
+

Média

@foreach($types as $type_id => $type) @@ -48,7 +48,7 @@
{{-- Theme Filters --}} -
+

Thème

@foreach($themes as $theme_id => $theme) diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php index 42ef810..ba56df4 100644 --- a/resources/views/components/media-library/index.blade.php +++ b/resources/views/components/media-library/index.blade.php @@ -27,7 +27,7 @@ {{-- 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.blade.php b/resources/views/components/media-library/player.blade.php index 359f1a7..e677c06 100644 --- a/resources/views/components/media-library/player.blade.php +++ b/resources/views/components/media-library/player.blade.php @@ -83,7 +83,7 @@ {{-- Right side --}}
{{-- Time codes --}} -
00:00
+
00:00
00:00
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php new file mode 100644 index 0000000..9848cdf --- /dev/null +++ b/resources/views/components/search.blade.php @@ -0,0 +1,62 @@ +{{-- SEARCH (full screen overlay) --}} + +@push('before_scripts') + +@endpush + +
+ + + + {{-- Search Field --}} +
+

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 c8b0bea..14a84e6 100644 --- a/resources/views/front/home.blade.php +++ b/resources/views/front/home.blade.php @@ -7,6 +7,7 @@ $logo = 'https://odl.paris.cubedesigners.com/storage/102/groupe-84.svg'; $subtitle = "Découvrez le coeur de l'offre sous forme de feuilleteur interactif"; $button = "Découvrir l'offre"; + $button_link = '/tools/fluidbookpreview/'; $illustration = 'https://odl.paris.cubedesigners.com/storage/137/home-magazine.jpg'; $shortcuts = [ [ @@ -50,7 +51,7 @@ @endif @if($button) {{ $button }} @@ -70,10 +71,10 @@
{{-- Link blocks --}} -
+
@foreach($shortcuts as $shortcut) -
- +
+

{{ $shortcut['title'] }}

{{ $shortcut['content'] }}

diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php index 5ab00b1..2730ef2 100644 --- a/resources/views/front/resources.blade.php +++ b/resources/views/front/resources.blade.php @@ -114,7 +114,7 @@

{{ $subtitle }}

{{-- DOCUMENTS --}} -
+
@foreach($documents as $doc)
{{ $doc['document_title'] }} diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index c7c23ad..6d6034c 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -8,7 +8,9 @@ @stack('after_css') {{ config('app.name') }} - +
{{-- Menu Toggle --}} @@ -41,7 +43,7 @@ {{-- Search Icon --}} - + @@ -81,7 +83,7 @@ @php $menu_links = [ '/' => 'Accueil', - '/fluidbook' => 'Cœur de l’offre', + '/tools/fluidbookpreview/' => 'Cœur de l’offre', '/ressources' => 'Ressources', '/mediatheque' => 'Médiathèque', '/tour' => 'Visite guidée', @@ -124,6 +126,9 @@
+ {{-- Search Overlay --}} + + @stack('before_scripts') @stack('after_scripts') diff --git a/tailwind.config.js b/tailwind.config.js index 22a9416..c743153 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,6 +25,10 @@ module.exports = { fontSize: { '6xl': ['3.375rem', 1], // 54px, line-height: 1 }, + maxHeight: { + 'none': 'none', + '1/2': '50%', + }, spacing: { '15': '3.75rem', // 60px '22': '5.5rem', // 88px @@ -46,5 +50,7 @@ module.exports = { variants: { extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/line-clamp') + ], }