From: Stephen Cameron Date: Tue, 14 May 2019 17:37:58 +0000 (+0200) Subject: Animated links, custom 404 pages and other fixes. WIP #2684 @3 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7f081b9fc5e1755e4417e5caa7998a23e1d5e50c;p=c6-wordpress.git 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 1e9cc38..d9a3e48 100644 --- 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 "

get_render_attribute_string('title')}>$title

"; if (!empty($body)) echo "
get_render_attribute_string('body')}>$body
"; if (!empty($cta_text)) { - echo "get_render_attribute_string('cta_text')}>". \App\svg_image('arrow')->toHtml() ." $cta_text"; + echo 'get_render_attribute_string('cta_text') .'>'; + echo \App\svg_image('arrow', 'svg first-arrow')->toHtml(); + echo ''. $cta_text .''; + echo ''. \App\svg_image('arrow', 'svg second-arrow')->toHtml() .''; + echo ''; } echo ''; } @@ -322,7 +326,11 @@ class TextBlock extends Widget_Base { <# } #> <# if ('' !== settings.cta_text) { #> - toHtml() ?> {{{ settings.cta_text }}} + + toHtml() ?> + {{{ settings.cta_text }}} + toHtml() ?> + <# } #> diff --git a/wp-content/themes/c6/resources/assets/images/arrow.svg b/wp-content/themes/c6/resources/assets/images/arrow.svg index 1b4e0f4..65615fc 100644 --- a/wp-content/themes/c6/resources/assets/images/arrow.svg +++ b/wp-content/themes/c6/resources/assets/images/arrow.svg @@ -1,7 +1,4 @@ - - - - + + 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 c89836f..7d65771 100644 --- 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 bef0e4a..f58453f 100644 --- 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 892bd38..69b9172 100644 --- 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 d01d65e..bb13144 100644 --- 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