diff --git a/resources/assets/images/left-arrow.svg b/resources/assets/images/left-arrow.svg new file mode 100644 index 0000000..fbf0f1d --- /dev/null +++ b/resources/assets/images/left-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/images/right-arrow.svg b/resources/assets/images/right-arrow.svg new file mode 100644 index 0000000..06d937e --- /dev/null +++ b/resources/assets/images/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/scripts/routes/home.js b/resources/assets/scripts/routes/home.js index 9a41e1e..3387a68 100644 --- a/resources/assets/scripts/routes/home.js +++ b/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() { }, diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss index f1c248e..acfe4b4 100644 --- a/resources/assets/styles/common/_global.scss +++ b/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; diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss index ce71516..685b98e 100644 --- a/resources/assets/styles/components/_buttons.scss +++ b/resources/assets/styles/components/_buttons.scss @@ -1,21 +1,23 @@ .button { display: inline-block; - width: 250px; - height: 60px; + width: 15.625rem; + 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; - height: 40px; + width: (150/16) * 1rem; + height: (40/16) * 1rem; padding: 0.5em; } &.button-wide { - width: 305px; + width: 19.0625rem; } &.button-outline { diff --git a/resources/assets/styles/components/_grid.scss b/resources/assets/styles/components/_grid.scss index 8721e53..715c104 100644 --- a/resources/assets/styles/components/_grid.scss +++ b/resources/assets/styles/components/_grid.scss @@ -3,5 +3,4 @@ flex-direction: column; align-items: center; width: 100%; - padding: 0 7.5px; } diff --git a/resources/assets/styles/layouts/_pages.scss b/resources/assets/styles/layouts/_pages.scss index 93abe65..377ca90 100644 --- a/resources/assets/styles/layouts/_pages.scss +++ b/resources/assets/styles/layouts/_pages.scss @@ -1,42 +1,27 @@ .home { - .block, - .latest-books { + .block { + 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 { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - .blocks.blocks-2 { + .blocks.blocks-2, + .blocks.blocks-3 { .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,8 +32,12 @@ color: $white; background: var(--brand-secondary, $brand-secondary); - h3::before { - background-color: $white; + h3 { + color: $white; + + &::before { + background-color: $white; + } } .button { @@ -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; } - .book, - .slick-slide { - width: 100vw; - height: 386px; - margin: 45px 0 0; - padding: 0 29.5px; - border: solid 2px; + .books { + padding: 0; + width: 100%; + } + + .book { + width: 100%; + max-width: 22.9375rem; + height: 24.125rem; + margin: 0 0 2rem; + padding: 1.5rem 1.85rem 2.1875rem; + border-style: solid; + border-width: 2px; a { font-family: $font-family-sans-serif; @@ -93,15 +119,15 @@ } .subject { - height: 91px; - margin-top: 24px; + height: 4.625rem; 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 { - a { - &.slick-disabled { - opacity: 0; + .previous, + .next { + width: auto; + 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, - .slick-slide { - width: 300px; - margin-right: 30px; - - &:last-child { - margin-right: 0; - } + .book { + width: 30%; + max-width: 19.54rem; } } } @@ -179,17 +247,23 @@ } .latest-books { - width: 1200px; + width: 100%; margin-bottom: 0; - .book, - .slick-slide { - width: 367px; - margin-right: 50px; + .track { + width: 100%; + margin: 0 auto; + max-width: 87rem; + } - &:last-child { - margin-right: 0; - } + .books { + width: 100%; + max-width: 75rem; + } + + .book { + min-width: 19.54rem; + max-width: 22.9375rem; } } } diff --git a/resources/views/front-page.blade.php b/resources/views/front-page.blade.php index 58742a0..231c5bc 100644 --- a/resources/views/front-page.blade.php +++ b/resources/views/front-page.blade.php @@ -1,7 +1,7 @@ @extends('layouts.app') @section('content') -
+
@if(is_active_sidebar('front-page-block')) @php(dynamic_sidebar('front-page-block')) @else diff --git a/resources/views/partials/front-page-catalog.blade.php b/resources/views/partials/front-page-catalog.blade.php index 57c5220..327496e 100644 --- a/resources/views/partials/front-page-catalog.blade.php +++ b/resources/views/partials/front-page-catalog.blade.php @@ -1,13 +1,15 @@ -
-
-

{{ $latest_books_title }}

-
+
+

{{ $latest_books_title }}

+
+
@foreach(FrontPage::latestBooks( $current_page, 3 ) as $book) -
+
+ @if(isset($book['metadata']['keywords']))

- Fiction + {{ $book['metadata']['keywords'] }}

-

+ @endif +

{{ $book['metadata']['name'] }}

@@ -16,12 +18,10 @@

@endforeach
- -
- {{ __('View Complete Catalog', 'aldine') }} -
+ @if($previous_page)@endif + @if($next_page)@endif +
+
+ {{ __('View Complete Catalog', 'aldine') }}