Animated links, custom 404 pages and other fixes. WIP #2684 @3

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
index 1e9cc3880cbbeff1781151b76dc1deebaf1c4819..d9a3e48358449d23821a6d112f38c7a687bfb90e 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php
@@ -283,7 +283,11 @@ class TextBlock extends Widget_Base {
         if (!empty($title)) echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
         if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
         if (!empty($cta_text)) {
-            echo "<a {$this->get_render_attribute_string('cta_text')}>". \App\svg_image('arrow')->toHtml() ." $cta_text</a>";
+            echo '<a '. $this->get_render_attribute_string('cta_text') .'>';
+            echo \App\svg_image('arrow', 'svg first-arrow')->toHtml();
+            echo '<span class="arrow-link-label">'. $cta_text .'</span>';
+            echo '<span class="second-arrow-mask">'. \App\svg_image('arrow', 'svg second-arrow')->toHtml() .'</span>';
+            echo '</a>';
         }
         echo '</div>';
     }
@@ -322,7 +326,11 @@ class TextBlock extends Widget_Base {
             <# } #>
 
             <# if ('' !== settings.cta_text) { #>
-                <a {{{ view.getRenderAttributeString( 'cta_text' ) }}}><?= \App\svg_image('arrow')->toHtml() ?> {{{ settings.cta_text }}}</a>
+                <a {{{ view.getRenderAttributeString( 'cta_text' ) }}}>
+                    <?= \App\svg_image('arrow', 'svg first-arrow')->toHtml() ?>
+                    <span class="arrow-link-label">{{{ settings.cta_text }}}</span>
+                    <span class="second-arrow-mask"><?= \App\svg_image('arrow', 'svg second-arrow')->toHtml() ?></span>
+                </a>
             <# } #>
 
         </div>

diff --git a/wp-content/themes/c6/resources/assets/images/arrow.svg b/wp-content/themes/c6/resources/assets/images/arrow.svg
index 1b4e0f4dd48ef2838ca1d807428f992ab4b46a23..65615fcf4faf4659a131c1a22bc28a4cee86fedd 100644 (file)
--- a/wp-content/themes/c6/resources/assets/images/arrow.svg
+++ b/wp-content/themes/c6/resources/assets/images/arrow.svg
@@ -1,7 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-        viewBox="0 0 17.207 13.062" enable-background="new 0 0 17.207 13.062" xml:space="preserve">
-<polygon fill="#1C1C1C" points="10.851,0 9.791,1.062 14.232,5.495 0,5.495 0,6.995 14.431,6.995 9.415,12 10.475,13.062 
-       17.206,6.344 "/>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="12"
+        viewBox="0 0 16 12" style="enable-background:new 0 0 16 12;" xml:space="preserve">
+<polygon class="st0" points="10.1,0 9.1,1 13.2,5 0,5 0,6.4 13.4,6.4 8.8,11 9.7,12 16,5.8 "/>
 </svg>

diff --git a/wp-content/themes/c6/resources/assets/styles/common/global.styl b/wp-content/themes/c6/resources/assets/styles/common/global.styl
index c89836f3e22e0286aa1b9eb3f1d53f3a35164199..7d657718370e4122e9fa2dce3e588ce849ccc8b8 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/global.styl
@@ -90,19 +90,55 @@ $max-bottom-padding = unit($section-vertical-padding / 100, '') * $content-max-w
     padding-left: 0
     padding-right: 0
 
+// Animated arrow link
+$entranceSpeed = 350ms
+$exitSpeed = 400ms
+$translateDistance = -2.32em // Width of arrow (1.32em) + margin from text (1em)
 
 .arrow-link
-  display: inline-block
+  position: relative
+  overflow: hidden
+  display: flex
+  align-items: center
   color: $colors.orange
+  font-size: $font-size.small fixed // Won't be converted to rems
+  font-weight: 800
+  text-transform: uppercase
+
+  .arrow-link-label
+    display: inline-block
+    margin: 0 1em
+
+  .arrow-link-label, .first-arrow, .second-arrow-mask
+    transition: $entranceSpeed all ease
+
+  .second-arrow
+    transform: translateX(-100%) // Hidden outside of mask
+    opacity: 0
+    transition: $exitSpeed all ease
+    transition-property: transform, opacity // Only animate these properties (we don't want color transition here)
+
+    &-mask
+      overflow: hidden
+      display: flex
+      align-items: center
+      opacity: 0
 
   &:hover
     color: #14bfc2
 
+    .arrow-link-label, .first-arrow, .second-arrow-mask
+      transform: translateX($translateDistance)
+    .first-arrow
+      opacity: 0
+    .second-arrow
+      transform: translateX(0)
+      opacity: 1
+      &-mask
+        opacity: 1
+
   svg
-    height: r(12px)
-    display: inline-block
-    vertical-align: middle
-    margin-right: r(8px)
+    height: 1em
 
   polygon, path
     fill: currentColor

diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
index bef0e4af646cb929ba34928454255a51d99ce7ca..f58453f31e192bf8642abc9cc747a57fe1d58a92 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
@@ -70,10 +70,10 @@ header.site
 
     .svg
       display: inline-block
-      width: 0.95em
-      height: 0.60em
       margin-left: 0.25em
-      overflow: hidden
+      width: 0.95em
+      height: 0.6em // Needed for IE 11
+      overflow: hidden // Also needed for IE 11
 
 
       path

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
index 892bd386adc4eed86ad7f7aa64fa9455381a64db..69b91729c3d3e007b0006a9c185493868551e63d 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
@@ -53,10 +53,6 @@
 
   &-cta
     font-smoothing()
-    font-size: $font-size.small fixed // Won't be converted to rems
-    font-weight: 800
-    text-transform: uppercase
-    display: inline-block
     margin-top: r(30px)
 
     // If the CTA is the first child, it means it is the only element

diff --git a/wp-content/themes/c6/resources/views/404.blade.php b/wp-content/themes/c6/resources/views/404.blade.php
index d01d65ea08f77adafb101be36dd3e6cfb24eb642..bb1314429e1b9831e27429ba0b2dd97bd6dca1b1 100644 (file)
--- a/wp-content/themes/c6/resources/views/404.blade.php
+++ b/wp-content/themes/c6/resources/views/404.blade.php
@@ -5,10 +5,12 @@
   @php
     // Fetch content from page named 'error-404'
     // ToDo: make this more robust
-    $post = get_page_by_path('error-404');
+    $page = get_page_by_path('error-404');
+    $current_language = apply_filters('wpml_current_language', NULL);
+    $pageID = apply_filters( 'wpml_object_id', $page->ID, 'page', true, $current_language);
 
-    if ($post) {
-      echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($post->ID);
+    if ($pageID) {
+      echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($pageID);
     }
   @endphp