From: Stephen Cameron Date: Fri, 15 Jan 2021 23:29:40 +0000 (+0100) Subject: WIP #4064 @13.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3d864a681f1cda4052a063aa858bdf589e5574f6;p=usines-reunies.git WIP #4064 @13.5 --- diff --git a/web/app/mu-plugins/cube/src/CPT/Realisation.php b/web/app/mu-plugins/cube/src/CPT/Realisation.php index 5a6541d..66bed68 100644 --- a/web/app/mu-plugins/cube/src/CPT/Realisation.php +++ b/web/app/mu-plugins/cube/src/CPT/Realisation.php @@ -40,12 +40,13 @@ class Realisation { // Photo element ->add_fields('photo', __('Photo', 'usines'), [ - Field::make('image', 'image'), + Field::make('image', 'image')->set_required(), ])//->set_header_template('Photo: <%- image %>') // Video embed element ->add_fields('video', __('Vidéo', 'usines'), [ - Field::make('oembed', 'url', __('YouTube URL', 'usines')), + Field::make('oembed', 'url', __('YouTube URL', 'usines'))->set_required(), + Field::make('image', 'placeholder', __('Placeholder image', 'usines')), ]),//->set_header_template('Video: <%- url %>'), Field::make('textarea', 'testimonial', __('Témoignage', 'usines')), diff --git a/web/app/themes/Usines/app/View/Composers/NewsIndex.php b/web/app/themes/Usines/app/View/Composers/NewsIndex.php new file mode 100644 index 0000000..66adca9 --- /dev/null +++ b/web/app/themes/Usines/app/View/Composers/NewsIndex.php @@ -0,0 +1,113 @@ + 'absolute', + 'width' => '100%', + 'z-index' => '-1', + ]; + + /** + * Data to be passed to view before rendering. + * + * @return array + */ + public function with() + { + return [ + 'decorations' => $this->get_decorations(), + ]; + } + + /** + * Defines the SVG background elements for each post template on the index + * + * @return array + */ + public function get_decorations() + { + $bg[1] = $this->decoration('news-circle.svg', ['width' => '95.2%', 'top' => '-37.5%', 'left' => '-6.875%']) . + $this->decoration('news-plane-right.svg', ['width' => '97.7%', 'bottom' => '-25.42%', 'left' => '33.75%']); + + $bg[2] = $this->circle('#fece3b', ['width' => '96.67%', 'top' => '-48.75%', 'right' => '-10.83%']) . + $this->decoration('news-stars.svg', ['width' => '47.92%', 'bottom' => '-35%', 'left' => '-62.71%']); + + $bg[3] = $this->circle('#83d0de', ['width' => '94.17%', 'top' => '31.875%', 'left' => '39.79%']); + + $bg[4] = $this->decoration('news-circle.svg', ['width' => '95.2%', 'top' => '-19.17%', 'left' => '-34.58%']) . + $this->decoration('news-plane-left.svg', ['width' => '97.7%', 'bottom' => '-45.42%', 'left' => '-39.58%']); + + $bg[5] = $this->decoration('news-circle.svg', ['width' => '95.2%', 'top' => '10.83%', 'left' => '60.625%']); + + $bg[6] = $this->circle('#ccdc49', ['width' => '96.67%', 'top' => '17.29%', 'left' => '-63.125%']); + + + return $bg; + } + + /** + * Build the image tag for a decoration + * + * @param string $name File name in the decorations folder + * @param array $styles Array of inline CSS properties + * @return string Resulting HTML + */ + public function decoration($name, $styles = []) { + + $style = $this->build_styles(array_merge($this->decoration_styles, $styles)); + + return ''; + } + + /** + * Build a coloured SVG circle for the background + * + * @param string $color Fill colour of the circle + * @param array $styles Array of inline CSS properties + * @return string Resulting HTML + */ + public function circle($color, $styles = []) { + + $style = $this->build_styles(array_merge($this->decoration_styles, $styles)); + + $svg = ''; + $svg .= ''; + $svg .= ''; + + return $svg; + } + + /** + * @param array $styles_array Array of inline CSS properties + * @return string Inline CSS + */ + protected function build_styles($styles_array) { + $styles = array_map(function($value, $key) { + return "$key: $value"; + }, array_values($styles_array), array_keys($styles_array)); + + return implode('; ', $styles); + } + + +} diff --git a/web/app/themes/Usines/app/View/Composers/Realisation.php b/web/app/themes/Usines/app/View/Composers/Realisation.php index 90b6568..de53c8c 100644 --- a/web/app/themes/Usines/app/View/Composers/Realisation.php +++ b/web/app/themes/Usines/app/View/Composers/Realisation.php @@ -3,6 +3,8 @@ namespace App\View\Composers; use Roots\Acorn\View\Composer; +use Elementor\Embed; +use function Roots\asset; class Realisation extends Composer { @@ -28,7 +30,8 @@ class Realisation extends Composer 'category' => $this->get_category(), 'hero_image' => carbon_get_post_meta($postID, 'hero_image'), 'description' => carbon_get_post_meta($postID, 'description'), - 'gallery' => carbon_get_post_meta($postID, 'gallery'), + 'gallery' => $this->prepare_gallery($gallery = carbon_get_post_meta($postID, 'gallery')), + 'gallery_backgrounds' => $this->gallery_backgrounds(count($gallery)), 'testimonial' => carbon_get_post_meta($postID, 'testimonial'), 'testimonial_author' => carbon_get_post_meta($postID, 'testimonial_author'), ]; @@ -45,4 +48,81 @@ class Realisation extends Composer // out and return the category if it exists (ref: https://stackoverflow.com/a/8131148) return reset(get_the_terms(get_the_ID(), 'realisation_category')); } + + /** + * Prepare gallery by generating photo and video assets into the final array for display + * + * @return array + */ + public function prepare_gallery($items) + { + wp_enqueue_script('lite-youtube', asset('scripts/lite-youtube.js'), [], null, true); + + $gallery = []; + + foreach ($items as $item) { + $renderer = "gallery_{$item['_type']}"; // Function name for rendering function based on type + if (method_exists($this, $renderer)) { + $gallery[] = $this->$renderer($item); + } + } + + return $gallery; + } + + /** + * Based on the number of items in the gallery, return the SVG images to be used as backgrounds + * + * @param integer $count The number of items in the gallery + * @return string + */ + public function gallery_backgrounds($count) + { + $backgrounds = ceil((int) $count / 2); // There should be ~1/2 the number of background images as items + $res = ''; + + for ($i = 1; $i <= $backgrounds; $i++) { + + // Control offset of right / left circles + $translateAmount = ($i % 2 === 0) ? '142%' : '-40%'; + + $res .= ''; + } + + return '
'. $res .'
'; + + } + + /** + * Render photo item for the gallery + * + * @param array $data Gallery item containing photo info + * @return string + */ + protected function gallery_photo($data) + { + return wp_get_attachment_image($data['image'], 'full', false, ['class' => 'w-full']); + } + + /** + * Render video item for the gallery + * + * @param array $data Gallery item containing video info + * @return string|null + */ + protected function gallery_video($data) + { + + // Use Elementor's Embed helper to get video ID + $video = Embed::get_video_properties($data['url']); + + if ($video['provider'] !== 'youtube' || empty($video['video_id'])) return null; + + $placeholder = $data['placeholder'] ? wp_get_attachment_image_url($data['placeholder'], 'full') : ''; + + return ''; + } + } diff --git a/web/app/themes/Usines/app/filters.php b/web/app/themes/Usines/app/filters.php index 16a0679..2183f70 100644 --- a/web/app/themes/Usines/app/filters.php +++ b/web/app/themes/Usines/app/filters.php @@ -12,7 +12,7 @@ namespace App; * @return string */ add_filter('excerpt_more', function () { - return ' … ' . __('Continued', 'sage') . ''; + return '…
' . __('Lire la suite', 'usines') . '
'; }); /** diff --git a/web/app/themes/Usines/package.json b/web/app/themes/Usines/package.json index e2b0810..8d2cf6e 100644 --- a/web/app/themes/Usines/package.json +++ b/web/app/themes/Usines/package.json @@ -26,6 +26,7 @@ "translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print" }, "devDependencies": { + "@justinribeiro/lite-youtube": "^0.9.1", "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0", "@wordpress/babel-preset-default": "^4.17.0", "@wordpress/browserslist-config": "^2.7.0", diff --git a/web/app/themes/Usines/resources/assets/images/decorations/news-circle.svg b/web/app/themes/Usines/resources/assets/images/decorations/news-circle.svg new file mode 100755 index 0000000..da0d24c --- /dev/null +++ b/web/app/themes/Usines/resources/assets/images/decorations/news-circle.svg @@ -0,0 +1,154 @@ + + + + + + diff --git a/web/app/themes/Usines/resources/assets/images/decorations/news-plane-left.svg b/web/app/themes/Usines/resources/assets/images/decorations/news-plane-left.svg new file mode 100755 index 0000000..85032e2 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/images/decorations/news-plane-left.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/themes/Usines/resources/assets/images/decorations/news-plane-right.svg b/web/app/themes/Usines/resources/assets/images/decorations/news-plane-right.svg new file mode 100755 index 0000000..d09e2ae --- /dev/null +++ b/web/app/themes/Usines/resources/assets/images/decorations/news-plane-right.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/themes/Usines/resources/assets/images/decorations/news-stars.svg b/web/app/themes/Usines/resources/assets/images/decorations/news-stars.svg new file mode 100755 index 0000000..a1a413b --- /dev/null +++ b/web/app/themes/Usines/resources/assets/images/decorations/news-stars.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/themes/Usines/resources/assets/images/decorations/realisation-detail-circle.svg b/web/app/themes/Usines/resources/assets/images/decorations/realisation-detail-circle.svg new file mode 100755 index 0000000..9f5287f --- /dev/null +++ b/web/app/themes/Usines/resources/assets/images/decorations/realisation-detail-circle.svg @@ -0,0 +1,157 @@ + + + + + + diff --git a/web/app/themes/Usines/resources/assets/scripts/intro-carousel.js b/web/app/themes/Usines/resources/assets/scripts/intro-carousel.js new file mode 100644 index 0000000..70bb0cb --- /dev/null +++ b/web/app/themes/Usines/resources/assets/scripts/intro-carousel.js @@ -0,0 +1,54 @@ +// ELEMENTOR Trigger +(function($) { + $(window).on('elementor/frontend/init', function () { + elementorFrontend.hooks.addAction('frontend/element_ready/cube-intro-carousel.default', function ($scope) { + + // Inspired by: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/ + const slides = $scope.find('.intro-carousel-image'); + const slideInterval = setInterval(nextSlide, 4000); + let currentSlide = 0; + + initSlideshow(); + + function initSlideshow() { + let slideshowDots = document.createElement('ul'); + slideshowDots.className = 'intro-carousel-dots'; + + // Build dots navigation + slides.each(function (index) { + let item = document.createElement('li'); + item.setAttribute('data-slide', index); + if (index === 0) { + item.className = 'active'; + } + slideshowDots.appendChild(item); + }); + + $scope.append(slideshowDots); + + $(document).on('click', '.intro-carousel-dots li', function() { + clearInterval(slideInterval); // Stop autoplay + showSlide($(this).data('slide')); + }); + } + + function showSlide(index) { + $(slides[currentSlide]).removeClass('showing'); + $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active'); + currentSlide = (index + slides.length) % slides.length; + $(slides[currentSlide]).addClass('showing'); + $scope.find(`[data-slide="${currentSlide}"]`).addClass('active'); + } + + function nextSlide() { + showSlide(currentSlide + 1); + } + function prevSlide() { + showSlide(currentSlide - 1); + } + + + + }); + }); +})(jQuery); diff --git a/web/app/themes/Usines/resources/assets/scripts/lite-youtube.js b/web/app/themes/Usines/resources/assets/scripts/lite-youtube.js new file mode 100644 index 0000000..e422151 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/scripts/lite-youtube.js @@ -0,0 +1,318 @@ +// Forked version of https://github.com/justinribeiro/lite-youtube/ +// This version is a temporary replacement to resolve a problem with missing webp placeholder images for many videos +// YouTube handles these poorly and the fallback in the original script is useless +// See: https://github.com/justinribeiro/lite-youtube/issues/24 + +// This fork also supports setting a placeholder image manually via the attribute placeholder="" + +//=========================================================== + +/** + * + * The shadowDom / Intersection Observer version of Paul's concept: + * https://github.com/paulirish/lite-youtube-embed + * + * A lightweight YouTube embed. Still should feel the same to the user, just + * MUCH faster to initialize and paint. + * + * Thx to these as the inspiration + * https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html + * https://autoplay-youtube-player.glitch.me/ + * + * Once built it, I also found these (👍👍): + * https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube + * https://github.com/Daugilas/lazyYT https://github.com/vb/lazyframe + */ +export class LiteYTEmbed extends HTMLElement { + constructor() { + super(); + this.iframeLoaded = false; + this.setupDom(); + } + static get observedAttributes() { + return ['videoid']; + } + connectedCallback() { + this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { + once: true, + }); + this.addEventListener('click', () => this.addIframe()); + } + get videoId() { + return encodeURIComponent(this.getAttribute('videoid') || ''); + } + set videoId(id) { + this.setAttribute('videoid', id); + } + get videoTitle() { + return this.getAttribute('videotitle') || 'Video'; + } + set videoTitle(title) { + this.setAttribute('videotitle', title); + } + get placeholder() { + return this.getAttribute('placeholder') || ''; + } + set placeholder(image) { + this.setAttribute('placeholder', image); + } + get videoPlay() { + return this.getAttribute('videoPlay') || 'Play'; + } + set videoPlay(name) { + this.setAttribute('videoPlay', name); + } + get videoStartAt() { + return Number(this.getAttribute('videoStartAt') || '0'); + } + set videoStartAt(time) { + this.setAttribute('videoStartAt', String(time)); + } + get autoLoad() { + return this.hasAttribute('autoload'); + } + set autoLoad(value) { + if (value) { + this.setAttribute('autoload', ''); + } + else { + this.removeAttribute('autoload'); + } + } + get params() { + return `start=${this.videoStartAt}&${this.getAttribute('params')}`; + } + /** + * Define our shadowDOM for the component + */ + setupDom() { + const shadowDom = this.attachShadow({ mode: 'open' }); + shadowDom.innerHTML = ` + +
+ + + + + + +
+ `; + this.domRefFrame = this.shadowRoot.querySelector('#frame'); + this.domRefImg = { + fallback: this.shadowRoot.querySelector('#fallbackPlaceholder'), + webp: this.shadowRoot.querySelector('#webpPlaceholder'), + jpeg: this.shadowRoot.querySelector('#jpegPlaceholder'), + }; + this.domRefPlayButton = this.shadowRoot.querySelector('.lty-playbtn'); + } + /** + * Parse our attributes and fire up some placeholders + */ + setupComponent() { + this.initImagePlaceholder(); + this.domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`); + this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`); + if (this.autoLoad) { + this.initIntersectionObserver(); + } + } + /** + * Lifecycle method that we use to listen for attribute changes to period + * @param {*} name + * @param {*} oldVal + * @param {*} newVal + */ + attributeChangedCallback(name, oldVal, newVal) { + switch (name) { + case 'videoid': { + if (oldVal !== newVal) { + this.setupComponent(); + // if we have a previous iframe, remove it and the activated class + if (this.domRefFrame.classList.contains('lyt-activated')) { + this.domRefFrame.classList.remove('lyt-activated'); + this.shadowRoot.querySelector('iframe').remove(); + this.iframeLoaded = false; + } + } + break; + } + default: + break; + } + } + /** + * Inject the iframe into the component body + */ + addIframe() { + if (!this.iframeLoaded) { + const iframeHTML = ` +`; + this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML); + this.domRefFrame.classList.add('lyt-activated'); + this.iframeLoaded = true; + } + } + /** + * Setup the placeholder image for the component + */ + initImagePlaceholder() { + // we don't know which image type to preload, so warm the connection + LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/'); + const posterUrlJpeg = this.placeholder || `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`; + //const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`; + //this.domRefImg.webp.srcset = posterUrlWebp; // DISABLED! + this.domRefImg.jpeg.srcset = posterUrlJpeg; + this.domRefImg.fallback.src = posterUrlJpeg; + this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`); + this.domRefImg.fallback.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`); + } + /** + * Setup the Intersection Observer to load the iframe when scrolled into view + */ + initIntersectionObserver() { + if ('IntersectionObserver' in window && + 'IntersectionObserverEntry' in window) { + const options = { + root: null, + rootMargin: '0px', + threshold: 0, + }; + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting && !this.iframeLoaded) { + LiteYTEmbed.warmConnections(); + this.addIframe(); + observer.unobserve(this); + } + }); + }, options); + observer.observe(this); + } + } + /** + * Add a to the head + * @param {*} kind + * @param {*} url + * @param {*} as + */ + static addPrefetch(kind, url, as) { + const linkElem = document.createElement('link'); + linkElem.rel = kind; + linkElem.href = url; + if (as) { + linkElem.as = as; + } + linkElem.crossOrigin = 'true'; + document.head.append(linkElem); + } + /** + * Begin preconnecting to warm up the iframe load Since the embed's netwok + * requests load within its iframe, preload/prefetch'ing them outside the + * iframe will only cause double-downloads. So, the best we can do is warm up + * a few connections to origins that are in the critical path. + * + * Maybe `` would work, but it's unsupported: + * http://crbug.com/593267 But TBH, I don't think it'll happen soon with Site + * Isolation and split caches adding serious complexity. + */ + static warmConnections() { + if (LiteYTEmbed.preconnected) + return; + // Host that YT uses to serve JS needed by player, per amp-youtube + LiteYTEmbed.addPrefetch('preconnect', 'https://s.ytimg.com'); + // The iframe document and most of its subresources come right off + // youtube.com + LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com'); + // The botguard script is fetched off from google.com + LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'); + // TODO: Not certain if these ad related domains are in the critical path. + // Could verify with domain-specific throttling. + LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); + LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'); + LiteYTEmbed.preconnected = true; + } +} +LiteYTEmbed.preconnected = false; +// Register custom element +customElements.define('lite-youtube', LiteYTEmbed); +//# sourceMappingURL=lite-youtube.js.map diff --git a/web/app/themes/Usines/resources/assets/styles/common/spacing.styl b/web/app/themes/Usines/resources/assets/styles/common/spacing.styl index 1c4ed69..398306a 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/spacing.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/spacing.styl @@ -5,6 +5,10 @@ margin-top: 1.5em .spaced-lg > * + * margin-top: 2em + .spaced-1v > * + * + constrain(margin-top, 2.5vw) + .spaced-2v > * + * + constrain(margin-top, 5vw) .spaced-none > * + * margin-top: 0 @@ -20,6 +24,8 @@ $vw-spacing = { '3': 7.5vw, '4': 10vw, '5': 12.5vw, + '6': 15vw, + '7': 17.5vw, } $sides = { 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 4395785..ffd2cfa 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/forms.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/forms.styl @@ -28,6 +28,7 @@ appearance: none input[type="submit"] + @apply bg-red width: auto select diff --git a/web/app/themes/Usines/resources/assets/styles/components/headings.styl b/web/app/themes/Usines/resources/assets/styles/components/headings.styl index d419ee7..62cdd9f 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/headings.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/headings.styl @@ -15,3 +15,20 @@ h3, .h3 h4, .h4 @apply text-base + +// Extra tweaks for the larger headings ++below(1700px) + .text-2xl + font-size: r(48px) !important + ++below(1400px) + .text-2xl + font-size: r(42px) !important + .text-xl + font-size: r(32px) !important + ++below(1000px) + .text-2xl + font-size: r(36px) !important + .text-xl + font-size: r(28px) !important diff --git a/web/app/themes/Usines/resources/assets/styles/pages/news.styl b/web/app/themes/Usines/resources/assets/styles/pages/news.styl new file mode 100644 index 0000000..0f14874 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/pages/news.styl @@ -0,0 +1,17 @@ +.posts-navigation + .nav-links + display: flex + flex-wrap: wrap + justify-content: space-between + align-items: center + + a + @apply relative inline-block overflow-hidden + @apply bg-red text-white rounded-full + @apply px-4 py-2 + font-smoothing() + transition: background-color 0.25s + white-space: nowrap + + &:hover + @apply bg-blue text-white diff --git a/web/app/themes/Usines/resources/views/index.blade.php b/web/app/themes/Usines/resources/views/index.blade.php index 506ba6b..0dde956 100644 --- a/web/app/themes/Usines/resources/views/index.blade.php +++ b/web/app/themes/Usines/resources/views/index.blade.php @@ -2,9 +2,12 @@ @section('content') -
+

L'actu mobilier & déco

- {{-- TODO ! + {{-- Applying 1px vertical padding here so margins take effect at top and bottom (can't use overflow:hidden due to background decorations) --}} +
+ +
{{-- BG layer --}}
@if (! have_posts()) @@ -14,14 +17,19 @@ {!! get_search_form(false) !!} @endif + @php + // Keep a counter of posts so we can style them differently + $counter = 0; + @endphp @while(have_posts()) @php(the_post()) - @includeFirst(['partials.content-' . get_post_type(), 'partials.content']) + @php($counter++) + @includeFirst(['partials.content-' . get_post_type(), 'partials.content'], [compact('counter')]) @endwhile - {!! get_the_posts_navigation() !!} - - --}} +
+
+ {!! get_the_posts_navigation() !!}
@endsection diff --git a/web/app/themes/Usines/resources/views/partials/content-single-realisation.blade.php b/web/app/themes/Usines/resources/views/partials/content-single-realisation.blade.php index dd5f0bd..8577989 100644 --- a/web/app/themes/Usines/resources/views/partials/content-single-realisation.blade.php +++ b/web/app/themes/Usines/resources/views/partials/content-single-realisation.blade.php @@ -7,16 +7,42 @@
{!! $category->name !!}
+ {{-- Main content wrapper --}}
-
{{-- Inset light background --}}
+
{{-- Inset, light background --}}
- {{-- Just the URL: @image($hero_image, 'raw') --}} - @image($hero_image, 'full', ['class' => 'block mx-auto mb-1v']) +
+ @image($hero_image, 'full', ['class' => 'block mx-auto']) +
-
{!! nl2br($description) !!}
+ {{-- Main text --}} +
+
{!! nl2br($description) !!}
+
- @dump($gallery) + {{-- Gallery --}} +
+ {!! $gallery_backgrounds !!} + @foreach($gallery as $gallery_item) + {!! $gallery_item !!} + @endforeach +
+ + {{-- Testimonial --}} + @if ($testimonial) +
+
+
{!! nl2br($testimonial) !!}
+
{{ $testimonial_author }}
+
+
+ @endif + +
+ +
+ Retour
{{-- diff --git a/web/app/themes/Usines/resources/views/partials/content-single.blade.php b/web/app/themes/Usines/resources/views/partials/content-single.blade.php index 1b688ac..89b56de 100644 --- a/web/app/themes/Usines/resources/views/partials/content-single.blade.php +++ b/web/app/themes/Usines/resources/views/partials/content-single.blade.php @@ -1,19 +1,25 @@ -
-
-

- {!! $title !!} -

+
- @include('partials/entry-meta') -
- -
- @php(the_content()) + {{-- Featured Image --}} +
+
{{-- Proportional image sizer thanks to the padding --}}
-
- {!! wp_link_pages(['echo' => 0, 'before' => '']) !!} -
+ {{-- Post Content --}} +
+ +

{!! $title !!}

+ +
+ @php(the_content()) + + Retour +
+ +
+ {!! wp_link_pages(['echo' => 0, 'before' => '']) !!} +
+
- @php(comments_template()) + {{-- @php(comments_template())--}}
diff --git a/web/app/themes/Usines/resources/views/partials/content.blade.php b/web/app/themes/Usines/resources/views/partials/content.blade.php index c6b5bff..bad9d6b 100644 --- a/web/app/themes/Usines/resources/views/partials/content.blade.php +++ b/web/app/themes/Usines/resources/views/partials/content.blade.php @@ -1,15 +1,27 @@ -
-
-

- - {!! $title !!} - -

- - @include('partials/entry-meta') -
- -
- @php(the_excerpt()) +{{-- News Post Item --}} +{{-- This layout gets mirrored using flexbox direction row-reverse for even items --}} +@php + $classes = 'flex items-center mt-2v mb-3v'; + if ($counter % 2 == 0) $classes .= ' flex-row-reverse'; +@endphp + diff --git a/web/app/themes/Usines/resources/views/single-realisation.blade.php b/web/app/themes/Usines/resources/views/single-realisation.blade.php new file mode 100644 index 0000000..f83f996 --- /dev/null +++ b/web/app/themes/Usines/resources/views/single-realisation.blade.php @@ -0,0 +1,13 @@ +@extends('layouts.app') + +@section('content') + +
+ + @while(have_posts()) @php(the_post()) + @includeFirst(['partials.content-single-' . get_post_type(), 'partials.content-single']) + @endwhile + +
+ +@endsection diff --git a/web/app/themes/Usines/resources/views/single.blade.php b/web/app/themes/Usines/resources/views/single.blade.php index dc77f82..08f40d4 100644 --- a/web/app/themes/Usines/resources/views/single.blade.php +++ b/web/app/themes/Usines/resources/views/single.blade.php @@ -2,7 +2,12 @@ @section('content') -
+ {{-- H2 tag here because the post has a H1 for the title --}} +

L'actu mobilier & déco

+ +
+ +
{{-- BG layer --}}
@while(have_posts()) @php(the_post()) @includeFirst(['partials.content-single-' . get_post_type(), 'partials.content-single']) diff --git a/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php index e45779f..8dc5bf6 100644 --- a/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php +++ b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php @@ -3,11 +3,11 @@
-

+

{{ $title }}

-
{{ $body }}
+
{{ $body }}
{{ $cta_text }}
diff --git a/web/app/themes/Usines/tailwind.config.js b/web/app/themes/Usines/tailwind.config.js index c6cecae..57f5c23 100644 --- a/web/app/themes/Usines/tailwind.config.js +++ b/web/app/themes/Usines/tailwind.config.js @@ -74,13 +74,25 @@ module.exports = { purge: { content: [ './*.php', + './app/View/**/*.php', './resources/views/**/*.php', './resources/assets/**/*.js', ], options: { + // Todo: make a script to generate a list of all custom classes used in Elementor content safelist: [ + 'm-0', + 'mt-0', + 'mr-0', + 'mb-0', + 'ml-0', + 'm-0!', + 'mt-0!', + 'mr-0!', 'mb-0!', + 'ml-0!', 'pb-6', + 'pb-8', 'bg-light', ].concat( require('purgecss-with-wordpress').whitelist, diff --git a/web/app/themes/Usines/webpack.mix.js b/web/app/themes/Usines/webpack.mix.js index c720b5c..f3f056b 100644 --- a/web/app/themes/Usines/webpack.mix.js +++ b/web/app/themes/Usines/webpack.mix.js @@ -44,8 +44,13 @@ mix .js('resources/assets/scripts/masonry-columns.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(); + .blocks('resources/assets/scripts/editor.js', 'scripts'); + //.extract(); + +// Process resources installed via NPM +//mix.js('node_modules/@justinribeiro/lite-youtube/lite-youtube.js', publicPath('scripts')); +// Due to a problem with this component, I had to fork and modify it (see: https://github.com/justinribeiro/lite-youtube/issues/24) +mix.js('resources/assets/scripts/lite-youtube.js', publicPath('scripts')); // Static files mix diff --git a/web/app/themes/Usines/yarn.lock b/web/app/themes/Usines/yarn.lock index e84b3b0..fac9b5e 100644 --- a/web/app/themes/Usines/yarn.lock +++ b/web/app/themes/Usines/yarn.lock @@ -1622,6 +1622,11 @@ postcss "7.0.32" purgecss "^3.0.0" +"@justinribeiro/lite-youtube@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@justinribeiro/lite-youtube/-/lite-youtube-0.9.1.tgz#c9f83861daad361d58de76b2a5e078de6fe6b751" + integrity sha512-IgcpHnovzZGxU4Ec+0c7sSLhrJWflvYliQUmdcwBgyVkGw0ZL9Y8IU/m09NPk9EzIk2HAOWUGLywTVpB785egA== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"