Merge branch 'release/1.10.3'

maithemewp · May 6, 2019 · caf1244 · caf1244
2 parents 4e12170 + 57b3529
commit caf1244
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 42 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.10.3 (5/6/19)
+* Changed: Better support for older Edge and Firefox when using background images on entries (aspect ratio boxes).
+* Fixed: Content overlay issue on mobile when using background images on entries (aspect ratio boxes).
+* Fixed: Header sticking too early when logged out and not using Before Header widget area.
+
 ## 1.10.2 (5/3/19)
 * Fixed: Logo and menu alignment when using centered logo via left and right header navigation.
 

diff --git a/assets/css/mai-theme.css b/assets/css/mai-theme.css
@@ -39,6 +39,7 @@
 	- Header Trigger
 	- Site Header
 		- Sticky Header
+		- Shrink Header
 		- Title Area
 		- Header Content
 	- Site Navigation
@@ -1724,7 +1725,9 @@ body.has-boxed-site-container {
 
 .aspect-ratio[style*="--aspect-ratio"] {
 	position: relative;
-	display: block; /* can't be flex container or breaks in older Edge/FF */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
 }
 
 .aspect-ratio[style*="--aspect-ratio"]::before {
@@ -1736,15 +1739,11 @@ body.has-boxed-site-container {
 	padding-bottom: calc( 100% / (var(--aspect-ratio)) );
 }
 
+/* we need outer because padding bottom on flex child element breaks in older Edge (<=16) (18 is current at this time) / FF (<=59) (66 is current at this time) */
+.aspect-outer,
 .aspect-inner {
 	width: 100%;
 	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	padding: inherit;
 }
 
 /* ## Page Builders
@@ -2042,7 +2041,9 @@ input[name="post_password"] {
 }
 
 .mai-slider .slick-list {
-	-ms-flex: 1 1 100%;-webkit-box-flex: 1;flex: 1 1 100%;
+	-ms-flex: 1 1 100%;
+	-webkit-box-flex: 1;
+	flex: 1 1 100%;
 	max-width: 100%;
 }
 
@@ -2052,14 +2053,23 @@ input[name="post_password"] {
 }
 
 .mai-slider .slick-track {
-	display: -ms-flexbox;display: -webkit-box;display: flex;
-	-ms-flex: 0 1 auto;-webkit-box-flex: 0;flex: 0 1 auto;
+	display: -ms-flexbox;
+	display: -webkit-box;
+	display: flex;
+	-ms-flex: 0 1 auto;
+	-webkit-box-flex: 0;
+	flex: 0 1 auto;
 	height: 100%;
 }
 
-.mai-slider.slick-initialized .slick-slide {
-	display: -ms-flexbox;display: -webkit-box;display: flex;
-	-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;
+.mai-slider.slick-initialized .slick-slide:not(.aspect-ratio) {
+	display: -ms-flexbox;
+	display: -webkit-box;
+	display: flex;
+	-ms-flex-direction: column;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	flex-direction: column;
 }
 
 .mai-slider .slick-slide {
@@ -2170,8 +2180,12 @@ input[name="post_password"] {
 .slick-slider {
 	position: relative;
 	display: block;
-	-webkit-box-sizing: border-box;box-sizing: border-box;
-	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 	-webkit-touch-callout: none;
 	-khtml-user-select: none;
 	-ms-touch-action: pan-y;touch-action: pan-y;
@@ -2198,7 +2212,8 @@ input[name="post_password"] {
 
 .slick-slider .slick-track,
 .slick-slider .slick-list {
-	-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .slick-track {
@@ -2240,7 +2255,7 @@ input[name="post_password"] {
 	pointer-events: none;
 }
 
-.slick-initialized .slick-slide {
+.slick-initialized .slick-slide:not(.aspect-ratio) {
 	display: block;
 }
 
@@ -2265,9 +2280,17 @@ input[name="post_password"] {
 .slick-next {
 	position: absolute;
 	top: 50%;
-	-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);-ms-flex: 0 0 48px;-webkit-box-flex: 0;flex: 0 0 48px;
+	-webkit-transform: translate(0, -50%);
+	-ms-transform: translate(0, -50%);
+	transform: translate(0, -50%);
+	-ms-flex: 0 0 48px;
+	-webkit-box-flex: 0;
+	flex: 0 0 48px;
 	max-width: 48px;
-	-webkit-align-self: center;-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center;
+	-webkit-align-self: center;
+	-ms-flex-item-align: center;
+	-ms-grid-row-align: center;
+	align-self: center;
 	display: block;
 	width: 48px;
 	height: 48px;
@@ -2354,7 +2377,9 @@ input[name="post_password"] {
 }
 
 .slick-slide.testimonial .entry-header {
-	-ms-flex-order: 2;-webkit-box-ordinal-group: 3;order: 2;
+	-ms-flex-order: 2;
+	-webkit-box-ordinal-group: 3;
+	order: 2;
 }
 
 .slick-slide.column.testimonial .entry-content {
@@ -2637,7 +2662,6 @@ ul.wp-block-gallery {
 #header-trigger-wrap {
 	position: relative;
 	height: 0;
-	margin-bottom: var(--header-spacer);
 }
 
 #header-trigger {
@@ -2649,15 +2673,15 @@ ul.wp-block-gallery {
 
 @media only screen and (min-width: 601px) and (max-width: 782px) {
 
-	#header-trigger {
+	.admin-bar #header-trigger {
 		top: -46px;
 	}
 
 }
 
 @media only screen and (min-width: 783px) {
 
-	#header-trigger {
+	.admin-bar #header-trigger {
 		top: -32px;
 	}
 
@@ -2838,6 +2862,10 @@ ul.wp-block-gallery {
 
 }
 
+.has-shrink-header {
+	margin-top: var(--header-spacer);
+}
+
 /* ## Title Area
 --------------------------------------------- */
 

diff --git a/assets/css/mai-theme.min.css b/assets/css/mai-theme.min.css
diff --git a/assets/js/mai-scroll.js b/assets/js/mai-scroll.js
@@ -151,15 +151,15 @@ document.addEventListener( 'DOMContentLoaded', function() {
 					return;
 				}
 				// Slight tolerance since we have position:sticky; fallback. Less jarring.
-				if ( percentage > 5 ) {
+				if ( percentage > 10 ) {
 					stick();
 				} else {
 					unstick();
 				}
 			},
 			outside: (instance, percentage, props) => {
 				// Negative percentage is space above the header. Slight tolerance since we have position:sticky; fallback. Less jarring.
-				if ( percentage <= 5 ) {
+				if ( percentage <= 10 ) {
 					if ( afterHeader ) {
 						afterHeader = false;
 					}
@@ -183,7 +183,6 @@ document.addEventListener( 'DOMContentLoaded', function() {
 	// Get current scrollTop value.
 	function getScrollTop() {
 		return (document.scrollingElement || document.documentElement).scrollTop;
-		// return Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop );
 	}
 
 	// Add scroll class.

diff --git a/assets/js/mai-scroll.min.js b/assets/js/mai-scroll.min.js
diff --git a/lib/classes/class-col.php b/lib/classes/class-col.php
@@ -87,7 +87,7 @@ function get_col() {
 		// Trim because testing returned string of nbsp.
 		$this->content = mai_get_processed_content( trim( $this->content ) );
 
-		$aspect_inner = $image = $overlay = '';
+		$aspect_html = $image = $overlay = '';
 
 		$attributes = array(
 			'class' => $this->get_classes(),
@@ -99,10 +99,10 @@ function get_col() {
 
 		// Get the align classes. A lof of this taken from grid.
 		if ( $this->args['image'] && $this->content ) {
-			// Build aspect ratio inner markup.
+			// Build aspect ratio inner markup. Can't be flex container or breaks in older Edge (<=16) (18 is current at this time) / FF (<=59) (66 is current at this time).
 			$aspect_attributes          = array( 'class' => 'aspect-inner' );
 			$aspect_attributes['class'] = mai_add_entry_align_classes( $aspect_attributes['class'], $this->args, $this->get_direction() );
-			$aspect_inner               = sprintf( '<div %s>', genesis_attr( 'aspect-inner', $aspect_attributes, $this->args ) );
+			$aspect_html                = sprintf( '<div class="aspect-outer"><div %s>', genesis_attr( 'aspect-inner', $aspect_attributes, $this->args ) );
 		} else {
 			$attributes['class'] = mai_add_entry_align_classes( $attributes['class'], $this->args, $this->get_direction() );
 		}
@@ -204,12 +204,12 @@ function get_col() {
 		 */
 		return sprintf( '<div %s>%s%s%s%s%s%s</div>',
 			genesis_attr( 'flex-col', $attributes, $this->args ),
-			$aspect_inner,
+			$aspect_html,
 			$image,
 			$overlay,
 			$this->content,
 			$bg_link,
-			$aspect_inner ? '</div>' : ''
+			$aspect_html ? '</div></div>' : ''
 		);
 	}
 

diff --git a/lib/classes/class-grid.php b/lib/classes/class-grid.php
@@ -1102,7 +1102,7 @@ function get_row_wrap_close() {
 	 */
 	function get_entry_open( $object, $has_bg_image ) {
 
-		$aspect_inner = '';
+		$aspect_html = '';
 
 		// Set the entry classes.
 		$attributes = array(
@@ -1111,10 +1111,10 @@ function get_entry_open( $object, $has_bg_image ) {
 
 		// Get the align classes.
 		if ( $this->is_bg_image() ) {
-			// Build aspect ratio inner markup.
+			// Build aspect ratio inner markup. Can't be flex container or breaks in older Edge (<=16) (18 is current at this time) / FF (<=59) (66 is current at this time).
 			$aspect_attributes          = array( 'class' => 'aspect-inner' );
 			$aspect_attributes['class'] = mai_add_entry_align_classes( $aspect_attributes['class'], $this->args, $this->get_direction() );
-			$aspect_inner               = sprintf( '<div %s>', genesis_attr( 'aspect-inner', $aspect_attributes, $this->args ) );
+			$aspect_html                = sprintf( '<div class="aspect-outer"><div %s>', genesis_attr( 'aspect-inner', $aspect_attributes, $this->args ) );
 		} else {
 			$attributes['class'] = mai_add_entry_align_classes( $attributes['class'], $this->args, $this->get_direction() );
 		}
@@ -1181,7 +1181,7 @@ function get_entry_open( $object, $has_bg_image ) {
 		 * Main entry col wrap.
 		 * If we use genesis_attr( 'entry' ) then it resets the classes.
 		 */
-		return sprintf( '<div %s>%s', genesis_attr( 'flex-entry', $attributes, $this->args ), $aspect_inner );
+		return sprintf( '<div %s>%s', genesis_attr( 'flex-entry', $attributes, $this->args ), $aspect_html );
 	}
 
 	/**
@@ -1190,8 +1190,8 @@ function get_entry_open( $object, $has_bg_image ) {
 	 * @return  string|HTML
 	 */
 	function get_entry_wrap_close() {
-		$aspect_inner = $this->is_bg_image() ? '</div>' : '';
-		return sprintf( '%s</div>', $aspect_inner );
+		$aspect_html = $this->is_bg_image() ? '</div></div>' : '';
+		return sprintf( '%s</div>', $aspect_html );
 	}
 
 	/**

diff --git a/lib/functions/display.php b/lib/functions/display.php
@@ -178,11 +178,11 @@ function mai_do_archive_image( $location, $image_size ) {
 			$attributes = array(
 				'class' => 'aspect-inner column middle-xs center-xs text-xs-center',
 			);
-			// Build aspect ratio inner markup.
-			printf( '<div %s>', genesis_attr( 'aspect-inner', $attributes, array() ) );
+			// Build aspect ratio inner markup. Can't be flex container or breaks in older Edge (<=16) (18 is current at this time) / FF (<=59) (66 is current at this time).
+			printf( '<div class="aspect-outer"><div %s>', genesis_attr( 'aspect-inner', $attributes, array() ) );
 		};
 		$entry_footer = function() {
-			echo '</div>';
+			echo '</div></div>';
 		};
 
 		// Add the entry image as an inline background image.