'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',
'default' => '',
'return_value' => 'disable-vertical-spacing',
'prefix_class' => '', // Will apply return value as a class
+ 'condition' => [
+ 'block_layout!' => 'squares'
+ ]
]
);
$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' );
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')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</a>";
+ echo "<$cta_tag {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</$cta_tag>";
}
echo '</div>';
}
// 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']);
}
+ // 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
use HTML_Forms\Form;
use HTML_Forms\Submission;
-use WP_Post;
/**
* @param $form_id_or_slug int|string|WP_Post
--- /dev/null
+<?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="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 78.7 90.6" style="enable-background:new 0 0 78.7 90.6;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M5.9,0.5l70.9,41.4c2.6,1.5,2.6,5.3,0,6.8L5.9,90.1C3.3,91.6,0,89.7,0,86.7L0,3.9C0,0.9,3.3-1,5.9,0.5z"/>
+</svg>
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
-::-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 */
&: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)
// 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
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
--- /dev/null
+.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
--- /dev/null
+.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%
// 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()
&-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)
.video-carousel
- padding: 0 80px
&-item
cursor: pointer
text-align: center
margin: 0 20px
- outline: none
&-image
display: block
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
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%
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
'slidesToShow' => 2,
'slidesToScroll' => 1,
'infinite' => true,
+ 'responsive' => [
+ [
+ 'breakpoint' => 768,
+ 'settings' => [
+ 'slidesToShow' => 1
+ ]
+ ],
+ ]
];
$slick = json_encode($settings);
projects / physioassist-wordpress.git / commitdiff
