From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 3 Oct 2019 15:36:47 +0000 (+0200)
Subject: WIP #3053 @6.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=14592ca5871295729b7f3f32985cf998a6e44bbb;p=ccv-wordpress.git

WIP #3053 @6.75
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
index 99a810f..0d07a2a 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -107,6 +107,12 @@ class HeaderSlideshow extends Widget_Base {
         $subtitle = $this->get_settings('subtitle');
         $images = $this->get_settings('images');
 
+        if (!$images || count($images) < 1) return false; // Must have images to display
+
+        // Use first image in gallery to set size of slideshow
+        $image_meta = wp_get_attachment_metadata($images[0]['id']);
+        $image_ratio = round($image_meta['height'] / $image_meta['width'] * 100, 2) . '%';
+
         // When this element is present, add a class to the body so the header can be styled differently (transparent background)
         add_filter('body_class', function($classes) {
             $classes[] = 'header-slideshow-present';
@@ -126,22 +132,19 @@ class HeaderSlideshow extends Widget_Base {
             After recent updates, the parent must also have the class "elementor" for animations to work.
             */
             ?>
-            <div class="header-slideshow-content">
 
-                <div class="header-slideshow-content-inner elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
-                    <h1 class="header-slideshow-title"><?= $title ?></h1>
-                    <h2 class="header-slideshow-subtitle"><?= $subtitle ?></h2>
-                </div>
+            <?php // Todo: add simple image slideshow with crossfade + nav (no need for a library) ?>
 
-                <!-- Todo: handle images and simple carousel. See Elementor image-carousel.php -->
-
-            </div>
+            <div class="header-slideshow-sizer" style="padding-bottom: <?= $image_ratio ?>; background-image:url(/wp-content/uploads/<?= $image_meta['file'] ?>);">
 
+                <div class="header-slideshow-content mx-2v elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
+                    <h1 class="header-slideshow-title">
+                        <span class="header-slideshow-title-text"><?= nl2br($title) ?></span>
+                        <span class="header-slideshow-subtitle"><?= $subtitle ?></span>
+                    </h1>
+                </div>
 
-            <div class="header-slideshow-background-container">
-                <div class="header-slideshow-background"></div>
             </div>
-
         </div>
 
         <?php
diff --git a/wp-content/themes/CCV/app/Composers/Header.php b/wp-content/themes/CCV/app/Composers/Header.php
new file mode 100644
index 0000000..fb03728
--- /dev/null
+++ b/wp-content/themes/CCV/app/Composers/Header.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Composers;
+
+use Roots\Acorn\View\Composer;
+
+class Header extends Composer
+{
+    protected static $views = [
+        'partials.header',
+    ];
+
+    public function with() {
+
+        // To allow for better management of the URLs and titles when translating,
+        // header buttons are stored in a separate menu location. Due to the design,
+        // there should only be a maximum of 2 links so these are extracted here.
+        $cta_nav = wp_get_nav_menu_items(get_nav_menu_locations()['cta_navigation']);
+        $button_1 = $cta_nav[0] ?? false;
+        $button_2 = $cta_nav[1] ?? false;
+
+        return compact('button_1', 'button_2');
+    }
+}
diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php
index 7e15ea6..93f553a 100755
--- a/wp-content/themes/CCV/app/setup.php
+++ b/wp-content/themes/CCV/app/setup.php
@@ -53,7 +53,8 @@ add_action('after_setup_theme', function () {
      * @link https://developer.wordpress.org/reference/functions/register_nav_menus/
      */
     register_nav_menus([
-        'primary_navigation' => __('Primary Navigation', 'sage')
+        'primary_navigation' => __('Primary Navigation', 'sage'),
+        'cta_navigation' => __('Header Buttons (2 items max)', 'cube')
     ]);
 
     /**
diff --git a/wp-content/themes/CCV/resources/assets/images/rendezvous.svg b/wp-content/themes/CCV/resources/assets/images/rendezvous.svg
new file mode 100644
index 0000000..f2c1bff
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/rendezvous.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.073" height="26.074" viewBox="0 0 26.073 26.074">
+  <g id="Phones-Mobile-Devices_Phone-Actions_phone-actions-ring" data-name="Phones-Mobile-Devices / Phone-Actions / phone-actions-ring" transform="translate(-618.833 -488)">
+    <g id="Group_52" data-name="Group 52" transform="translate(619.749 488.75)">
+      <g id="phone-actions-ring">
+        <path id="Shape_194" data-name="Shape 194" d="M632.354,512.03l.011.008a4.88,4.88,0,0,0,6.074-.667l.682-.682a1.629,1.629,0,0,0,0-2.3l-2.878-2.876a1.629,1.629,0,0,0-2.3,0h0a1.626,1.626,0,0,1-2.3,0l-4.6-4.6a1.626,1.626,0,0,1,0-2.3h0a1.629,1.629,0,0,0,0-2.3l-2.877-2.876a1.628,1.628,0,0,0-2.3,0l-.683.682a4.88,4.88,0,0,0-.666,6.074l.007.011a44.024,44.024,0,0,0,11.834,11.832Z" transform="translate(-619.749 -488.394)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Shape_195" data-name="Shape 195" d="M630.25,496.25a4.882,4.882,0,0,1,4.881,4.881" transform="translate(-618.859 -488.115)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Shape_196" data-name="Shape 196" d="M630.25,492.5a8.949,8.949,0,0,1,8.949,8.949" transform="translate(-618.859 -488.432)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Shape_197" data-name="Shape 197" d="M630.25,488.75a13.017,13.017,0,0,1,13.017,13.017" transform="translate(-618.859 -488.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg b/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg
new file mode 100644
index 0000000..a5682b5
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.092" height="25.92" viewBox="0 0 31.092 25.92">
+  <g id="Group_502" data-name="Group 502" transform="translate(-83.941 -511.537)">
+    <g id="Group_501" data-name="Group 501" transform="translate(87.701 512.337)">
+      <line id="Line_144" data-name="Line 144" x2="11.693" transform="translate(8.338 24.321)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+      <line id="Line_145" data-name="Line 145" x2="15.905" transform="translate(10.451 16.585)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+      <path id="Path_601" data-name="Path 601" d="M86.893,524.11v-9.753a2.019,2.019,0,0,1,2.01-2.019h22.5a2.026,2.026,0,0,1,2.019,2.019v16.593a2.026,2.026,0,0,1-2.019,2.019H96.026" transform="translate(-86.893 -512.337)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+    </g>
+    <path id="Path_602" data-name="Path 602" d="M93.037,533.136l4.48-13.763-12.776,6.8,4.141,1.132-3.361,4,2.361,2.123,3.361-4Z" transform="translate(0 2.643)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+  </g>
+</svg>
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
new file mode 100644
index 0000000..7716d06
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
@@ -0,0 +1,8 @@
+header.site
+  .header-slideshow-present &
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    background-color: transparent
+    z-index: 20
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
new file mode 100644
index 0000000..75139e0
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -0,0 +1,59 @@
+$title_bg = rgba(#fff, 0.88)
+
+.header-slideshow
+  position: relative
+
+  &-sizer
+    @apply bg-cover bg-center
+
+    &:before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
+
+  &-content
+    position: absolute
+    constrain(left, 5vw)
+    constrain(bottom, 10vw)
+
+  // Note: for the title to have a semi-transparent background,
+  // we're limited by the font properties because the inline
+  // backgrounds can't overlap so we need to get the line-height
+  // and padding just right. Maybe it would be better if it was
+  // solid white... More details:
+  // https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
+  &-title
+    position: relative
+    line-height: 1.27
+    padding-right: 1rem // To match inline text below
+
+    &:before
+      top: 0.6em
+      left: -0.5em
+      width: 0.7em
+
+    // For multi-line padded text effect
+    // Ref: https://css-tricks.com/multi-line-padded-text/
+    &-text
+      @apply text-3xl
+      box-decoration-break: clone
+      display: inline
+      padding: 0 1rem
+      background-color: $title_bg
+
+
+  // Need to position this absolutely so it sits properly
+  // right at the bottom but without overlapping...
+  // (due to also having a semi-transparent background)
+  &-subtitle
+    background-color: $title_bg
+    position: absolute
+    top: 100%
+    left: 0
+    width: 100%
+    font-size: 23px
+    padding: 0 1rem 0.5em
diff --git a/wp-content/themes/CCV/resources/views/layouts/app.blade.php b/wp-content/themes/CCV/resources/views/layouts/app.blade.php
index e5e1307..a853f96 100644
--- a/wp-content/themes/CCV/resources/views/layouts/app.blade.php
+++ b/wp-content/themes/CCV/resources/views/layouts/app.blade.php
@@ -2,9 +2,9 @@
 <html {!! get_language_attributes() !!}>
   @include('partials.head')
 
-  <body @php(body_class('font-body font-light text-dark flex flex-col min-h-screen'))>
+  <body @php(body_class('font-body font-light text-dark'))>
 
-    <div class="wrapper">
+    <div class="wrapper flex flex-col min-h-screen">
       @php(wp_body_open())
       @php(do_action('get_header'))
       @include('partials.header')
diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php
index 6be3a97..0634289 100644
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -1,13 +1,38 @@
-<header class="font-display font-medium uppercase text-sm">
-  <div class="container px-2v pt-8 pb-12 flex items-center justify-between">
+<header class="site bg-white font-display font-medium uppercase text-sm">
+  <div class="container relative pl-2v pr-1v pt-8 pb-12 flex items-center justify-between">
     <a class="flex-shrink-0 mr-4" href="{{ home_url('/') }}" aria-label="<?= _("Go to the home page") ?>">
       <img class="header-logo" src="@asset('images/logo.svg')" alt="{{ get_bloginfo('name', 'display') }}">
     </a>
 
     @if (has_nav_menu('primary_navigation'))
-      <nav class="nav-primary">
+      <nav class="nav-primary self-end">
         {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'menu-list', 'echo' => false]) !!}
       </nav>
     @endif
+
+    <div class="nav-secondary absolute top-0 right-0 flex items-center">
+
+      {{-- TODO: Add real language switcher here --}}
+      <ul class="flex mr-2">
+        <li><a href="#" class="mr-4 border-b-2 border-pink">FR</a></li>
+        <li><a href="#" class="mr-4">EN</a></li>
+        <li><a href="#" class="mr-4">AR</a></li>
+        <li><a href="#" class="mr-4">RU</a></li>
+      </ul>
+
+      @if ($button_1)
+        <a href="{{ $button_1->url }}" class="btn flex items-center">
+          <img src="@asset('images/teleconsultation.svg')" class="mr-2">
+          {{ $button_1->title }}
+        </a>
+      @endif
+
+      @if ($button_2)
+        <a href="{{ $button_2->url }}" class="btn flex items-center bg-teal">
+          <img src="@asset('images/rendezvous.svg')" class="mr-2">
+          {{ $button_2->title }}
+        </a>
+      @endif
+    </div>
   </div>
 </header>
diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js
index 0925334..1bbc389 100644
--- a/wp-content/themes/CCV/tailwind.config.js
+++ b/wp-content/themes/CCV/tailwind.config.js
@@ -21,6 +21,7 @@ module.exports = {
         'light': '#F6F5F5', // Light grey backgrounds
         'purple-dark': '#2E2C40', // Footer and other dark sections
         'pink': '#FF078B', // Accent colour
+        'teal': '#2CC4CF', // Accent colour
       },
       fontFamily: {
         'display': ['Dosis', 'sans-serif'], // Headings, labels, menus etc