Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix front page catalog.

pull/13/head
Ned Zimmerman 7 years ago
parent
a667619f48
commit
cf8fa8a6d7
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
9 changed files with 175 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

1
resources/assets/images/right-arrow.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

10
resources/assets/scripts/routes/home.js
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save