Browse Source

Add SVG icons to footer, fix #47.

pull/49/head
Ned Zimmerman 7 years ago
parent
commit
df710eca7d
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 57
      assets/styles/layouts/_front-page.scss
  2. 8
      dist/mix-manifest.json
  3. 2
      dist/scripts/aldine.js
  4. 2
      dist/scripts/customizer.js
  5. 2
      dist/styles/aldine.css
  6. 2
      dist/styles/editor.css
  7. 23
      footer.php
  8. 11
      header.php
  9. 6
      inc/filters/namespace.php
  10. 17535
      package-lock.json
  11. 2
      package.json
  12. 4
      partials/book.php
  13. 39
      partials/content-front-page.php
  14. 19
      partials/paged-navigation.php
  15. 38
      webpack.mix.js
  16. 1445
      yarn.lock

57
assets/styles/layouts/_front-page.scss

@ -9,20 +9,25 @@
.latest-books {
padding: 0 0 9.625rem;
.slider {
margin: 0 auto;
position: relative;
}
.books {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
.booknav {
position: absolute;
top: 0;
left: calc(50vw - 14.03125rem);
width: 100%;
padding: 0 1rem;
@media #{$breakpoint-large} {
max-width: 22.9375rem;
padding: 0;
}
margin: 1rem auto 2rem;
max-width: 28.0625rem;
height: calc(100%);
display: flex;
flex-direction: row;
justify-content: center;
@ -30,7 +35,12 @@
.previous,
.next {
display: block;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
width: rem(25);
height: 100%;
svg {
width: rem(25);
@ -41,7 +51,19 @@
}
}
.previous {
left: 0;
}
.next {
right: 0;
}
@media #{$breakpoint-large} {
.slider {
width: calc(100vw - 5.125rem);
max-width: 75rem;
}
.books {
flex-direction: row;
justify-content: center;
@ -51,16 +73,21 @@
margin-left: 1rem;
}
}
}
.previous {
order: 1;
margin-right: auto;
}
.booknav {
width: calc(100% + 4rem);
max-width: 100vw;
left: -2rem;
}
.next {
order: 2;
margin-left: auto;
.previous,
.next {
width: rem(32);
svg {
width: rem(32);
height: rem(32);
}
}
}
.catalog-link {

8
dist/mix-manifest.json vendored

@ -1,6 +1,6 @@
{
"/scripts/aldine.js": "/scripts/aldine.js?id=c8641d03dfb38dc75e0d",
"/styles/aldine.css": "/styles/aldine.css?id=f76caf89bff3fa5dbd29",
"/styles/editor.css": "/styles/editor.css?id=6e790d6de9d8bda7eabf",
"/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2"
"/scripts/aldine.js": "/scripts/aldine.js?id=b3e9fc98283f6851d026",
"/styles/aldine.css": "/styles/aldine.css?id=1be125553f6566e4af78",
"/styles/editor.css": "/styles/editor.css?id=1154985c5551d57d94cc",
"/scripts/customizer.js": "/scripts/customizer.js?id=b7707466ef7695673a2e"
}

2
dist/scripts/aldine.js vendored

File diff suppressed because one or more lines are too long

2
dist/scripts/customizer.js vendored

File diff suppressed because one or more lines are too long

2
dist/styles/aldine.css vendored

File diff suppressed because one or more lines are too long

2
dist/styles/editor.css vendored

File diff suppressed because one or more lines are too long

23
footer.php

@ -37,12 +37,18 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
<?php dynamic_sidebar( 'network-footer-block-2' ); ?>
<div class="social-media">
<?php if ( ! empty( $network_facebook ) ) { ?>
<a class="icon icon-facebook" href="<?php echo $network_facebook; ?>" title="<?php printf( __( '%s on Facebook', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
<a class="facebook" href="<?php echo $network_facebook; ?>" title="<?php printf( __( '%s on Facebook', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
<svg class="icon--svg">
<use xlink:href="#facebook" />
</svg>
<span class="screen-reader-text"><?php printf( __( '%s on Facebook', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
</a>
<?php } ?>
<?php if ( ! empty( $network_twitter ) ) { ?>
<a class="icon icon-twitter" href="<?php echo $network_twitter; ?>" title="<?php printf( __( '%s on Twitter', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
<a class="twitter" href="<?php echo $network_twitter; ?>" title="<?php printf( __( '%s on Twitter', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
<svg class="icon--svg">
<use xlink:href="#twitter" />
</svg>
<span class="screen-reader-text"><?php printf( __( '%s on Twitter', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
</a>
<?php } ?>
@ -70,8 +76,17 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
</ul>
</div>
<div class="footer__pressbooks__social">
<a class="icon icon-facebook" href="https://facebook.com/pressbooks2" title="<?php _e( 'Pressbooks on Facebook', 'pressbooks-book' ); ?>"><span class="screen-reader-text"><?php _e( 'Pressbooks on Facebook', 'pressbooks-book' ); ?></span></a>
<a class="icon icon-twitter" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="<?php _e( 'Pressbooks on Twitter', 'pressbooks-book' ); ?>"><span class="screen-reader-text"><?php _e( 'Pressbooks on Twitter', 'pressbooks-book' ); ?></span></a>
<a class="facebook" href="https://facebook.com/pressbooks2" title="<?php _e( 'Pressbooks on Facebook', 'pressbooks-book' ); ?>">
<svg class="icon--svg">
<use xlink:href="#facebook" />
</svg>
<span class="screen-reader-text"><?php _e( 'Pressbooks on Facebook', 'pressbooks-book' ); ?></span>
</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="<?php _e( 'Pressbooks on Twitter', 'pressbooks-book' ); ?>">
<svg class="icon--svg">
<use xlink:href="#twitter" />
</svg>
<span class="screen-reader-text"><?php _e( 'Pressbooks on Twitter', 'pressbooks-book' ); ?></span></a>
</div>
</section>

11
header.php

@ -21,7 +21,7 @@
</head>
<body <?php body_class(); ?>>
<svg aria-hidden="true" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="icon-pressbooks" fill="currentColor" viewBox="0 0 45 44">
<path d="M44.195 41.872c0 .745-.618 1.346-1.377 1.346H1.377C.617 43.219 0 42.617 0 41.872V1.347C0 .604.618 0 1.377 0h41.44c.76 0 1.378.604 1.378 1.347v40.525zM15.282 10.643h-5.21v21.43h3.304V24h1.906c1.435 0 2.656-.5 3.665-1.504 1.008-1.004 1.513-2.213 1.513-3.626v-3.113c0-1.47-.444-2.678-1.33-3.625-.956-.993-2.24-1.489-3.848-1.489zm1.977 5.165h-.001v3.131c0 .513-.184.952-.55 1.318a1.826 1.826 0 0 1-1.338.547h-1.994v-6.86h1.995c.571 0 1.029.171 1.372.513.344.342.516.792.516 1.35zm5.84 16.265h6.118c.828 0 1.662-.25 2.502-.752a4.642 4.642 0 0 0 1.73-1.779c.526-.945.788-2.097.788-3.455 0-.545-.04-1.043-.122-1.486-.163-.868-.414-1.575-.751-2.122-.513-.81-1.137-1.352-1.871-1.625a3.325 3.325 0 0 0 1.154-.839c.78-.866 1.173-2.018 1.173-3.455 0-.876-.105-1.635-.315-2.274-.386-1.198-1.027-2.08-1.925-2.652-1.049-.672-2.225-1.008-3.531-1.008h-4.95v21.447zm3.568-12.69v-5.475h1.382c.652 0 1.184.212 1.592.634.443.456.665 1.13.665 2.018 0 .537-.065.987-.193 1.352-.35.982-1.039 1.471-2.064 1.471h-1.382zm0 9.493v-6.397h1.382c.815 0 1.433.25 1.853.751.466.549.7 1.42.7 2.617 0 .502-.075.948-.227 1.335-.432 1.13-1.208 1.694-2.326 1.694h-1.382z" />
@ -31,11 +31,10 @@
<path fill="#B01109" d="M39.549 37.515c0 .667-.553 1.205-1.232 1.205H1.232A1.217 1.217 0 0 1 0 37.515V1.25C0 .585.553.045 1.232.045h37.083c.681 0 1.234.54 1.234 1.205v36.265z"/>
<path fill="#EDEDED" d="M13.648 10.504c1.44 0 2.588.444 3.444 1.332.793.848 1.19 1.93 1.19 3.245v2.786c0 1.264-.452 2.346-1.354 3.244-.903.898-1.996 1.346-3.28 1.346h-1.705v7.225H8.986V10.504h4.662zm1.77 4.622c0-.5-.155-.903-.462-1.209-.307-.305-.717-.458-1.228-.458h-1.785v6.138h1.784c.468 0 .868-.163 1.197-.49.328-.327.492-.72.492-1.179v-2.802h.002zM20.644 29.682V10.489h4.429c1.169 0 2.222.3 3.16.902.803.511 1.377 1.301 1.722 2.374.188.57.282 1.25.282 2.034 0 1.286-.35 2.317-1.05 3.092a2.976 2.976 0 0 1-1.032.75c.657.245 1.215.73 1.674 1.455.302.49.526 1.123.672 1.899.073.397.11.842.11 1.33 0 1.215-.235 2.245-.705 3.092a4.154 4.154 0 0 1-1.55 1.591c-.75.45-1.497.674-2.238.674h-5.474zm3.193-11.356h1.236c.918 0 1.534-.438 1.847-1.317.115-.327.172-.73.172-1.21 0-.795-.197-1.397-.595-1.806-.365-.377-.84-.567-1.424-.567h-1.236v4.9zm0 8.494h1.236c1 0 1.695-.505 2.081-1.515.136-.347.204-.746.204-1.195 0-1.072-.21-1.85-.626-2.342-.376-.45-.93-.672-1.66-.672h-1.235v5.724z"/>
</symbol>
<symbol id="arrow-right" fill="currentColor" viewBox="0 0 512 512">
<path d="M291 32c0 6 3 12 7 17l133 135H23c-13 0-23 11-23 24s10 24 23 24h408L298 367c-4 4-7 10-7 16s3 12 7 17c10 9 24 9 33 0l173-176c9-9 9-23 0-33L331 15c-9-10-23-10-33 0-4 4-7 10-7 17"/>
</symbol>
<symbol id="arrow-left" fill="currentColor" viewBox="0 0 512 512"><path d="M220 45c0 6-3 12-7 17L79 200h410c12 0 23 11 23 25 0 13-11 24-23 24H79l134 138c4 5 7 11 7 17 0 7-3 13-7 18-10 9-24 9-33 0L7 242c-9-10-9-25 0-34L180 26c9-9 23-9 33 0 4 5 7 11 7 19"/>
</symbol>
<symbol id="facebook" fill="currentColor" viewbox="0 0 512 512"><path d="M451 5c7 0 13 2 17 7 5 4 7 10 7 17v390c0 7-2 13-7 17-4 5-10 7-17 7H339V273h57l9-66h-66v-42c0-11 3-19 7-24 5-5 13-8 26-8h35V73c-12-1-29-2-51-2-26 0-46 7-62 23-15 15-23 36-23 64v49h-57v66h57v170H61c-7 0-13-2-17-7-5-4-7-10-7-17V29c0-7 2-13 7-17 4-5 10-7 17-7z"/></symbol>
<symbol id="twitter" fill="currentColor" viewbox="0 0 512 512"><path d="M161 433c193 0 299-161 299-300v-14c20-15 38-34 52-55-19 9-40 14-60 17 22-13 38-34 46-59-21 13-43 21-67 26-32-35-84-44-126-21s-64 71-53 117c-84-4-163-44-216-110C8 82 22 144 68 175c-17 0-33-5-48-13v1c0 50 36 94 85 104-16 4-32 5-48 2 14 43 54 72 98 73-37 30-83 46-130 45-8 0-17 0-25-1 48 31 104 47 161 47"/></symbol>
<symbol id="arrow-right" fill="currentColor" viewBox="0 0 512 512"><path d="M291 32c0 6 3 12 7 17l133 135H23c-13 0-23 11-23 24s10 24 23 24h408L298 367c-4 4-7 10-7 16s3 12 7 17c10 9 24 9 33 0l173-176c9-9 9-23 0-33L331 15c-9-10-23-10-33 0-4 4-7 10-7 17"/></symbol>
<symbol id="arrow-left" fill="currentColor" viewBox="0 0 512 512"><path d="M220 45c0 6-3 12-7 17L79 200h410c12 0 23 11 23 25 0 13-11 24-23 24H79l134 138c4 5 7 11 7 17 0 7-3 13-7 18-10 9-24 9-33 0L7 242c-9-10-9-25 0-34L180 26c9-9 23-9 33 0 4 5 7 11 7 19"/></symbol>
</defs>
</svg>
<div id="page" class="site">

6
inc/filters/namespace.php

@ -85,9 +85,9 @@ function add_blocks( $init_array ) {
'wrapper' => true,
],
[
'title' => __( 'Link Button', 'pressbooks-aldine' ),
'selector' => 'a',
'classes' => 'button',
'title' => __( 'Call to Action', 'pressbooks-aldine' ),
'inline' => 'a',
'classes' => [ 'call-to-action' ],
],
];

17535
package-lock.json generated

File diff suppressed because it is too large Load Diff

2
package.json

@ -53,7 +53,7 @@
"pressbooks-build-tools": "^0.9.0"
},
"dependencies": {
"aetna": "^0.4.0",
"aetna": "^0.5.0",
"isotope-layout": "^3.0.5",
"jquery-bridget": "^2.0.1",
"js-cookie": "^2.2.0",

4
partials/book.php

@ -2,7 +2,7 @@
$date = ( isset( $book['metadata']['datePublished'] ) ) ? str_replace( '-', '', $book['metadata']['datePublished'] ) : '';
?>
<div class="book"
<li class="book"
<?php if ( $date ) { ?>data-date-published="<?php echo $date; ?>"<?php } ?>
data-license="<?php echo ( new \Pressbooks\Licensing() )->getLicenseFromUrl( $book['metadata']['license']['url'] ); ?>"
<?php if ( ! empty( $subject ) ) { ?> data-subject="<?php echo $subject ?>"<?php } ?>
@ -18,4 +18,4 @@ $date = ( isset( $book['metadata']['datePublished'] ) ) ? str_replace( '-', '',
<p class="book__read-more">
<a href="<?php echo $book['link']; ?>"><?php _e( 'About this book', 'pressbooks-aldine' ); ?> <svg aria-hidden="true"><use xlink:href="#arrow-right" /></svg></a>
</p>
</div>
</li>

39
partials/content-front-page.php

@ -38,39 +38,18 @@ $next_page = $page + 1;
</article><!-- #post-<?php the_ID(); ?> -->
<?php if ( get_option( 'pb_front_page_catalog' ) ) : ?>
<div id="latest-titles" class="latest-books">
<h2><?php echo $latest_books_title; ?></h2>
<div class="track">
<div class="books" data-total-pages="<?php echo $catalog_data['pages']; ?>" <?php if ( $next_page <= $catalog_data['pages'] ) : ?>data-next-page="<?php echo $next_page; ?>"<?php endif; ?>>
<div id="latest-books" class="latest-books">
<h2 id="latest-books-title"><?php echo $latest_books_title; ?></h2>
<div class="slider" role="region" aria-labelledby="latest-books-title" data-total-pages="<?php echo $catalog_data['pages']; ?>" <?php if ( $next_page <= $catalog_data['pages'] ) : ?>data-next-page="<?php echo $next_page; ?>"<?php endif; ?>>
<ul class="books">
<?php foreach ( $catalog_data['books'] as $book ) :
include( locate_template( 'partials/book.php' ) );
endforeach; ?>
</div>
<?php if ( $previous_page || $next_page ) { ?>
<div class="booknav">
<?php } ?>
<?php if ( $previous_page ) : ?>
<a class="previous" rel="previous" data-page="<?php echo $previous_page; ?>" href="<?php echo network_home_url( "/page/$previous_page/#latest-titles" ); ?>">
<span class="screen-reader-text"><?php _e( 'Previous Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-left" />
</svg>
</a>
<?php endif; ?>
<?php if ( $next_page <= $catalog_data['pages'] ) : ?>
<a class="next" rel="next" data-page="<?php echo $next_page; ?>" href="<?php echo network_home_url( "/page/$next_page/#latest-titles" ); ?>">
<span class="screen-reader-text"><?php _e( 'Next Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-right" />
</svg>
</a>
<?php endif; ?>
<?php if ( $previous_page || $next_page ) { ?>
</div>
<?php } ?>
</div>
<div class="catalog-link">
<a class="button button--outline button--wide" href="<?php echo network_home_url( '/catalog/' ); ?>"><?php _e( 'View Complete Catalog', 'pressbooks-aldine' ); ?></a>
</ul>
<?php if ( $previous_page || $next_page ) { include( locate_template( 'partials/paged-navigation.php' ) ); } ?>
</div>
<p class="catalog-link">
<a class="call-to-action" href="<?php echo network_home_url( '/catalog/' ); ?>"><?php _e( 'View Complete Catalog', 'pressbooks-aldine' ); ?></a>
</p>
</div>
<?php endif; ?>

19
partials/paged-navigation.php

@ -0,0 +1,19 @@
<nav class="booknav" aria-labelledby="latest-books-title book-navigation">
<span class="screen-reader-text"><?php _e( 'Navigation', 'pressbooks-aldine' ); ?></span>
<?php if ( $previous_page ) : ?>
<a class="previous" rel="previous" data-page="<?php echo $previous_page; ?>" href="<?php echo network_home_url( "/page/$previous_page/#latest-books" ); ?>">
<span class="screen-reader-text"><?php _e( 'Previous Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-left" />
</svg>
</a>
<?php endif; ?>
<?php if ( $next_page <= $catalog_data['pages'] ) : ?>
<a class="next" rel="next" data-page="<?php echo $next_page; ?>" href="<?php echo network_home_url( "/page/$next_page/#latest-books" ); ?>">
<span class="screen-reader-text"><?php _e( 'Next Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-right" />
</svg>
</a>
<?php endif; ?>
</nav>

38
webpack.mix.js

@ -1,4 +1,4 @@
let mix = require( 'laravel-mix' );
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
@ -16,14 +16,14 @@ const partials = 'partials';
const assets = 'assets';
const dist = 'dist';
mix.setPublicPath( dist );
mix.setResourceRoot( '../' );
mix.setPublicPath(dist);
mix.setResourceRoot('../');
// BrowserSync
mix.browserSync( {
host: 'localhost',
mix.browserSync({
host: 'localhost',
proxy: 'https://pressbooks.test',
port: 3000,
port: 3000,
files: [
'*.php',
`${inc}/**/*.php`,
@ -31,43 +31,43 @@ mix.browserSync( {
`${dist}/**/*.css`,
`${dist}/**/*.js`,
],
} );
});
// Sass
mix.sass( `${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css` );
mix.sass( `${assets}/styles/editor.scss`, `${dist}/styles/editor.css` );
mix.sass(`${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css`);
mix.sass(`${assets}/styles/editor.scss`, `${dist}/styles/editor.css`);
// Javascript
mix.autoload( { jquery: [ '$', 'window.jQuery', 'jQuery' ] } );
mix.autoload({ jquery: ['$', 'window.jQuery', 'jQuery'] });
mix
.js( `${assets}/scripts/aldine.js`, `${dist}/scripts` )
.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` );
.js(`${assets}/scripts/aldine.js`, `${dist}/scripts`)
.js(`${assets}/scripts/customizer.js`, `${dist}/scripts`);
// Assets
mix
.copy( `${assets}/fonts`, `${dist}/fonts`, false )
.copy( `${assets}/images`, `${dist}/images`, false );
.copy(`${assets}/fonts`, `${dist}/fonts`, false)
.copy(`${assets}/images`, `${dist}/images`, false);
// Options
mix.options( { processCssUrls: false } );
mix.options({ processCssUrls: false });
// Source maps when not in production.
if ( ! mix.inProduction() ) {
if (!mix.inProduction()) {
mix.sourceMaps();
}
// Hash and version files in production.
if ( mix.inProduction() ) {
if (mix.inProduction()) {
mix.version();
}
// Add Isotope support.
mix.webpackConfig( {
mix.webpackConfig({
resolve: {
alias: {
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
} );
});

1445
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save