From 66ad34d7c760b99683d6d006e2045cb0427a8f78 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 13 Jan 2021 21:46:08 +0100 Subject: [PATCH] WIP #4064 @12 --- .../cube/src/Elementor/Widgets/ImageMap.php | 30 +++++--- .../cube/src/Elementor/Widgets/TeamGrid.php | 10 +++ web/app/themes/Usines/package.json | 1 + .../resources/assets/scripts/image-map.js | 11 +++ .../assets/styles/common/global.styl | 5 ++ .../assets/styles/components/forms.styl | 72 +++++++++---------- .../assets/styles/widgets/image-map.styl | 11 +++ .../assets/styles/widgets/image.styl | 9 +++ .../assets/styles/widgets/team-grid.styl | 57 +++++++++++++++ .../resources/views/partials/footer.blade.php | 2 +- .../views/widgets/team-grid.blade.php | 56 ++++++++++++--- web/app/themes/Usines/tailwind.config.js | 11 ++- web/app/themes/Usines/webpack.mix.js | 4 ++ web/app/themes/Usines/yarn.lock | 5 ++ 14 files changed, 225 insertions(+), 59 deletions(-) create mode 100644 web/app/themes/Usines/resources/assets/scripts/image-map.js create mode 100644 web/app/themes/Usines/resources/assets/styles/widgets/image-map.styl create mode 100644 web/app/themes/Usines/resources/assets/styles/widgets/image.styl create mode 100644 web/app/themes/Usines/resources/assets/styles/widgets/team-grid.styl diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php index f82dfba..8a7dbe9 100644 --- a/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php +++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/ImageMap.php @@ -5,13 +5,14 @@ namespace Cube\Elementor\Widgets; use Elementor\Controls_Manager; use Elementor\Utils; +use function Roots\asset; class ImageMap extends _Base { // Which versions should be handled? protected $versions = [ 'desktop', - //'mobile', // TODO: mobile version! + 'mobile', ]; // Widget name / ID @@ -38,7 +39,16 @@ class ImageMap extends _Base { * @return array Widget scripts dependencies. */ public function get_script_depends() { - return []; + + wp_register_script( + 'cube-image-map', + asset('scripts/image-map.js'), + ['jquery'], // Dependencies + null, // Version + true // In footer? + ); + + return ['cube-image-map']; } /** @@ -61,8 +71,7 @@ class ImageMap extends _Base { 'reminder', [ 'type' => Controls_Manager::RAW_HTML, - 'raw' => 'Pour générer le HTML, utilisez cet outil', - // TODO: consider modifying Weebly Image Map generator so it generates code like Zaneray. Or just use Weebly version with jQuery plugin? + 'raw' => 'Pour générer le HTML, utilisez cet outil', ] ); @@ -82,9 +91,11 @@ class ImageMap extends _Base { $this->add_control( "html_$version", [ - 'label' => "HTML ($version)", + 'label' => "HTML ($version)
Enter 
<area>
tags only", + 'label_block' => true, 'type' => Controls_Manager::CODE, 'default' => '', + 'divider' => true, ] ); @@ -106,14 +117,17 @@ class ImageMap extends _Base { $res = ''; foreach($this->versions as $version) { + $map_ID = "map_{$version}_" . $this->get_id(); $image = $this->get_settings("image_{$version}"); $image_meta = wp_get_attachment_metadata($image['id']); $max_width = isset($image_meta['width']) ? $image_meta['width'] . 'px' : 'none'; // Container must not be wider than image - $html = $this->get_settings("html_{$version}"); + $map_html = $this->get_settings("html_{$version}"); $res .= '
'; - $res .= ''; - $res .= $html; + $res .= ''; + $res .= ''; + $res .= $map_html; + $res .= ''; $res .= '
'; } diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php index 4bbad70..1907796 100644 --- a/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php +++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/TeamGrid.php @@ -86,6 +86,16 @@ class TeamGrid extends _Base { ] ); + $repeater->add_control( + 'email', + [ + 'label' => __('Adresse e-mail', 'cube'), + 'title_block' => false, + 'type' => Controls_Manager::TEXT, + 'default' => '' + ] + ); + $repeater->add_control( 'details', [ diff --git a/web/app/themes/Usines/package.json b/web/app/themes/Usines/package.json index 8207959..89a6c2e 100644 --- a/web/app/themes/Usines/package.json +++ b/web/app/themes/Usines/package.json @@ -37,6 +37,7 @@ "cross-env": "^7.0.2", "eslint": "^7.7.0", "eslint-plugin-import": "^2.22.0", + "image-map": "^2.0.1", "laravel-mix": "^5.0.4", "laravel-mix-copy-watched": "^2.2.4", "laravel-mix-purgecss": "^5.0.0", diff --git a/web/app/themes/Usines/resources/assets/scripts/image-map.js b/web/app/themes/Usines/resources/assets/scripts/image-map.js new file mode 100644 index 0000000..f1dad96 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/scripts/image-map.js @@ -0,0 +1,11 @@ +import ImageMap from "image-map"; + +// ELEMENTOR Trigger +(function($) { + $(window).on('elementor/frontend/init', function () { + elementorFrontend.hooks.addAction('frontend/element_ready/cube-image-map.default', function ($scope) { + // Call Image Map Resizer (https://github.com/clarketm/image-map) + ImageMap('img[usemap]'); + }); + }); +})(jQuery); diff --git a/web/app/themes/Usines/resources/assets/styles/common/global.styl b/web/app/themes/Usines/resources/assets/styles/common/global.styl index 89da7be..865e544 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/global.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/global.styl @@ -1,6 +1,11 @@ html font-size: $font-size-base // Base used for REM calculations + +below(1000px) + font-size: 15px + +below(800px) + font-size: 14px + body min-width: 320px diff --git a/web/app/themes/Usines/resources/assets/styles/components/forms.styl b/web/app/themes/Usines/resources/assets/styles/components/forms.styl index 6291662..4395785 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/forms.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/forms.styl @@ -1,41 +1,39 @@ -input, textarea - &::-webkit-input-placeholder /* Chrome/Opera/Safari */ - @apply text-dark - &::-moz-placeholder /* Firefox 19+ */ - @apply text-dark - &:-ms-input-placeholder /* IE 10+ */ - @apply text-dark - &:-moz-placeholder /* Firefox 18- */ - @apply text-dark - -input, textarea, select - @apply bg-white w-full px-6 py-2 rounded-md - border: none - outline: none - -input[type="text"], input[type="email"], input[type="number"], select - appearance: none - -input[type="submit"] - width: auto - -select - background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%233b3b3b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") 98% center no-repeat - background-size: 0.8em auto - -textarea - min-height: 12rem - padding: 1em - -//================================ - .form-wrapper > * + * margin-top: 1.5rem -.form-row - display: grid - constrain(grid-column-gap, 2vw) - // Automatic columns based on number of child elements - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) - grid-row-gap: 1.5rem // When wrapping columns (to match vertical gap between other rows) + .form-row + display: grid + constrain(grid-column-gap, 2vw) + // Automatic columns based on number of child elements + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) + grid-row-gap: 1.5rem // When wrapping columns (to match vertical gap between other rows) + + input, textarea + &::-webkit-input-placeholder /* Chrome/Opera/Safari */ + @apply text-dark + &::-moz-placeholder /* Firefox 19+ */ + @apply text-dark + &:-ms-input-placeholder /* IE 10+ */ + @apply text-dark + &:-moz-placeholder /* Firefox 18- */ + @apply text-dark + + input, textarea, select + @apply bg-white w-full px-6 py-2 rounded-md + border: none + outline: none + + input[type="text"], input[type="email"], input[type="number"], select + appearance: none + + input[type="submit"] + width: auto + + select + background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%233b3b3b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") 98% center no-repeat + background-size: 0.8em auto + + textarea + min-height: 12rem + padding: 1em diff --git a/web/app/themes/Usines/resources/assets/styles/widgets/image-map.styl b/web/app/themes/Usines/resources/assets/styles/widgets/image-map.styl new file mode 100644 index 0000000..60c447d --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/widgets/image-map.styl @@ -0,0 +1,11 @@ +$breakpoint-image-map = 900px + +.cube-image-map + &-mobile + display: none // Hidden by default + + +below($breakpoint-image-map) + &-desktop + display: none + &-mobile + display: block diff --git a/web/app/themes/Usines/resources/assets/styles/widgets/image.styl b/web/app/themes/Usines/resources/assets/styles/widgets/image.styl new file mode 100644 index 0000000..ac59228 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/widgets/image.styl @@ -0,0 +1,9 @@ +// Override default Elementor styles that interfere with image sizing when links are applied +.elementor-widget-image + .elementor-image + & >, figure > + a + display: block + + img[src$=".svg"] + width: auto diff --git a/web/app/themes/Usines/resources/assets/styles/widgets/team-grid.styl b/web/app/themes/Usines/resources/assets/styles/widgets/team-grid.styl new file mode 100644 index 0000000..5ee8453 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/widgets/team-grid.styl @@ -0,0 +1,57 @@ +$breakpoint-team-grid = 800px + +.team-grid + display: grid + grid-template-columns: repeat(3, 1fr) + grid-column-gap: 2rem + vertical-spacing(2.5vw) // Offset the negative margins inside the grid + + // Due to the absolutely positioned text blocks under the images, the text + // in the last row of the grid is in danger of overlapping with the content + // below it, so for these awkward sizes, we add some extra margin to cover it. + +between($breakpoint-team-grid, 1600px) + margin-bottom: 5rem // ~5 lines of extra space + + +below($breakpoint-team-grid) + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) // Will auto-wrap to 1 column when there's not enough space + grid-gap: 2.5vw + padding: 0 + + &-person + grid-column-start: unset !important + margin: 0 !important + + // Centre content (relevant when in 1 column mode but column width is larger than max-width of contents) + > * + @apply mx-auto + + &-details + @apply mb-6 + position: initial !important + + + // The 3 column grid has a repeating pattern of one row with a single centred item (in column 2) + // then a row with two items, separated in columns 1 and 3: + // _ X _ + // X _ X + &-person + // Middle column (items 1, 4, 7, 10 etc) + &:nth-of-type(3n + 1) + grid-column-start: 2 + vertical-spacing(-2.5vw, margin) // Use negative vertical margins in the centre column to create overlaps + + // When there's extra space, central column content should be centred + > * + @apply mx-auto + + // Left column (items 2, 5, 8 etc) + &:nth-of-type(3n + 2) + grid-column-start: 1 + + // Right column (items 3, 6, 9 etc) + &:nth-of-type(3n + 3) + grid-column-start: 3 + + // When there's extra space, right column content should right-aligned + > * + @apply ml-auto diff --git a/web/app/themes/Usines/resources/views/partials/footer.blade.php b/web/app/themes/Usines/resources/views/partials/footer.blade.php index 9226bb1..21ac9ce 100644 --- a/web/app/themes/Usines/resources/views/partials/footer.blade.php +++ b/web/app/themes/Usines/resources/views/partials/footer.blade.php @@ -58,7 +58,7 @@

Des promos & des news !

-

Inscrivez-vous à notre newsletter

+

Inscrivez-vous à notre newsletter

{{-- TODO: add HTMLForms shortcode here? --}} diff --git a/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php b/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php index e2ecf26..a1936f3 100644 --- a/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php +++ b/web/app/themes/Usines/resources/views/widgets/team-grid.blade.php @@ -1,28 +1,62 @@ {{-- TEAM GRID --}}
-
- @foreach ($team as $person) -
-
+ @foreach ($team as $person) +
+ + {{-- Content Wrapper --}} +
+ + {{-- Photo wrapper --}} +
{{-- Proportional sizer to make a responsive square --}}
- @php($photo_classes = 'absolute top-0 left-0 w-full h-full') + @php + $photo_classes = 'absolute inset-0 bg-light bg-cover' + @endphp {{-- Main photo --}} -
- {{-- Hover photo --}} +
+ + {{-- Hover photo + details --}} + @if ($person['email']) + + @php + // Encode e-mail address to give it some protection from bots + // NOTE: this isn't working because the final output always seems + // to be converted by some intermediate process (WP / Blade?) + /* + $mail_link = "mailto:{$person['email']}"; + $encoded_link = ''; + + for ($i = 0; $i < strlen($mail_link); $i++) { + $encoded_link .= '&#' . ord($mail_link[$i]) . ';'; + } + */ + @endphp + +
+ + @svg('images/icons/email', 'fill-current inline-block align-top w-5 mr-2') + Envoyer un email + +
+ @endif +
+
-
+ + {{-- Text needs to be absolutely positioned so it doesn't interfere with the grid layout --}} +
{{ $person['first_name'] }} {{ strtoupper($person['last_name']) }}
{{ $person['role'] }}
- {{ $person['details'] }} + {!! nl2br($person['details']) !!}
- @endforeach -
+
+ @endforeach
diff --git a/web/app/themes/Usines/tailwind.config.js b/web/app/themes/Usines/tailwind.config.js index 2a541e9..c6cecae 100644 --- a/web/app/themes/Usines/tailwind.config.js +++ b/web/app/themes/Usines/tailwind.config.js @@ -51,10 +51,17 @@ module.exports = { margin: { '0!': '0 !important', }, + top: { + '100%': '100%', + }, }, }, - variants: {}, + variants: { + extend: { + display: ['group-hover'], + }, + }, plugins: [ wordpressUtilities, @@ -78,7 +85,7 @@ module.exports = { ].concat( require('purgecss-with-wordpress').whitelist, require('purgecss-with-wordpress').whitelistPatterns - ) + ), }, }, }; diff --git a/web/app/themes/Usines/webpack.mix.js b/web/app/themes/Usines/webpack.mix.js index e98b42d..736b33d 100644 --- a/web/app/themes/Usines/webpack.mix.js +++ b/web/app/themes/Usines/webpack.mix.js @@ -19,6 +19,9 @@ require('mix-tailwindcss'); mix.setPublicPath('./dist'); +// Public path helper +const publicPath = path => `${mix.config.publicPath}/${path}`; + mix.browserSync({ proxy: proxyURL, host: proxyURL, // Allows browsersync to work on main URL instead of localhost @@ -38,6 +41,7 @@ mix.stylus('resources/assets/styles/admin.styl', 'styles'); mix .js('resources/assets/scripts/app.js', 'scripts') .js('resources/assets/scripts/intro-carousel.js', 'scripts') + .js('resources/assets/scripts/image-map.js', 'scripts') .js('resources/assets/scripts/customizer.js', 'scripts') .blocks('resources/assets/scripts/editor.js', 'scripts') .extract(); diff --git a/web/app/themes/Usines/yarn.lock b/web/app/themes/Usines/yarn.lock index a7546a8..a44c4c1 100644 --- a/web/app/themes/Usines/yarn.lock +++ b/web/app/themes/Usines/yarn.lock @@ -5470,6 +5470,11 @@ ignore@^5.1.8: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== +image-map@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/image-map/-/image-map-2.0.1.tgz#d9e87184cd944b263135d9f2e8dec5a75a8a5c7a" + integrity sha512-6SVn3CK7n4wtaWqW3vRSFvKKyQpChr7ADECmLTS9WsD4mTivkRgZ8OqfUBsg7bo5hm81oiO02aAyZ1dNu20xXQ== + imagemin@^6.0.0: version "6.1.0" resolved "https://registry.yarnpkg.com/imagemin/-/imagemin-6.1.0.tgz#62508b465728fea36c03cdc07d915fe2d8cf9e13" -- 2.39.5