Merge pull request #2264 from Automattic/fix/altofocus-infinity-button

Fix older posts button positioning after loading posts.

altofocus/assets/js/grid.js

@@ -93,7 +93,7 @@
 	/**
 	 * Triggers re-layout on Isotope wrapper after infinite scroll has loaded new posts
 	 */
-	function reLayoutIsotope() {
+	function reLayoutIsotope( loadedPosts ) {
 
 		// Set array for newly added post IDs
 		var newPostIds = [];
@@ -103,7 +103,7 @@
 		if ( typeof loadedPosts !== 'undefined' ) {
 
 			// Create post IDs from IS results and push into post ID array
-			$.each( loadedPosts, function( index, value ) {
+			$.each( JSON.parse(loadedPosts), function( index, value ) {
 
 				var $appendedPost = '#post-'+ value;
 
@@ -171,7 +171,11 @@
 			/**
 			 * Relayout Isotope on post-load (Infinite Scroll)
 			 */
-			$body.on( 'post-load', reLayoutIsotope );
+			$body.on( 'post-load', function() {
+				var loadedPosts = $('#infinite-ids').attr('data');
+				reLayoutIsotope( loadedPosts );
+				$('#infinite-ids').remove();
+			});
 
 			/**
 			 * Window calls

altofocus/assets/stylesheets/components/posts/_archives.scss

@@ -566,7 +566,7 @@
 					.post-thumbnail img {
 
 						max-width: calc( 100% - #{($gutter * 2)} );
-						max-height: calc( 100% - #{( $gutter * 2 )};
+						max-height: calc( 100% - #{( $gutter * 2 )});
 					}
 
 					&.grid-item-landscape {
@@ -670,7 +670,7 @@
 					.post-thumbnail img {
 
 						max-width: calc( 100% - #{($gutter * 3)} );
-						max-height: calc( 100% - #{( $gutter * 3 )};
+						max-height: calc( 100% - #{( $gutter * 3 )});
 					}
 
 					&.grid-item-landscape {

altofocus/assets/stylesheets/layout/_isotope-grid.scss

@@ -88,7 +88,7 @@
 
 		.site-main {
 
-			margin: 0 auto calc(#{ $baseline * 4 } + #{ $gutter * 1.5 };
+			margin: 0 auto calc(#{ $baseline * 4 } + #{ $gutter * 1.5 });
 
 			/* fluid 5 columns */
 			.grid-sizer,

altofocus/assets/stylesheets/shared/_infinitescroll.scss

@@ -18,10 +18,12 @@
 	clear: both;
 	display: block;
 	padding: $baseline 10%;
-	position: absolute;
+	position: relative;
 	text-align: center;
 	width: 100%;
 	z-index: 1;
+	float: left;
+	top: 100%;
 
 	span {
 

altofocus/assets/stylesheets/style.scss

@@ -4,7 +4,7 @@ Theme URI: https://wordpress.com/themes/altofocus/
 Author: Automattic, Inc
 Author URI: http://automattic.com
 Description: AltoFocus is a theme for photographers, artists, and other creative types in search of a simple and easy way to display their work.
-Version: 1.0.0-wpcom
+Version: 1.0.9-wpcom
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: altofocus

altofocus/inc/extras.php

@@ -105,8 +105,8 @@ function altofocus_post_classes( $classes ) {
 		}
 
 		// Get featured content settings and options
-		$featured_options    = get_option( 'featured-content' );
-		$featured_tag_name   = $featured_options[ 'tag-name' ];
+		$featured_options  = get_option( 'featured-content' );
+		$featured_tag_name = isset( $featured_options['tag-name'] ) ? $featured_options['tag-name'] : '';
 
 		if ( ! empty( $featured_tag_name ) && has_tag( $featured_tag_name, $post->ID ) ) {
 

altofocus/inc/jetpack.php

@@ -175,10 +175,7 @@ function altofocus_infinite_scroll_render() {
 			$loaded_post_IDs[] = get_the_ID();
 		}
 	} ?>
-	<script>
-		// Put returned posts' IDs in to an array
-		var loadedPosts = <?php echo json_encode( $loaded_post_IDs ); ?>;
-	</script>
+	<input type="hidden" data="<?php echo esc_attr( json_encode( $loaded_post_IDs ) ); ?>" id="infinite-ids" />
 <?php
 }