From 7a2ff6f5773311015a12449f64695a6c1eb5b111 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Fri, 18 May 2018 18:45:46 +0000 Subject: [PATCH] Desktop version finalisations + content entry. WIP #1912 @9.5 --- .../physioassist/src/Elementor/Setup.php | 6 +- .../src/Elementor/Widgets/TextBlock.php | 14 +++- .../src/Elementor/Widgets/VideoGallery.php | 43 +++++++----- .../plugins/html-forms/src/functions.php | 1 - .../resources/assets/images/icons/play.svg | 9 +++ .../assets/styles/common/utilities.styl | 8 ++- .../assets/styles/components/forms.styl | 66 +++++++++++++++---- .../assets/styles/components/navigation.styl | 9 ++- .../assets/styles/components/text.styl | 6 +- .../assets/styles/layouts/sections.styl | 37 ++++++++++- .../assets/styles/pages/contact.styl | 27 ++++++++ .../styles/widgets/background-image.styl | 8 +++ .../assets/styles/widgets/text-block.styl | 15 +++-- .../assets/styles/widgets/video-carousel.styl | 37 +++++++++-- .../widgets/video-gallery-carousel.blade.php | 8 +++ 15 files changed, 237 insertions(+), 57 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/play.svg create mode 100644 wp-content/themes/physioassist/resources/assets/styles/pages/contact.styl create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/background-image.styl diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php index 145f3a72..5fdd85a2 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php @@ -104,7 +104,8 @@ class Setup { 'type' => Controls_Manager::SELECT, 'options' => [ 'default' => __( 'Default', 'cube' ), - 'squares' => __( 'Text + Image Squares', 'cube' ), + 'squares' => __( 'Text/Image Squares', 'cube' ), + 'article' => __( 'Article Text', 'cube' ), 'indented' => __( 'Indented Content', 'cube' ), ], 'default' => 'default', @@ -131,6 +132,9 @@ class Setup { 'default' => '', 'return_value' => 'disable-vertical-spacing', 'prefix_class' => '', // Will apply return value as a class + 'condition' => [ + 'block_layout!' => 'squares' + ] ] ); diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php index bd35d24e..f911bf00 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php @@ -243,9 +243,19 @@ class TextBlock extends Widget_Base { $body = $this->parse_text_editor($this->get_settings('body')); $cta_text = $this->get_settings('cta_text'); $cta_link = $this->get_settings('cta_link'); + $cta_tag = 'a'; // Default tag type if ( ! empty( $cta_link['url'] ) ) { - $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] ); + + // If the CTA links directly to a youtube video, we want this to open in a lightbox instead of + // For now only supporting links that start with https://www.youtube.com... + if (strpos($cta_link['url'], 'https://www.youtube.com') === 0) { + $cta_tag = 'div'; + $this->add_render_attribute('cta_text', 'data-elementor-lightbox', VideoGallery::lightbox($cta_link['url'], $this->get_id())); + $this->add_render_attribute('cta_text', 'data-elementor-open-lightbox', 'yes'); + } else { + $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] ); + } if ( $cta_link['is_external'] ) { $this->add_render_attribute( 'cta_text', 'target', '_blank' ); @@ -274,7 +284,7 @@ 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')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text"; + echo "<$cta_tag {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text"; } echo ''; } diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php index 8239eddc..027bb35a 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php @@ -150,27 +150,10 @@ class VideoGallery extends Widget_Base { // Get videos and process each video URL so it can be used with Elementor lightbox $videos = array_map(function($video) { - // Video settings for lightbox embed - $embed_params = [ - 'rel' => 0, // Don't show related videos at the end of playback - 'showinfo' => 0 // Hide info - ]; - - $lightbox_options = [ - 'type' => 'video', - 'url' => Embed::get_embed_url($video['url'], $embed_params), - 'modalOptions' => [ - 'id' => 'elementor-lightbox-' . $this->get_id(), - 'entranceAnimation' => 'zoomIn', - 'videoAspectRatio' => '169', - ], - ]; - - $video['lightbox'] = wp_json_encode($lightbox_options); + $video['lightbox'] = self::lightbox($video['url'], $this->get_id()); $video_properties = Embed::get_video_properties($video['url']); - // If no preview image is set, fetch the one from Youtube if (empty($video['image']['id'])) { $video['preview'] = $this->youtube_image($video_properties['video_id']); @@ -190,6 +173,30 @@ class VideoGallery extends Widget_Base { } + // Create lightbox configuration for opening video in Elmentor popup + // This can also be used by other elements like TextBlock for the CTA links + public static function lightbox($url, $element_ID) { + + // Video settings for lightbox embed + $embed_params = [ + 'rel' => 0, // Don't show related videos at the end of playback + 'showinfo' => 0 // Hide info + ]; + + $lightbox_options = [ + 'type' => 'video', + 'url' => Embed::get_embed_url($url, $embed_params), + 'modalOptions' => [ + 'id' => 'elementor-lightbox-' . $element_ID, + 'entranceAnimation' => 'zoomIn', + 'videoAspectRatio' => '169', + ], + ]; + + return wp_json_encode($lightbox_options); + } + + // We can't guarantee that the video's maxresdefault.jpg will exist (it's not created for non-HD uploads) // So this function will find the highest res image available... // Ref: https://stackoverflow.com/a/20655623 diff --git a/wp-content/plugins/html-forms/src/functions.php b/wp-content/plugins/html-forms/src/functions.php index 501fa9bd..240f63c5 100644 --- a/wp-content/plugins/html-forms/src/functions.php +++ b/wp-content/plugins/html-forms/src/functions.php @@ -2,7 +2,6 @@ use HTML_Forms\Form; use HTML_Forms\Submission; -use WP_Post; /** * @param $form_id_or_slug int|string|WP_Post diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/play.svg b/wp-content/themes/physioassist/resources/assets/images/icons/play.svg new file mode 100644 index 00000000..fdb4a41c --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/play.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl index 753d4970..a500d6a1 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/utilities.styl @@ -2,8 +2,12 @@ padding-top: 0 !important padding-bottom: 0 !important -.indent-content, .layout-indented - constrain(padding-left, 7.5vw) +.pt0 + padding-top: 0 !important +.pb0 + padding-bottom: 0 !important .vertical-spacing vertical-spacing() + +//.indent-content // See sections.styl diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/forms.styl b/wp-content/themes/physioassist/resources/assets/styles/components/forms.styl index 463690d3..37c58a7e 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/forms.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/forms.styl @@ -1,15 +1,57 @@ -::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: #383838; -} -::-moz-placeholder { /* Firefox 19+ */ - color: #383838; -} -:-ms-input-placeholder { /* IE 10+ */ - color: #383838; -} -:-moz-placeholder { /* Firefox 18- */ - color: #383838; -} +$placeholder-color = #7f8999 +$border-color = #7f8999 + +::-webkit-input-placeholder /* Chrome/Opera/Safari */ + color: $placeholder-color +::-moz-placeholder /* Firefox 19+ */ + color: $placeholder-color +:-ms-input-placeholder /* IE 10+ */ + color: $placeholder-color +:-moz-placeholder /* Firefox 18- */ + color: $placeholder-color + +input, textarea + font-size: 16px + font-family: $font + outline: none + +input[type="text"], input[type="email"] + appearance: none + border: none + padding: 0.5em 0 + border-bottom: 3px solid $border-color + width: 100% + +textarea + border: 3px solid $border-color + width: 100% + min-height: 200px + padding: 1em + +input[type="submit"] + appearance: none + cursor: pointer + border: none + background-color: #1f8ccc + color: #fff + font-size: 18px + font-weight: 700 + text-transform: uppercase + padding: 0.75em 3em + + &:hover + opacity: 0.85 + +// HTML Forms Plugin styling +.hf-message + margin: 2em 0 + border: 2px solid + padding: 1em + background-color: $colors.light-grey + + &-success + background-color: #e8f5e9 + color: #4caf50 /** Search form */ diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl index e8f838af..bfe16d8c 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl @@ -23,9 +23,12 @@ &:hover, &.current_page_parent, &.current_page_item a border-color: currentColor - // Home page is the exception - don't underline "home" when on home page... - &.menu-item-home a - border-color: transparent + + // Home page is the exception - don't underline "home" when on home page... + &.menu-item-home.current_page_item a + border-color: transparent + &:hover + border-color: currentColor // Still underline on hover though +below(1500px) diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/text.styl b/wp-content/themes/physioassist/resources/assets/styles/components/text.styl index d4d97719..835ff243 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/text.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/text.styl @@ -1,9 +1,9 @@ // Default styling for text blocks // Applied to .elementor-widget-container so Elemntor editor settings can override this setting .elementor-widget-text-editor .elementor-widget-container - horizontal-spacing(10vw) - padding-top: 40px - padding-bottom: 40px + //horizontal-spacing(10vw) + //padding-top: 40px + //padding-bottom: 40px //p // max-width: 400px diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl index 534e1927..b81969db 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl @@ -3,5 +3,40 @@ flex-direction: row-reverse .layout-squares - // ToDo... + padding: 0 !important + // Middle align content in columns + .elementor-column .elementor-column-wrap + align-items: center + + // Text block overrides + .text-block + vertical-spacing(2vw) + max-width: 525px + margin: 0 auto + + +.indent-content, // Used by blog and other non-elementor pages +.layout-indented .elementor-row + constrain(padding-left, 7.5vw) + +// Article layout (long form text - eg. Clinical page) +.layout-article + // Bottom align text (relevant for first section with image) + //.elementor-column:first-of-type .elementor-widget-wrap + // display: flex + // align-items: flex-end + + .text-block + horizontal-spacing(7.5vw) + + +below(1100px) + .elementor-row + flex-wrap: wrap + flex-direction: column-reverse + + .elementor-column + width: 100% + + &:not(:first-of-type) // Using first-of-type instead of last-of-type due to flexbox direction reversal + margin-bottom: 4vw diff --git a/wp-content/themes/physioassist/resources/assets/styles/pages/contact.styl b/wp-content/themes/physioassist/resources/assets/styles/pages/contact.styl new file mode 100644 index 00000000..4585173a --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/pages/contact.styl @@ -0,0 +1,27 @@ +.contact-address + min-width: 280px + margin-bottom: 2em + +.contact-form + margin-top: 2em + + &-wrapper + max-width: 835px + + &-cols + display: flex + flex-wrap: wrap + justify-content: space-between + + &-col + flex-basis: 46% + input + margin-bottom: 1.5em + + &-buttons + text-align: right + margin-top: 0.5em + + label, textarea + display: block + margin-bottom: 0.5em diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/background-image.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/background-image.styl new file mode 100644 index 00000000..4f944453 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/background-image.styl @@ -0,0 +1,8 @@ +.bg-image + background-size: cover + background-repeat: no-repeat + background-position: center + +// Ensure full height on element so the image always covers the full area +.elementor-widget-physioassist-bg-image, .elementor-widget-container, .bg-image + height: 100% diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl index c69b7cd7..909fb983 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl @@ -1,12 +1,9 @@ // Text block widget (Elementor defaults) // Padding is applied here so it can be overridden by Elementor -.elementor-widget-physioassist-text .elementor-widget-container - horizontal-spacing(5vw) - vertical-spacing() +//.elementor-widget-physioassist-text .elementor-widget-container +// horizontal-spacing(5vw) .text-block - max-width: 525px - margin: 0 auto &-subtitle font-smoothing() @@ -37,8 +34,12 @@ &-body color: $colors.text font-weight: 400 - margin-top: 40px + margin-top: 2.5em + + li + margin-bottom: 0.5em &-cta display: block - margin-top: 30px + margin-top: (30/14)em + cursor: pointer // may not always have href (eg. for lightbox triggers) diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl index e64f0001..87fa506d 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl @@ -1,11 +1,9 @@ .video-carousel - padding: 0 80px &-item cursor: pointer text-align: center margin: 0 20px - outline: none &-image display: block @@ -19,9 +17,12 @@ right: 0 bottom: 0 left: 0 - background: rgba(#000, 0.2) + background: rgba(#000, 0.3) url('../images/icons/play.svg') center no-repeat + background-size: 13% + transition: background-size 0.2s ease-out - // Todo: Add play icon on image + &:hover:before + background-size: 14.5% &-title @@ -36,8 +37,20 @@ color: $colors.sub-headings - // Slick overrides - .slick-arrow +// Slick overrides +.slick-slider + padding: 0 80px + + +below(768px) + padding: 0 60px + +below(500px) + padding: 0 40px + + + .slick-slide + outline: none + + .slick-arrow, .slick-arrow:focus width: auto background: $colors.light-grey border-radius: 50% @@ -46,14 +59,24 @@ width: 1.25em height: @width text-align: center + transition: all 0.2s ease-out + + +below(768px) + font-size: 45px + +below(500px) + font-size: 35px &:before display: inline-block color: $colors.headings font-size: 1em + opacity: 1 + transition: inherit &:hover - background: darken($colors.light-grey, 5%) + background: $colors.headings + &:before + color: #fff .slick-prev diff --git a/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php index 23cb1489..afcada77 100644 --- a/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php +++ b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php @@ -4,6 +4,14 @@ 'slidesToShow' => 2, 'slidesToScroll' => 1, 'infinite' => true, + 'responsive' => [ + [ + 'breakpoint' => 768, + 'settings' => [ + 'slidesToShow' => 1 + ] + ], + ] ]; $slick = json_encode($settings); -- 2.39.5