Browse Source

Fix front page catalog.

pull/13/head
Ned Zimmerman 7 years ago
parent
commit
cf8fa8a6d7
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 1
      resources/assets/images/left-arrow.svg
  2. 1
      resources/assets/images/right-arrow.svg
  3. 10
      resources/assets/scripts/routes/home.js
  4. 8
      resources/assets/styles/common/_global.scss
  5. 16
      resources/assets/styles/components/_buttons.scss
  6. 1
      resources/assets/styles/components/_grid.scss
  7. 198
      resources/assets/styles/layouts/_pages.scss
  8. 2
      resources/views/front-page.blade.php
  9. 28
      resources/views/partials/front-page-catalog.blade.php

1
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>

After

Width:  |  Height:  |  Size: 447 B

1
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>

After

Width:  |  Height:  |  Size: 436 B

10
resources/assets/scripts/routes/home.js

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

8
resources/assets/styles/common/_global.scss

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

16
resources/assets/styles/components/_buttons.scss

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

1
resources/assets/styles/components/_grid.scss

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

198
resources/assets/styles/layouts/_pages.scss

@ -1,42 +1,27 @@
.home { .home {
.block, .block {
.latest-books { flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0.78125rem;
display: flex;
height: 445px; height: 445px;
background-color: $white; background-color: $white;
margin-left: auto;
margin-right: auto;
text-align: center; 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 { p {
font-size: em(16); font-size: em(16);
line-height: (32/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) { .widget_text:nth-child(2) {
margin-right: 0.5rem;
margin-left: 0.5rem;
border: solid 2px var(--brand-primary, $brand-primary); border: solid 2px var(--brand-primary, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
@ -47,8 +32,12 @@
color: $white; color: $white;
background: var(--brand-secondary, $brand-secondary); background: var(--brand-secondary, $brand-secondary);
h3::before { h3 {
background-color: $white; color: $white;
&::before {
background-color: $white;
}
} }
.button { .button {
@ -64,27 +53,64 @@
} }
.widget_text:nth-child(3) { .widget_text:nth-child(3) {
margin-top: 2rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border: solid 2px var(--brand-primary, $brand-primary); border: solid 2px var(--brand-primary, $brand-primary);
box-shadow: unset; 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 { .latest-books {
box-shadow: unset;
height: auto; height: auto;
padding-bottom: 0 0 50px; padding: 0 0 50px;
h3 { 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, .books {
.slick-slide { padding: 0;
width: 100vw; width: 100%;
height: 386px; }
margin: 45px 0 0;
padding: 0 29.5px; .book {
border: solid 2px; 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 { a {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@ -93,15 +119,15 @@
} }
.subject { .subject {
height: 91px; height: 4.625rem;
margin-top: 24px;
font-size: em(24); font-size: em(24);
} }
.title { .title {
height: 329px - 115px; height: 13rem;
font-size: em(30); font-size: em(30);
font-weight: 500; font-weight: 500;
line-height: (40/30);
} }
.read-more { .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 { .latest-books {
width: 100%; 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 { .books {
width: auto;
min-width: 50rem;
flex-direction: row; flex-direction: row;
justify-content: space-between; 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 { .latest-books {
width: 1200px; width: 100%;
margin-bottom: 0; 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;
} }
} }
} }

2
resources/views/front-page.blade.php

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

28
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>
<h3 class="tc ttu">{{ $latest_books_title }}</h3> <div class="track flex flex-row flex-wrap justify-center items-center">
<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="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) @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"> <p class="subject tc ma0">
<a href="">Fiction</a> <a href="#">{{ $book['metadata']['keywords'] }}</a>
</p> </p>
<p class="title tc ma0"> @endif
<p class="title tl ma0">
<a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a> <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
</p> </p>
<p class="read-more tl ma0"> <p class="read-more tl ma0">
@ -16,12 +18,10 @@
</div> </div>
@endforeach @endforeach
</div> </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">
<div class="catalog-link tc"> <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
<a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
</div>
</div> </div>
</div> </div>

Loading…
Cancel
Save