From 331c762d77978c53949ca584819a6f7c9b93bff7 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 26 Oct 2021 20:44:22 +0200 Subject: [PATCH] WIP #4781 @7 --- package-lock.json | 49 +++++++++++++++++++++ package.json | 1 + resources/css/app.css | 52 ++-------------------- resources/css/{ => common}/fonts.css | 24 +++++----- resources/css/common/global.css | 23 ++++++++++ resources/css/common/menu.css | 7 +++ resources/css/common/utilities.css | 29 +++++++++++++ resources/js/bootstrap.js | 6 +++ resources/views/components/link.blade.php | 11 +++++ resources/views/front/home.blade.php | 14 +++--- resources/views/layouts/app.blade.php | 53 +++++++++++++++++++---- tailwind.config.js | 1 + 12 files changed, 194 insertions(+), 76 deletions(-) rename resources/css/{ => common}/fonts.css (53%) create mode 100644 resources/css/common/global.css create mode 100644 resources/css/common/menu.css create mode 100644 resources/css/common/utilities.css create mode 100644 resources/views/components/link.blade.php diff --git a/package-lock.json b/package-lock.json index 79cccd9..b92bef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "devDependencies": { + "alpinejs": "^3.4.2", "autoprefixer": "^10.3.7", "axios": "^0.21", "laravel-mix": "^6.0.6", @@ -1856,6 +1857,21 @@ "integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==", "dev": true }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dev": true, + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==", + "dev": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -2160,6 +2176,15 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "node_modules/alpinejs": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.4.2.tgz", + "integrity": "sha512-PCTLdySJG5ercbN/g4sO+Nyo0TjzV3IP5W9L3UiSj3756VZPUctNiikLAoKX5al2NlLE2O7jPpgtakuRpLLeIQ==", + "dev": true, + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -10927,6 +10952,21 @@ "integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==", "dev": true }, + "@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dev": true, + "requires": { + "@vue/shared": "3.1.5" + } + }, + "@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==", + "dev": true + }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -11191,6 +11231,15 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "alpinejs": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.4.2.tgz", + "integrity": "sha512-PCTLdySJG5ercbN/g4sO+Nyo0TjzV3IP5W9L3UiSj3756VZPUctNiikLAoKX5al2NlLE2O7jPpgtakuRpLLeIQ==", + "dev": true, + "requires": { + "@vue/reactivity": "~3.1.1" + } + }, "ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", diff --git a/package.json b/package.json index dc1a364..df0a457 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "production": "mix --production" }, "devDependencies": { + "alpinejs": "^3.4.2", "autoprefixer": "^10.3.7", "axios": "^0.21", "laravel-mix": "^6.0.6", diff --git a/resources/css/app.css b/resources/css/app.css index 0d5bd2b..2c062a0 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,57 +1,13 @@ - @tailwind base; @tailwind components; @tailwind utilities; @layer base { - @import 'fonts.css'; - - html, body { - min-height: 100%; - } - - b, strong { - @apply font-semibold; - } - - h1, h2, h3, h4 { - @apply font-semibold; - } - - h1 { @apply text-6xl; } - h2 { @apply text-4xl; } - - .circle-arrow { - display: inline-block; - width: 3em; - height: 3em; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%230825e2'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M29.089 23.537H18'/%3E%3Cpath d='m24.555 19 4.534 4.541-4.534 4.533'/%3E%3C/g%3E%3C/svg%3E"); - } + @import 'common/fonts.css'; + @import 'common/menu.css'; + @import 'common/global.css'; } - -/* Variable font support: https://github.com/tailwindlabs/tailwindcss/discussions/3225 */ @layer utilities { - .font-extralight { - font-variation-settings: 'wght' 200; - } - .font-light { - font-variation-settings: 'wght' 300; - } - .font-normal { - font-variation-settings: 'wght' 400; - } - .font-medium { - font-variation-settings: 'wght' 500; - } - .font-semibold { - font-variation-settings: 'wght' 600; - } - .font-bold { - font-variation-settings: 'wght' 700; - } - - .min-h-content { - min-height: calc(100vh - 96px); /* Allow for header and padding */ - } + @import 'common/utilities.css'; } diff --git a/resources/css/fonts.css b/resources/css/common/fonts.css similarity index 53% rename from resources/css/fonts.css rename to resources/css/common/fonts.css index d62e891..e31a08e 100644 --- a/resources/css/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/css/common/global.css b/resources/css/common/global.css new file mode 100644 index 0000000..21e8a5d --- /dev/null +++ b/resources/css/common/global.css @@ -0,0 +1,23 @@ +html, body { + min-height: 100%; +} + +b, strong { + @apply font-semibold; +} + +h1, h2, h3, h4 { + @apply font-semibold; +} + +h1 { @apply text-6xl; } +h2 { @apply text-4xl; } + +[x-cloak] { display: none !important; } + +.circle-arrow { + display: inline-block; + width: 3em; + height: 3em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%230825e2'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M29.089 23.537H18'/%3E%3Cpath d='m24.555 19 4.534 4.541-4.534 4.533'/%3E%3C/g%3E%3C/svg%3E"); +} diff --git a/resources/css/common/menu.css b/resources/css/common/menu.css new file mode 100644 index 0000000..f63c347 --- /dev/null +++ b/resources/css/common/menu.css @@ -0,0 +1,7 @@ +.menu-open .menu-overlay { + @apply opacity-100 pointer-events-auto; +} + +.menu-open .header-logo, .menu-open .site-header { + @apply text-white; +} diff --git a/resources/css/common/utilities.css b/resources/css/common/utilities.css new file mode 100644 index 0000000..e62b3fc --- /dev/null +++ b/resources/css/common/utilities.css @@ -0,0 +1,29 @@ +/*== Utility overrides ==*/ +.min-h-content { + min-height: calc(100vh - 96px); /* Allow for header and padding */ +} + +/* Variable font support: https://github.com/tailwindlabs/tailwindcss/discussions/3225 */ +.font-extralight { + font-variation-settings: 'wght' 200; +} + +.font-light { + font-variation-settings: 'wght' 300; +} + +.font-normal { + font-variation-settings: 'wght' 400; +} + +.font-medium { + font-variation-settings: 'wght' 500; +} + +.font-semibold { + font-variation-settings: 'wght' 600; +} + +.font-bold { + font-variation-settings: 'wght' 700; +} diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index 6922577..ee2ac34 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -1,3 +1,9 @@ +// Add AlpineJS - https://alpinejs.dev/ +import Alpine from 'alpinejs'; +window.Alpine = Alpine; +Alpine.start(); + + window._ = require('lodash'); /** diff --git a/resources/views/components/link.blade.php b/resources/views/components/link.blade.php new file mode 100644 index 0000000..10a8a95 --- /dev/null +++ b/resources/views/components/link.blade.php @@ -0,0 +1,11 @@ +{{-- Standard Link --}} +@php + if (Illuminate\Support\Str::startsWith($href, '/')) { + // TODO: add adapt local URLs based on environment (whether dynamic or static HTML output) + $href = '/front' . $href; // Prefix URLs for frontend preview + } +@endphp + + + {{ $slot }} + diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php index ebd1533..e733c0e 100644 --- a/resources/views/front/home.blade.php +++ b/resources/views/front/home.blade.php @@ -19,13 +19,13 @@ 'title' => 'Médiathèque', 'content' => 'Consultez les médias audio et vidéo', 'image' => 'https://odl.paris.cubedesigners.com/storage/105/groupe-211-at-2x.png', - 'link' => '#', + 'link' => '/mediatheque', ], [ 'title' => 'Visite guidée', 'content' => 'Laissez-vous guider dans une lecture thématique', 'image' => 'https://odl.paris.cubedesigners.com/storage/106/groupe-221-at-2x.png', - 'link' => '#', + 'link' => '/tour', ], ]; @endphp @@ -35,13 +35,13 @@ {{-- Main home content --}}
{{-- negative margin so image shadow sits under shortcuts --}} {{-- Left Column: logo + text + CTA --}} -
+
@if($logo)Logo@endif - @if($subtitle)

{{ $subtitle }}

@endif - @if($button){{ $button }}@endif + @if($subtitle)

{{ $subtitle }}

@endif + @if($button){{ $button }}@endif
{{-- Right Column: Illustration image --}} -
+
{{-- Link blocks --}} @@ -52,7 +52,7 @@

{{ $shortcut['title'] }}

{{ $shortcut['content'] }}

- +
@endforeach diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 8d90004..0eecbe1 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -6,12 +6,12 @@ {{ config('app.name') }} - -
+ +
{{-- Burger Menu Icon --}} - - - + + + @@ -21,15 +21,15 @@ {{-- VEOLIA Logo --}} - + {{-- Search Icon --}} - - + + @@ -42,5 +42,40 @@ @yield('content') + {{-- MENU OVERLAY --}} +
+ +
    + @php + $menu_links = [ + '/' => 'Accueil', + '/fluidbook' => 'Cœur de l’offre', + '/ressources' => 'Ressources', + '/mediatheque' => 'Médiathèque', + '/tour' => 'Visite guidée', + ]; + @endphp + + @foreach ($menu_links as $link => $text) +
  • + {{ $text }} +
    • + @endforeach +
+
+ + + diff --git a/tailwind.config.js b/tailwind.config.js index 7eaf9a6..5f19ae7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { spacing: { '15': '3.75rem', // 60px '22': '5.5rem', // 88px + '30': '7.5rem', // 120px } }, fontFamily: { -- 2.39.5