Skip to content

Commit

Permalink
Add Twentyseventeen Infinite Scroll support (#5940)
Browse files Browse the repository at this point in the history 
* Add Twentyseventeen infinite scroll support

* Change font-family. Reorder properties to match WordPress coding standarts

* Add twentyseventeen-rtl.css

* Add check for footer sidebars. Delete empty spaces in css

* Fix visual issues

* Hide mobile link on touch devices. Fix loader and footer on mobile & desktop. Add rtl.css

* Change dark scheme button color. Replace jetpack-social-menu with social menu

* Namespace Twentyseventeen Infinite Scroll functions
  • Loading branch information
@stoyan0v @jeherve
stoyan0v authored and jeherve committed Feb 28, 2017
1 parent d5039f5 commit b46cf65
Show file tree
Hide file tree
Showing 3 changed files with 393 additions and 0 deletions.
168 changes: 168 additions & 0 deletions modules/infinite-scroll/themes/twentyseventeen-rtl.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
.infinite-scroll .pagination {
display: none;
}

.infinite-wrap > article:before,
.infinite-wrap > article:after {
content: "";
display: table;
}

.infinite-wrap > article:after {
clear: both;
}

.infinite-wrap > article {
padding-bottom: 2em;
}

/* Spinner */
.site-main .infinite-loader {
clear: both;
color: currentColor;
height: 42px;
margin-bottom: 3.5em;
}

.blog:not(.has-sidebar) .infinite-loader {
width: 100%;
}

.site-main .infinite-loader .spinner {
right: 50%!important;
}

/* Click-to-load */
#infinite-handle {
clear: both;
margin: 0 7.6923% 2em;
text-align: center;
}

/* Style "Load More" button */
.site-main #infinite-handle span {
background: #1a1a1a;
border-radius: 2px;
color: #fff;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}

#infinite-handle span:hover,
#infinite-handle span:focus {
background: #767676;
}

/* Style "Load More" button when dark color scheme is used */
.colors-dark .site-main #infinite-handle span {
background: #f8f8f8;
border-radius: 2px;
color: #222;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}

.colors-dark #infinite-handle span:hover,
.colors-dark #infinite-handle span:focus {
background: #bbb;
columns: #222;
}

/* Style Infinite Footer */
#infinite-footer {
position: fixed !important;
}

#infinite-footer .container {
background-color: #fff;
border-color: #d1d1d1;
padding: 0 7.6923%;
}

#infinite-footer .blog-info,
#infinite-footer .blog-credits {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
text-align: center;
width: auto;
}

#infinite-footer .blog-info a,
#infinite-footer .blog-credits,
#infinite-footer .blog-credits a {
color: #222222;
}

#infinite-footer .blog-info a:hover,
#infinite-footer .blog-info a:focus,
#infinite-footer .blog-credits a:hover,
#infinite-footer .blog-credits a:focus {
color: #767676;
text-decoration: none;
}

.infinite-scroll #navigation,
.infinite-scroll.neverending .jetpack-mobile-link,
.infinite-scroll.neverending .site-footer {
display: none;
}

/* Shows the footer & mobile link again in case all posts have been loaded */
.infinity-end.neverending .jetpack-mobile-link,
.infinity-end.neverending .site-footer {
display: block;
}

@media screen and (min-width: 44.375em) {
#infinite-handle {
margin: 0 0 1em 0;
text-align: center;
}

.has-sidebar #infinite-handle {
text-align: right;
}

.site-main #infinite-handle span {
display: inline-block;
}
}

@media screen and (min-width: 48em) {
.infinite-wrap > article {
padding-bottom: 4em;
}
}

@media screen and (min-width: 48em) {
#infinite-footer .blog-info,
#infinite-footer .blog-credits {
line-height: 35px;
}

#infinite-footer .blog-info {
font-size: 1.1rem;
}

#infinite-footer .blog-credits {
font-size: 0.9rem;
}

.blog:not(.has-sidebar) .infinite-loader {
float: left;
width: 58%;
}

.site-main .infinite-loader .spinner {
margin-right: -17px;
}
}
168 changes: 168 additions & 0 deletions modules/infinite-scroll/themes/twentyseventeen.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
.infinite-scroll .pagination {
display: none;
}

.infinite-wrap > article:before,
.infinite-wrap > article:after {
content: "";
display: table;
}

.infinite-wrap > article:after {
clear: both;
}

.infinite-wrap > article {
padding-bottom: 2em;
}

/* Spinner */
.site-main .infinite-loader {
clear: both;
color: currentColor;
height: 42px;
margin-bottom: 3.5em;
}

.blog:not(.has-sidebar) .infinite-loader {
width: 100%;
}

.site-main .infinite-loader .spinner {
left: 50%!important;
}

/* Click-to-load */
#infinite-handle {
clear: both;
margin: 0 7.6923% 2em;
text-align: center;
}

/* Style "Load More" button */
.site-main #infinite-handle span {
background: #1a1a1a;
border-radius: 2px;
color: #fff;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}

#infinite-handle span:hover,
#infinite-handle span:focus {
background: #767676;
}

/* Style "Load More" button when dark color scheme is used */
.colors-dark .site-main #infinite-handle span {
background: #f8f8f8;
border-radius: 2px;
color: #222;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}

.colors-dark #infinite-handle span:hover,
.colors-dark #infinite-handle span:focus {
background: #bbb;
columns: #222;
}

/* Style Infinite Footer */
#infinite-footer {
position: fixed !important;
}

#infinite-footer .container {
background-color: #fff;
border-color: #d1d1d1;
padding: 0 7.6923%;
}

#infinite-footer .blog-info,
#infinite-footer .blog-credits {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
text-align: center;
width: auto;
}

#infinite-footer .blog-info a,
#infinite-footer .blog-credits,
#infinite-footer .blog-credits a {
color: #222222;
}

#infinite-footer .blog-info a:hover,
#infinite-footer .blog-info a:focus,
#infinite-footer .blog-credits a:hover,
#infinite-footer .blog-credits a:focus {
color: #767676;
text-decoration: none;
}

.infinite-scroll #navigation,
.infinite-scroll.neverending .jetpack-mobile-link,
.infinite-scroll.neverending .site-footer {
display: none;
}

/* Shows the footer & mobile link again in case all posts have been loaded */
.infinity-end.neverending .jetpack-mobile-link,
.infinity-end.neverending .site-footer {
display: block;
}

@media screen and (min-width: 44.375em) {
#infinite-handle {
margin: 0 0 1em 0;
text-align: center;
}

.has-sidebar #infinite-handle {
text-align: left;
}

.site-main #infinite-handle span {
display: inline-block;
}
}

@media screen and (min-width: 48em) {
.infinite-wrap > article {
padding-bottom: 4em;
}
}

@media screen and (min-width: 48em) {
#infinite-footer .blog-info,
#infinite-footer .blog-credits {
line-height: 35px;
}

#infinite-footer .blog-info {
font-size: 1.1rem;
}

#infinite-footer .blog-credits {
font-size: 0.9rem;
}

.blog:not(.has-sidebar) .infinite-loader {
float: right;
width: 58%;
}

.site-main .infinite-loader .spinner {
margin-left: -17px;
}
}
57 changes: 57 additions & 0 deletions modules/infinite-scroll/themes/twentyseventeen.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<?php
/**
* Infinite Scroll Theme Assets
*
* Register support for Twenty Seventeen.
*/

/**
* Add theme support for infinite scroll
*/
function jetpack_twentyseventeen_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'main',
'render' => 'jetpack_twentyseventeen_infinite_scroll_render',
'footer' => 'content',
'footer_widgets' => jetpack_twentyseventeen_has_footer_widgets(),
) );
}
add_action( 'init', 'jetpack_twentyseventeen_infinite_scroll_init' );

/**
* Custom render function for Infinite Scroll.
*/
function jetpack_twentyseventeen_infinite_scroll_render() {
while ( have_posts() ) {
the_post();
if ( is_search() ) {
get_template_part( 'template-parts/post/content', 'search' );
} else {
get_template_part( 'template-parts/post/content', get_post_format() );
}
}
}

/**
* Custom function to check for the presence of footer widgets or the social links menu
*/
function jetpack_twentyseventeen_has_footer_widgets() {
if ( is_active_sidebar( 'sidebar-2' ) ||
is_active_sidebar( 'sidebar-3' ) ||
has_nav_menu( 'social' ) ) {
return true;
} else {
return false;
}
}

/**
* Enqueue CSS stylesheet with theme styles for Infinite Scroll.
*/
function jetpack_twentyseventeen_infinite_scroll_enqueue_styles() {
if ( wp_script_is( 'the-neverending-homepage' ) ) {
wp_enqueue_style( 'infinity-twentyseventeen', plugins_url( 'twentyseventeen.css', __FILE__ ), array( 'the-neverending-homepage' ), '20161219' );
wp_style_add_data( 'infinity-twentyseventeen', 'rtl', 'replace' );
}
}
add_action( 'wp_enqueue_scripts', 'jetpack_twentyseventeen_infinite_scroll_enqueue_styles', 25 );

0 comments on commit b46cf65

Please sign in to comment.