Add carousel for latest books.

app/controllers/FrontPage.php

@@ -62,12 +62,9 @@ class FrontPage extends Controller
             get_theme_mod('pb_front_page_catalog_title');
     }
 
-    public static function latestBooks($offset = null)
+    public static function latestBooks($page = 1, $per_page = 3)
     {
-        $path = ($offset) ?
-            "/wp-json/pressbooks/v2/books?per_page=3&page=$offset" :
-            '/wp-json/pressbooks/v2/books?per_page=3';
-        $books = wp_remote_get(network_home_url($path));
+        $books = wp_remote_get(network_home_url("/wp-json/pressbooks/v2/books?per_page=$per_page&page=$page"));
         $books = json_decode($books['body'], true);
         return $books;
     }

app/setup.php

@@ -104,7 +104,7 @@ add_action('widgets_init', function () {
     $config = [
         'before_widget' => '<section class="widget %1$s %2$s">',
         'after_widget'  => '</section>',
-        'before_title'  => '<h3>',
+        'before_title'  => '<h3 class="tc ttu">',
         'after_title'   => '</h3>'
     ];
     register_sidebar([

package.json

@@ -128,6 +128,7 @@
   },
   "dependencies": {
     "jquery": "1.12.4 - 3",
+    "slick-carousel": "^1.7.1",
     "tachyons-sass": "~4.7",
     "wpapi": "^1.1.2"
   }

resources/assets/scripts/main.js

@@ -1,5 +1,6 @@
 // import external dependencies
 import 'jquery';
+import 'slick-carousel';
 
 // import local dependencies
 import Router from './util/Router';

resources/assets/scripts/routes/home.js

@@ -3,37 +3,63 @@ const WPAPI = require( 'wpapi' );
 export default {
   init() {
     // JavaScript to be fired on the home page
+    let books = $('.books');
     let pb = new WPAPI({ endpoint: 'http://pressbooks.dev/wp-json' });
     pb.books = pb.registerRoute( 'pressbooks/v2', '/books/' );
-    const total = parseInt($('.navigation').attr('data-total'));
-    $('.latest-books .navigation .next, .latest-books .navigation .previous').live('click', (event) => {
-      event.preventDefault();
-      const page = parseInt($(event.currentTarget).attr('data-page'));
-      pb.books().perPage(3).page(page).then(function(data) {
-        let books = '', nav = '';
-        data.forEach((book) => {
-          books = books + `<div class="book">
-            <a class="subject" href="">Fiction</a>
-            <a class="title" href="${book.link}">${book.metadata.name}</a>
-            <a class="read-more" href="${book.link}">About this book &rarr;</a>
-          </div>`;
+
+    function loadNextPage() {
+      let nextpage = books.attr('data-next-page');
+      if (typeof nextpage !== typeof undefined && nextpage !== false) {
+        const total = parseInt($('.books').attr('data-total-pages'));
+        const page = parseInt($('.books').attr('data-next-page'));
+        pb.books().perPage(3).page(page).then(function(data) {
+          data.forEach((book) => {
+            books.slick('slickAdd', `<div class="book w-100">
+              <p class="subject tc ma0"><a href="">Fiction</a></p>
+              <p class="title tc ma0"><a href="${book.link}">${book.metadata.name}</a></p>
+              <p class="read-more tl ma0"><a href="${book.link}">About this book &rarr;</a></p>
+            </div>`); // TODO Localize
+          });
+          if (page < total) {
+            books.attr('data-next-page', page + 1);
+          } else {
+            books.removeAttr('data-next-page');
+          }
+        }).catch(function(err) { // TODO handle error
+          console.error(err); //  eslint-disable-line
         });
-        $('.books').html(books);
-        if (page > 1 && page < total) {
-          nav = nav + `<a class="previous f1" data-page="${page - 1}" href="/page/${page - 1}/">&larr;</a>
-            <a class="next f1" data-page="${page + 1}" href="/page/${page + 1}/">&rarr;</a>`;
-        } else if (page > 1 && page === total) {
-          nav = nav + `<a class="previous f1" data-page="${page - 1}" href="/page/${page - 1}/">&larr;</a>`;
-        } else {
-          nav = nav + `<a class="next f1" data-page="${page + 1}" href="/page/${page + 1}/">&rarr;</a>`;
-        }
-        $('.latest-books .navigation').html(nav);
-      }).catch(function(err) {
-        console.error(err); // eslint-disable-line
-      });
+      }
+    }
+
+    books.on('init', () => {
+      loadNextPage();
+    })
+
+    books.slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      infinite: false,
+      mobileFirst: true,
+      prevArrow: '.latest-books .navigation .previous',
+      nextArrow: '.latest-books .navigation .next',
+      responsive: [
+        {
+          breakpoint: 960,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 3,
+          },
+        },
+      ],
+      variableWidth: true,
     });
+
+    books.on('afterChange', (slick, currentSlide) => {
+      if((parseInt($('.slick-active:last').attr('data-slick-index')) + 1) === currentSlide.slideCount) {
+        loadNextPage(true);
+      }
+    })
   },
   finalize() {
-    // JavaScript to be fired on the home page, after the init JS
   },
 };

resources/assets/styles/components/_buttons.scss

@@ -22,6 +22,44 @@
     background: $white;
     color: $brand-primary;
   }
+
+  &.button-wide {
+    width: 305px;
+  }
+
+  &.button-outline {
+    background: $white;
+    color: $brand-primary;
+
+    &:hover,
+    &:focus {
+      background: $brand-primary;
+      color: $white;
+    }
+  }
+
+  &.button-secondary {
+    border: 2px solid $brand-secondary;
+    background: $brand-secondary;
+    color: $white;
+
+    &:hover,
+    &:focus {
+      background: $white;
+      color: $brand-secondary;
+    }
+
+    &.button-outline {
+      background: $white;
+      color: $brand-secondary;
+
+      &:hover,
+      &:focus {
+        background: $brand-secondary;
+        color: $white;
+      }
+    }
+  }
 }
 
 @media (min-width: $medium) {

resources/assets/styles/components/_grid.scss

@@ -3,4 +3,5 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  padding: 0 7.5px;
 }

resources/assets/styles/layouts/_header.scss

@@ -3,6 +3,7 @@
 
   .container {
     height: 560px;
+    max-width: 1440px;
   }
 
   .toggle-menu {
@@ -123,9 +124,9 @@
 
     .primary-navigation {
       top: 40px;
-      max-width: 1440px;
       height: 40px;
-      margin-left: 0;
+      max-width: 1440px;
+      margin: 0 auto;
 
       a {
         display: inline-block;

resources/assets/styles/layouts/_pages.scss

@@ -1,19 +1,11 @@
 .home {
   .block {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 12.5px;
-    width: 100%;
     height: 445px;
     background-color: $white;
 
     h3 {
       font-size: em(30);
       font-weight: 600;
-      text-align: center;
-      text-transform: uppercase;
       letter-spacing: 2px;
       line-height: (36/30);
       color: $brand-primary;
@@ -29,40 +21,44 @@
       }
     }
 
-    p {
+    .widget p {
       font-size: em(16);
       line-height: (32/16);
-      text-align: center;
-    }
-
-    .inside {
-      width: 100%;
-      text-align: center;
     }
 
     &.latest-books {
       box-shadow: unset;
-      width: 100%;
       height: auto;
+      padding-bottom: 50px;
+
+      h3 {
+        margin-top: 70px;
+      }
 
       .inside {
-        width: 100%;
+        padding: 0;
+      }
+
+      .navigation {
+        a {
+          color: $brand-secondary;
+
+          &.slick-disabled {
+            opacity: 0;
+          }
+        }
       }
     }
 
     .books {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-
-      .book {
-        width: 367px;
+      .book,
+      .slick-slide {
+        width: 100vw;
         height: 386px;
-        margin: 113px 30px 0;
+        margin: 45px 0 0;
         padding: 0 29.5px;
         border: solid 2px $brand-secondary;
         background-color: $brand-secondary;
-        // transition: 0.4s all;
 
         a {
           font-family: $font-family-sans-serif;
@@ -71,26 +67,19 @@
         }
 
         .subject {
-          display: block;
           height: 91px;
-          margin-top: 22px;
+          margin-top: 24px;
           font-size: em(24);
-          text-align: center;
         }
 
         .title {
-          display: block;
           height: 329px - 115px;
           font-size: em(30);
           font-weight: 500;
-          text-align: center;
         }
 
         .read-more {
-          display: block;
-          height: auto;
           font-size: em(18);
-          text-align: left;
         }
       }
     }
@@ -182,6 +171,29 @@
         top: 2020px;
       }
     }
+
+    .block.latest-books {
+      width: 100%;
+
+      .inside {
+        width: 100%;
+      }
+
+      .books {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .book,
+      .slick-slide {
+        width: 300px;
+        margin-right: 30px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
   }
 }
 
@@ -198,6 +210,25 @@
         top: 2150px;
       }
     }
+
+    .block.latest-books {
+      width: 1200px;
+      margin-bottom: 0;
+
+      .inside {
+        width: 100%;
+      }
+
+      .book,
+      .slick-slide {
+        width: 367px;
+        margin-right: 50px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
   }
 }
 

resources/assets/styles/main.scss

@@ -9,7 +9,7 @@
  * Prefix your imports with `~` to grab from node_modules/
  * @see https://github.com/webpack-contrib/sass-loader#imports
  */
-// @import "~some-node-module";
+@import "~slick-carousel/slick/slick";
 
 /** Import theme styles */
 @import "common/functions";

resources/views/front-page.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
   @if($block_count === 0)
-    <div class="block block-1">
+    <div class="block block-1 flex flex-column items-center justify-center p-0 w-100">
       <div class="inside">
         <h3>{{ __('About Pressbooks', 'aldine') }}</h3>
         <p>{{ __('Pressbooks is easy-to-use book writing software that lets you create a book in all the formats you need to publish.', 'aldine')}}</p>
@@ -10,8 +10,8 @@
     </div>
   @elseif($block_count < 4)
     @for($i = 0; $i < $block_count; $i++)
-      <div class="block block-{{ $i + 1 }}">
-        <div class="inside">
+      <div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
+        <div class="inside tc">
           @php(dynamic_sidebar($blocks[$i]))
         </div>
       </div>
@@ -19,16 +19,16 @@
   @elseif($block_count === 4)
     <div class="one-two">
       @for($i = 0; $i < 2; $i++)
-        <div class="block block-{{ $i + 1 }}">
-          <div class="inside">
+        <div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
+          <div class="inside tc">
             @php(dynamic_sidebar($blocks[$i]))
           </div>
         </div>
       @endfor
     </div>
     @for($i = 2; $i < $block_count; $i++)
-      <div class="block block-{{ $i + 1 }}">
-        <div class="inside">
+      <div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
+        <div class="inside tc">
           @php(dynamic_sidebar($blocks[$i]))
         </div>
       </div>

resources/views/partials/front-page-catalog.blade.php

@@ -1,22 +1,27 @@
-<div class="block latest-books">
+<div class="block latest-books w-100">
   <div class="inside">
-    <h3>{{ $latest_books_title }}</h3>
-    <div class="books">
-      @foreach( FrontPage::latestBooks( $current_page ) as $book )
-        <div class="book">
-            <a class="subject" href="">Fiction</a>
-            <a class="title" href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
-            <a class="read-more" href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
+    <h3 class="tc ttu">{{ $latest_books_title }}</h3>
+    <div class="books flex flex-column justify-center flex-row-m justify-between-m" data-total-pages="{{ $total_pages }}" data-next-page="2">
+      @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
+        <div class="book w-100">
+          <p class="subject tc ma0">
+            <a href="">Fiction</a>
+          </p>
+          <p class="title tc ma0">
+            <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
+          </p>
+          <p class="read-more tl ma0">
+            <a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
+          </p>
         </div>
       @endforeach
     </div>
-    <nav class="navigation mt2" data-total="{{ $total_pages }}">
-      @if($previous_page)
-        <a class="previous f1" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
-      @endif
-      @if($next_page)
-        <a class="next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
-      @endif
+    <nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}">
+      <a class="previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
+      <a class="next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
     </nav>
+    <div class="catalog-link tc">
+      <a class="button button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
+    </div>
   </div>
 </div>

yarn.lock

@@ -3221,7 +3221,7 @@ jpegtran-bin@^3.0.0:
     bin-wrapper "^3.0.0"
     logalot "^2.0.0"
 
-"jquery@1.12.4 - 3":
+"jquery@1.12.4 - 3", jquery@>=1.7.2:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
 
@@ -5608,6 +5608,12 @@ slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
 
+slick-carousel@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.7.1.tgz#51f5489bbb52212542ccbe9f42689f818bd29ed2"
+  dependencies:
+    jquery ">=1.7.2"
+
 sntp@1.x.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"