From 62b9c0ba270830ef0cb58b588ad014244806a6a9 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 24 Dec 2020 20:12:57 +0100
Subject: [PATCH] WIP #4064 @11

---
 .../cube/src/Elementor/Widgets/TextBlock.php  |  6 ++--
 web/app/themes/Usines/app/helpers.php         | 29 ++++++++++++---
 web/app/themes/Usines/index.php               |  2 +-
 .../assets/styles/common/global.styl          |  3 ++
 .../assets/styles/common/layout.styl          |  5 ++-
 .../assets/styles/components/buttons.styl     | 36 +++++++++++++++++++
 .../assets/styles/components/sections.styl    | 15 +++++++-
 .../views/archive-realisation.blade.php       | 31 ++++++++++++++++
 .../Usines/resources/views/index.blade.php    | 30 ++++++++++------
 .../resources/views/partials/header.blade.php |  4 +--
 .../views/widgets/intro-carousel.blade.php    |  4 +--
 web/app/themes/Usines/webpack.mix.js          |  1 +
 12 files changed, 140 insertions(+), 26 deletions(-)
 create mode 100644 web/app/themes/Usines/resources/assets/styles/components/buttons.styl
 create mode 100644 web/app/themes/Usines/resources/views/archive-realisation.blade.php

diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
index d42e2a6..26cfb22 100644
--- a/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
@@ -267,9 +267,9 @@ class TextBlock extends _Base {
         $this->add_inline_editing_attributes('cta_text', 'none');
 
         // CSS Classes for elements
-        $this->add_render_attribute('title', 'class', ["text-block-title $title_size"]);
+        $this->add_render_attribute('title', 'class', ["text-block-title font-semibold $title_size"]);
         $this->add_render_attribute('body', 'class', ['text-block-body']);
-        $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn inline-block bg-red text-white py-2 px-4 rounded-full hover:bg-blue hover:text-white']);
+        $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn']);
 
         // Rendered content
         echo '<div class="text-block">';
@@ -297,7 +297,7 @@ class TextBlock extends _Base {
 
         var title_size = (settings.title_size == '') ? 'text-xl' : settings.title_size;
 
-        view.addRenderAttribute( 'title', 'class', ['text-block-title '+ title_size]);
+        view.addRenderAttribute( 'title', 'class', ['text-block-title font-semibold '+ title_size]);
         view.addRenderAttribute( 'body', 'class', ['text-block-body']);
         view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta btn']);
 
diff --git a/web/app/themes/Usines/app/helpers.php b/web/app/themes/Usines/app/helpers.php
index 0583e0d..891ada2 100644
--- a/web/app/themes/Usines/app/helpers.php
+++ b/web/app/themes/Usines/app/helpers.php
@@ -9,11 +9,30 @@ namespace App;
 // Grid overlay helper, activated when DEBUG_GRID is defined as true
 if (env('DEBUG_GRID') || isset($_GET['debug-grid'])) {
     add_action('wp_footer', function () {
-        $css  = 'background-size: 2.5vw 2.5vw;';
-        $css .= 'background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);';
-        $css .= 'opacity: 0.3;';
-        $css .= 'pointer-events: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9990;';
-        echo "<div id='debugGrid' style='$css'></div>";
+        echo "<div id='debugGrid'></div>";
+        echo '<style>
+                #debugGrid { 
+                    background-size: 2.5vw 2.5vw;
+                    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
+                    opacity: 0.3;
+                    pointer-events: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: 9990; 
+                }
+
+                @media (min-width: 1920px) { 
+                    #debugGrid { 
+                        background-size: 48px 48px;
+                        max-width: 1921px;
+                        left: 50%;
+                        transform: translateX(-50%); 
+                    } 
+                }
+              </style>';
     });
 }
 
diff --git a/web/app/themes/Usines/index.php b/web/app/themes/Usines/index.php
index 5028d8f..3555825 100644
--- a/web/app/themes/Usines/index.php
+++ b/web/app/themes/Usines/index.php
@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
   </head>
 
-  <body <?php body_class('font-body text-dark'); ?>>
+  <body <?php body_class('font-body text-dark overflow-x-hidden'); ?>>
     <?php wp_body_open(); ?>
     <?php do_action('get_header'); ?>
 
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 04176e6..b5dc881 100644
--- a/web/app/themes/Usines/resources/assets/styles/common/global.styl
+++ b/web/app/themes/Usines/resources/assets/styles/common/global.styl
@@ -7,6 +7,9 @@ body
 a
   @apply transition-colors unquote('hover:text-red')
 
+img
+  .rounded-full & // So this can be applied to parent element and also to override Elementor default CSS
+    border-radius: 999px
 
 p:not(:last-child)
   margin-bottom: 1.5em
diff --git a/web/app/themes/Usines/resources/assets/styles/common/layout.styl b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
index 577091d..4e48a18 100644
--- a/web/app/themes/Usines/resources/assets/styles/common/layout.styl
+++ b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
@@ -7,7 +7,10 @@
   height: 100%
   align-content: center
 
-.container,
+.container
+  center($base-width)
+
+.container-content,
 .elementor-section-boxed > .elementor-container
   center($content-max-width)
 
diff --git a/web/app/themes/Usines/resources/assets/styles/components/buttons.styl b/web/app/themes/Usines/resources/assets/styles/components/buttons.styl
new file mode 100644
index 0000000..ec3a80c
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/components/buttons.styl
@@ -0,0 +1,36 @@
+// Buttons
+
+.btn,
+.elementor-widget-button a.elementor-button
+  @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
+
+  &:hover
+    @apply bg-blue text-white
+
+  // Button sizes
+  &.elementor-size-sm
+    @apply text-sm
+  &.elementor-size-md
+    @apply text-base
+  &.elementor-size-lg
+    @apply text-lg
+  &.elementor-size-xl
+    @apply text-xl
+
+// Button styles
+.elementor-element.elementor-button-info .elementor-button
+  @apply bg-teal
+
+// Icons inside buttons
+.elementor-button-content-wrapper
+  @apply flex items-center
+
+.elementor-button-icon
+  svg
+    width: auto
+    height: 1em
+
diff --git a/web/app/themes/Usines/resources/assets/styles/components/sections.styl b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
index bb8da72..9e28c96 100644
--- a/web/app/themes/Usines/resources/assets/styles/components/sections.styl
+++ b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
@@ -23,5 +23,18 @@
 //--- Reversed layout
 // Handle column swapping when layout reversed toggle is set
 .layout-reversed
-  .elementor-row
+  .elementor-container
     flex-direction: row-reverse
+
+
+//--- Layered Backgrounds
+// When the columns fold, layered backgrounds fill full section (applicable to coloured backgrounds)
++below($breakpoint-columns)
+  .layered-backgrounds > *
+    width: 100% !important
+    top: 0 !important
+    left: 0 !important
+    right: 0 !important
+    bottom: 0 !important
+    margin: 0 !important
+    transform: none !important
diff --git a/web/app/themes/Usines/resources/views/archive-realisation.blade.php b/web/app/themes/Usines/resources/views/archive-realisation.blade.php
new file mode 100644
index 0000000..a2cb98b
--- /dev/null
+++ b/web/app/themes/Usines/resources/views/archive-realisation.blade.php
@@ -0,0 +1,31 @@
+@extends('layouts.app')
+
+@section('content')
+
+
+  <div class="container-content py-2v px-1v">
+
+    {{-- TODO !
+
+      @if (! have_posts())
+        @alert(['type' => 'warning'])
+        {{ __('Sorry, no results were found.', 'sage') }}
+        @endalert
+
+        {!! get_search_form(false) !!}
+      @endif
+
+      @while (have_posts()) @php(the_post())
+      @includeFirst(['partials.content-'.get_post_type(), 'partials.content'])
+      @endwhile
+
+      {!! get_the_posts_navigation() !!}
+
+      --}}
+
+  </div>
+@endsection
+
+@section('sidebar')
+  @include('partials.sidebar')
+@endsection
diff --git a/web/app/themes/Usines/resources/views/index.blade.php b/web/app/themes/Usines/resources/views/index.blade.php
index 4e0e065..506ba6b 100644
--- a/web/app/themes/Usines/resources/views/index.blade.php
+++ b/web/app/themes/Usines/resources/views/index.blade.php
@@ -1,21 +1,29 @@
 @extends('layouts.app')
 
 @section('content')
-  @include('partials.page-header')
 
-  @if (! have_posts())
-    <x-alert type="warning">
-      {!! __('Sorry, no results were found.', 'sage') !!}
-    </x-alert>
+  <div class="container-content py-2v px-1v">
 
-    {!! get_search_form(false) !!}
-  @endif
+    {{-- TODO !
 
-  @while(have_posts()) @php(the_post())
-    @includeFirst(['partials.content-' . get_post_type(), 'partials.content'])
-  @endwhile
+    @if (! have_posts())
+      <x-alert type="warning">
+        {!! __('Sorry, no results were found.', 'sage') !!}
+      </x-alert>
+
+      {!! get_search_form(false) !!}
+    @endif
+
+    @while(have_posts()) @php(the_post())
+      @includeFirst(['partials.content-' . get_post_type(), 'partials.content'])
+    @endwhile
+
+    {!! get_the_posts_navigation() !!}
+
+    --}}
+
+  </div>
 
-  {!! get_the_posts_navigation() !!}
 @endsection
 
 @section('sidebar')
diff --git a/web/app/themes/Usines/resources/views/partials/header.blade.php b/web/app/themes/Usines/resources/views/partials/header.blade.php
index b6db07b..1047c5a 100644
--- a/web/app/themes/Usines/resources/views/partials/header.blade.php
+++ b/web/app/themes/Usines/resources/views/partials/header.blade.php
@@ -1,4 +1,4 @@
-<header class="relative flex items-end justify-center mx-1v pt-6">
+<header class="container w-full relative flex items-end justify-center px-1v pt-6">
 
   {{-- Primary nav (left) --}}
   <div class="flex-1 flex justify-end mb-4">
@@ -41,7 +41,7 @@
     </div>
   </div>
 
-  <a href="{{ $contact_phone_link }}" class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center pb-12 sm:hidden">
+  <a href="{{ $contact_phone_link }}" class="absolute right-0 mr-1v top-1/2 transform -translate-y-1/2 flex items-center pb-12 sm:hidden">
     <span class="font-semibold text-right text-sm">
       {{ get_option('contact_header_text') }}<br/>
       <span class="text-lg">{{ $contact_phone }}</span>
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 657355e..008bb5d 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
@@ -8,14 +8,14 @@
         <span class="absolute block bg-beige" style="top: -0.1em; bottom: -0.15em; left: -0.325em; width: 36%; z-index: -1"></span>
       </h1>
       <div class="leading-loose">{{ $body }}</div>
-      <a href="{{ $cta_link }}" class="btn inline-block bg-red text-white py-2 px-4 mt-6 rounded-full hover:bg-blue hover:text-white">{{ $cta_text }}</a>
+      <a href="{{ $cta_link }}" class="btn">{{ $cta_text }}</a>
     </div>
   </div>
 
   <div class="intro-carousel-slides" style="flex-basis: 60%">
     <div class="intro-carousel-slides-sizer relative ml-1v" style="padding-bottom: 71.287%">
       @foreach ($slides as $slide)
-        <div class="intro-carousel-slide absolute top-0 left-0 w-full h-full @if($loop->first)hidden @endif">
+        <div class="intro-carousel-slide absolute top-0 left-0 w-full h-full @if(!$loop->first)hidden @endif">
           <img src="{{ $slide['background_image']['url'] }}" class="absolute top-0 right-0">
           <img src="{{ $slide['image']['url'] }}" class="absolute" style="border-radius: 999px; max-width: 69.475%; top: 2.35%; right: 4.575%">
           <div class="intro-carousel-slide-caption">{{ $caption }}</div>
diff --git a/web/app/themes/Usines/webpack.mix.js b/web/app/themes/Usines/webpack.mix.js
index 3feb349..8510310 100644
--- a/web/app/themes/Usines/webpack.mix.js
+++ b/web/app/themes/Usines/webpack.mix.js
@@ -36,6 +36,7 @@ mix.stylus('resources/assets/styles/editor.styl', 'styles');
 // Javascript
 mix
   .js('resources/assets/scripts/app.js', 'scripts')
+  .js('resources/assets/scripts/intro-carousel.js', 'scripts')
   .js('resources/assets/scripts/customizer.js', 'scripts')
   .blocks('resources/assets/scripts/editor.js', 'scripts')
   .extract();
-- 
2.39.5