Fix front page catalog.

resources/assets/images/left-arrow.svg

@@ -0,0 +1 @@
+<svg width="25" height="19" viewBox="0 0 25 19" xmlns="http://www.w3.org/2000/svg"><path d="M10.68 16.286l-6.13-6.148h18.82a1.08 1.08 0 0 0 1.075-1.078A1.08 1.08 0 0 0 23.37 7.98H4.55l6.13-6.147c.216-.216.323-.486.323-.755 0-.27-.107-.54-.323-.755a1.037 1.037 0 0 0-1.505 0l-7.958 7.98a1.045 1.045 0 0 0 0 1.51l7.958 8.036c.43.431 1.075.431 1.505 0 .216-.216.323-.485.323-.81 0-.269-.107-.538-.323-.754z" fill="#0B5B75" fill-rule="evenodd"/></svg>

resources/assets/images/right-arrow.svg

@@ -0,0 +1 @@
+<svg width="25" height="19" viewBox="0 0 25 19" xmlns="http://www.w3.org/2000/svg"><path d="M14.66 1.887l6.129 6.148H1.969A1.08 1.08 0 0 0 .896 9.114a1.08 1.08 0 0 0 1.075 1.078h18.819l-6.13 6.148a1.065 1.065 0 0 0-.322.755c0 .27.107.54.323.755.43.431 1.075.431 1.505 0l7.958-7.981c.43-.432.43-1.079 0-1.51L16.165.324a1.037 1.037 0 0 0-1.505 0 1.098 1.098 0 0 0-.323.808c0 .27.107.54.323.755z" fill="#0B5B75" fill-rule="evenodd"/></svg>

resources/assets/scripts/routes/home.js

@@ -3,11 +3,11 @@ const WPAPI = require( 'wpapi' );
 export default {
   init() {
     // JavaScript to be fired on the home page
-    let books = $('.books');
+    // let books = $('.books');
     let pb = new WPAPI({ endpoint: 'http://pressbooks.dev/wp-json' });
     pb.books = pb.registerRoute( 'pressbooks/v2', '/books/' );
 
-    function loadNextPage() {
+    /* function loadNextPage() {
       let nextpage = books.attr('data-next-page');
       if (typeof nextpage !== typeof undefined && nextpage !== false) {
         const total = parseInt($('.books').attr('data-total-pages'));
@@ -29,9 +29,9 @@ export default {
           console.error(err); //  eslint-disable-line
         });
       }
-    }
+    } */
 
-    books.on('init', () => {
+    /* books.on('init', () => {
       loadNextPage();
     })
 
@@ -58,7 +58,7 @@ export default {
       if((parseInt($('.slick-active:last').attr('data-slick-index')) + 1) === currentSlide.slideCount) {
         loadNextPage(true);
       }
-    })
+    }); */
   },
   finalize() {
   },

resources/assets/styles/common/_global.scss

@@ -32,6 +32,14 @@ h2 {
   margin: 0;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 :root {
   --brand-primary: $brand-primary;
   --brand-secondary: $brand-secondary;

resources/assets/styles/components/_buttons.scss

@@ -1,21 +1,23 @@
 .button {
   display: inline-block;
-  width: 250px;
+  width: 15.625rem;
-  height: 60px;
+  height: 3.75rem;
   margin-top: 2em;
-  padding: 1em;
+  padding: 1.2rem;
   border: 2px solid $black;
   border-radius: 3px;
   background: $black;
   font-family: $font-family-sans-serif;
-  font-size: em(16);
+  font-size: 1rem;
   font-weight: 600;
   color: $white;
+  line-height: normal;
   letter-spacing: 2px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: all 0.5s;
+  vertical-align: middle;
 
   &:hover,
   &:focus {
@@ -24,13 +26,13 @@
   }
 
   &.button-small {
-    width: 150px;
+    width: (150/16) * 1rem;
-    height: 40px;
+    height: (40/16) * 1rem;
     padding: 0.5em;
   }
 
   &.button-wide {
-    width: 305px;
+    width: 19.0625rem;
   }
 
   &.button-outline {

resources/assets/styles/components/_grid.scss

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

resources/assets/styles/layouts/_pages.scss

@@ -1,42 +1,27 @@
 .home {
-  .block,
+  .block {
-  .latest-books {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0.78125rem;
+    display: flex;
     height: 445px;
     background-color: $white;
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
 
-    h3 {
-      font-size: em(30);
-      font-weight: 600;
-      letter-spacing: 2px;
-      line-height: (36/30);
-      margin: 0;
-
-      &::before {
-        content: "";
-        display: block;
-        margin: 0 auto 1em;
-        width: 46px;
-        height: 5px;
-        background-color: var(--brand-secondary, $brand-secondary);
-      }
-    }
-
     p {
       font-size: em(16);
       line-height: (32/16);
     }
   }
 
-  .block {
+  .blocks.blocks-2,
-    display: flex;
+  .blocks.blocks-3 {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .blocks.blocks-2 {
     .widget_text:nth-child(2) {
+      margin-right: 0.5rem;
+      margin-left: 0.5rem;
       border: solid 2px var(--brand-primary, $brand-primary);
       box-shadow: unset;
     }
@@ -47,9 +32,13 @@
       color: $white;
       background: var(--brand-secondary, $brand-secondary);
 
-      h3::before {
+      h3 {
+        color: $white;
+
+        &::before {
           background-color: $white;
         }
+      }
 
       .button {
         border-color: $white;
@@ -64,27 +53,64 @@
     }
 
     .widget_text:nth-child(3) {
+      margin-top: 2rem;
+      margin-right: 0.5rem;
+      margin-left: 0.5rem;
       border: solid 2px var(--brand-primary, $brand-primary);
       box-shadow: unset;
     }
   }
 
+  .block,
+  .latest-books {
+    h3 {
+      font-size: em(30);
+      font-weight: 600;
+      color: var(--brand-primary, $brand-primary);
+      letter-spacing: 2px;
+      line-height: (36/30);
+      margin: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        margin: 0 auto 1em;
+        width: 46px;
+        height: 5px;
+        background-color: var(--brand-secondary, $brand-secondary);
+      }
+    }
+  }
+
   .latest-books {
-    box-shadow: unset;
     height: auto;
-    padding-bottom: 0 0 50px;
+    padding: 0 0 50px;
 
     h3 {
-      margin-top: 70px;
+      margin-top: 4.375rem;
+      margin-bottom: 2.8125rem;
+    }
+
+    .track {
+      max-width: 22.9375rem;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 0 0.46875rem;
+    }
+
+    .books {
+      padding: 0;
+      width: 100%;
     }
 
-    .book,
+    .book {
-    .slick-slide {
+      width: 100%;
-      width: 100vw;
+      max-width: 22.9375rem;
-      height: 386px;
+      height: 24.125rem;
-      margin: 45px 0 0;
+      margin: 0 0 2rem;
-      padding: 0 29.5px;
+      padding: 1.5rem 1.85rem 2.1875rem;
-      border: solid 2px;
+      border-style: solid;
+      border-width: 2px;
 
       a {
         font-family: $font-family-sans-serif;
@@ -93,15 +119,15 @@
       }
 
       .subject {
-        height: 91px;
+        height: 4.625rem;
-        margin-top: 24px;
         font-size: em(24);
       }
 
       .title {
-        height: 329px - 115px;
+        height: 13rem;
         font-size: em(30);
         font-weight: 500;
+        line-height: (40/30);
       }
 
       .read-more {
@@ -109,10 +135,14 @@
       }
     }
 
-    .navigation {
+    .previous,
-      a {
+    .next {
-        &.slick-disabled {
+      width: auto;
-          opacity: 0;
+      height: auto;
+
+      svg {
+        path {
+          fill: var(--brand-secondary, $brand-secondary);
         }
       }
     }
@@ -150,22 +180,60 @@
       }
     }
 
+    .blocks.blocks-2 .widget_text:nth-child(2),
+    .blocks.blocks-3 .widget_text:nth-child(2),
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
     .latest-books {
       width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+
+      h3 {
+        margin-bottom: 4.375rem;
+      }
+
+      .track {
+        flex-wrap: nowrap;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      .next,
+      .previous {
+        flex: 0 0 2.4375rem;
+
+        svg {
+          width: 2.4375rem;
+          height: 1.875rem;
+        }
+      }
+
+      .next {
+        margin-left: 2.625rem;
+        margin-right: 0.9375rem;
+      }
+
+      .previous {
+        margin-left: 0.9375rem;
+        margin-right: 2.625rem;
+      }
 
       .books {
+        width: auto;
+        min-width: 50rem;
         flex-direction: row;
         justify-content: space-between;
       }
 
-      .book,
+      .book {
-      .slick-slide {
+        width: 30%;
-        width: 300px;
+        max-width: 19.54rem;
-        margin-right: 30px;
-
-        &:last-child {
-          margin-right: 0;
-        }
       }
     }
   }
@@ -179,17 +247,23 @@
     }
 
     .latest-books {
-      width: 1200px;
+      width: 100%;
       margin-bottom: 0;
 
-      .book,
+      .track {
-      .slick-slide {
+        width: 100%;
-        width: 367px;
+        margin: 0 auto;
-        margin-right: 50px;
+        max-width: 87rem;
+      }
 
-        &:last-child {
+      .books {
-          margin-right: 0;
+        width: 100%;
+        max-width: 75rem;
       }
+
+      .book {
+        min-width: 19.54rem;
+        max-width: 22.9375rem;
       }
     }
   }

resources/views/front-page.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-  <section class="blocks blocks-{{ $block_count }}">
+  <section class="blocks blocks-{{ $block_count }} w-100">
   @if(is_active_sidebar('front-page-block'))
     @php(dynamic_sidebar('front-page-block'))
   @else

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

@@ -1,13 +1,15 @@
-<div class="block latest-books w-100">
+<div class="latest-books w-100">
-  <div class="inside">
   <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">
+  <div class="track flex flex-row flex-wrap justify-center items-center">
+    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l @if($current_page === 1){{ 'ml-auto' }}@elseif(!$next_page){{ 'mr-auto' }}@endif" data-total-pages="{{ $total_pages }}" data-next-page="2">
       @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
-        <div class="book w-100 bg-secondary b--secondary">
+        <div class="book flex flex-column justify-end w-100 bg-secondary b--secondary">
+          @if(isset($book['metadata']['keywords']))
           <p class="subject tc ma0">
-            <a href="">Fiction</a>
+            <a href="#">{{ $book['metadata']['keywords'] }}</a>
           </p>
-          <p class="title tc ma0">
+          @endif
+          <p class="title tl ma0">
             <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
           </p>
           <p class="read-more tl ma0">
@@ -16,12 +18,10 @@
         </div>
       @endforeach
     </div>
-    <nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}">
+    @if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
-      <a class="secondary previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
+    @if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
-      <a class="secondary next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
+  </div>
-    </nav>
   <div class="catalog-link tc">
     <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
   </div>
 </div>
-</div>