diff --git a/app/admin.php b/app/admin.php index e82c8e2..445b4b5 100644 --- a/app/admin.php +++ b/app/admin.php @@ -16,36 +16,47 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize) ]); // Add settings - $wp_customize->add_setting('pb_network_primary_color', [ - 'type' => 'option', - 'default' => 'b01109', - 'sanitize_callback' => 'Aldine\remove_hash', - ]); - $wp_customize->add_control(new \WP_Customize_Color_Control( - $wp_customize, - 'pb_network_primary_color', + foreach ([ [ + 'slug' => 'primary', + 'hex' => '#b01109', 'label' => __('Primary Color', 'aldine'), - 'section' => 'colors', - 'description' => __('Used for links and primary elements.', 'aldine'), - 'settings' => 'pb_network_primary_color', - ] - )); - $wp_customize->add_setting('pb_network_secondary_color', [ - 'type' => 'option', - 'default' => '015d75', - 'sanitize_callback' => 'Aldine\remove_hash', - ]); - $wp_customize->add_control(new \WP_Customize_Color_Control( - $wp_customize, - 'pb_network_secondary_color', + 'description' => __('Primary color, used for links and other primary elements.', 'aldine'), + ], + [ + 'slug' => 'accent', + 'hex' => '#015d75', + 'label' => __('Accent Color', 'aldine'), + 'description' => __('Accent color, used for flourishes and secondary elements.', 'aldine'), + ], + [ + 'slug' => 'primary_fg', + 'hex' => '#ffffff', + 'label' => __('Primary Foreground Color', 'aldine'), + 'description' => __('Used for text on a primary background.', 'aldine'), + ], [ - 'label' => __('Secondary Color', 'aldine'), - 'section' => 'colors', - 'description' => __('Used for secondary elements.', 'aldine'), - 'settings' => 'pb_network_secondary_color', - ] - )); + 'slug' => 'accent_fg', + 'hex' => '#ffffff', + 'label' => __('Accent Foreground Color', 'aldine'), + 'description' => __('Used for text on an accent color background.', 'aldine'), + ], + ] as $color) { + $wp_customize->add_setting("pb_network_color_{$color['slug']}", [ + 'type' => 'option', + 'default' => $color['hex'], + ]); + $wp_customize->add_control(new \WP_Customize_Color_Control( + $wp_customize, + "pb_network_color_{$color['slug']}", + [ + 'label' => $color['label'], + 'section' => 'colors', + 'description' => $color['description'], + 'settings' => "pb_network_color_{$color['slug']}", + ] + )); + } $wp_customize->add_section('pb_network_social', [ 'title' => __('Social Media', 'aldine'), 'priority' => 30, diff --git a/app/controllers/About.php b/app/controllers/About.php deleted file mode 100644 index f344008..0000000 --- a/app/controllers/About.php +++ /dev/null @@ -1,10 +0,0 @@ - 1) ? $page - 1 : 0; + } + + public function nextPage() + { + if (is_front_page()) { + $page = (get_query_var('page')) ? get_query_var('page') : 1; + } else { + $page = (get_query_var('paged')) ? get_query_var('paged') : 1; + } + + return $page + 1; + } + + public static function catalogData($page = 1, $per_page = 10, $orderby = 'title', $license = '', $subject = '') + { + $request = new \WP_REST_Request('GET', '/pressbooks/v2/books'); + $request->set_query_params([ + 'page' => $page, + 'per_page' => $per_page, + ]); + $response = rest_do_request($request); + $pages = $response->headers['X-WP-TotalPages']; + $data = rest_get_server()->response_to_data($response, true); + $books = []; + foreach ($data as $key => $book) { + $book['title'] = $book['metadata']['name']; + $book['date-published'] = (isset($book['metadata']['datePublished'])) ? + $book['metadata']['datePublished'] : + ''; + $book['subject'] = (isset($book['metadata']['keywords'])) ? $book['metadata']['keywords'] : ''; + $books[] = $book; + } + if ($orderby === 'latest') { + $books = wp_list_sort($books, $orderby, 'desc'); + } else { + $books = wp_list_sort($books, $orderby); + } + return ['pages' => $pages, 'books' => $books]; + } } diff --git a/app/controllers/FrontPage.php b/app/controllers/FrontPage.php index f97df86..1d8d427 100644 --- a/app/controllers/FrontPage.php +++ b/app/controllers/FrontPage.php @@ -19,27 +19,6 @@ class FrontPage extends Controller return 1; } - public function totalPages() - { - $books = wp_remote_get(network_home_url('/wp-json/pressbooks/v2/books?per_page=3')); - return $books['headers']['x-wp-totalpages']; - } - - public function currentPage() - { - return get_query_var('page', 1); - } - - public function previousPage() - { - return (get_query_var('page', 1) > 1) ? get_query_var('page') - 1 : 0; - } - - public function nextPage() - { - return (get_query_var('page', 1) < FrontPage::totalPages()) ? get_query_var('page', 1) + 1 : 0; - } - public function latestBooksTitle() { $title = get_option('pb_front_page_catalog_title'); @@ -50,10 +29,9 @@ class FrontPage extends Controller return __('Our Latest Titles', 'aldine'); } - public static function latestBooks($page = 1, $per_page = 3) + public function catalogData() { - $books = wp_remote_get(network_home_url("/wp-json/pressbooks/v2/books?per_page=$per_page&page=$page")); - $books = json_decode($books['body'], true); - return $books; + $page = (get_query_var('page')) ? get_query_var('page') : 1; + return App::catalogData($page, 3); } } diff --git a/app/controllers/PageCatalog.php b/app/controllers/PageCatalog.php new file mode 100644 index 0000000..ee44505 --- /dev/null +++ b/app/controllers/PageCatalog.php @@ -0,0 +1,111 @@ +getSupportedTypes(); + foreach ($licenses as $key => $value) { + $licenses[$key] = preg_replace("/\([^)]+\)/", '', $value['desc']); + } + return $licenses; + } + + public function subjectGroups() + { + return [ + 'business-finance' => [ + 'title' => __('Business and Finance', 'aldine'), + 'subjects' => [ + 'accounting' => 'Accounting', + 'finance' => 'Finance', + 'information-systems' => 'Information Systems', + 'management' => 'Management', + 'marketing' => 'Marketing', + 'economics' => 'Economics', + ], + ], + 'engineering-technology' => [ + 'title' => __('Engineering & Technology', 'aldine'), + 'subjects' => [ + 'architecture' => 'Architecture', + 'bioengineering' => 'Bioengineering', + 'chemical' => 'Chemical', + 'civil' => 'Civil', + 'electrical' => 'Electrical', + 'mechanical' => 'Mechanical', + 'mining-and-materials' => 'Mining and Materials', + 'urban-planning' => 'Urban Planning', + 'computer-science' => 'Computer Science', + ], + ], + 'health-sciences' => [ + 'title' => __('Health Sciences', 'aldine'), + 'subjects' => [ + 'nursing' => 'Nursing', + 'dentistry' => 'Dentistry', + 'medicine' => 'Medicine', + ], + ], + 'humanities-arts' => [ + 'title' => __('Humanities & Arts', 'aldine'), + 'subjects' => [ + 'archaeology' => 'Archaeology', + 'art' => 'Art', + 'classics' => 'Classics', + 'literature' => 'Literature', + 'history' => 'History', + 'media' => 'Media', + 'music' => 'Music', + 'philosophy' => 'Philosophy', + 'religion' => 'Religion', + 'language' => 'Language', + ], + ], + 'reference' => [ + 'title' => __('Reference', 'aldine'), + 'subjects' => [ + 'student-guides' => 'Student Guides', + 'teaching-guides' => 'Teaching Guides', + ], + ], + 'science' => [ + 'title' => __('Sciences', 'aldine'), + 'subjects' => [ + 'biology' => 'Biology', + 'chemistry' => 'Chemistry', + 'environent-and-earth-sciences' => 'Environment and Earth Sciences', + 'geography' => 'Geography', + 'mathematics' => 'Mathematics', + 'physics' => 'Physics', + ], + ], + 'social-sciences' => [ + 'title' => __('Social Sciences', 'aldine'), + 'subjects' => [ + 'anthropology' => 'Anthropology', + 'gender-studies' => 'Gender Studies', + 'linguistics' => 'Linguistics', + 'museums-libraries-and-information-sciences' => 'Museums, Libraries, and Information Sciences', + 'political-science' => 'Political Science', + 'psychology' => 'Psychology', + 'social-work' => 'Social Work', + 'sociology' => 'Sociology', + ], + ], + ]; + } + + public function catalogData() + { + $page = (get_query_var('paged')) ? get_query_var('paged') : 1; + $orderby = (get_query_var('orderby')) ? get_query_var('orderby') : 'title'; + $subject = (get_query_var('subject')) ? get_query_var('subject') : ''; + $license = (get_query_var('license')) ? get_query_var('license') : ''; + return App::catalogData($page, 9, $orderby, $license, $subject); + } +} diff --git a/app/helpers.php b/app/helpers.php index a8dcf93..b89c869 100644 --- a/app/helpers.php +++ b/app/helpers.php @@ -76,16 +76,16 @@ function template_path($file, $data = []) */ function asset_path($asset) { - return sage('assets')->getUri($asset); + return fix_path(sage('assets')->getUri('/' . $asset)); } /** * @param $asset * @return string */ -function svg_path($asset) +function asset_dir($asset) { - return sage('assets')->get($asset); + return fix_path(sage('assets')->get('/' . $asset)); } /** @@ -138,9 +138,65 @@ function locate_template($templates) } /** - * Remove hash from hex color string + * + * Catch a contact form submission. + * + * @return false | array */ -function remove_hash($color) +function contact_form_submission() +{ + if (isset($_POST['submitted'])) { + $output = []; + $name = (isset($_POST['visitor_name'])) ? $_POST['visitor_name'] : false; + $email = (isset($_POST['visitor_email'])) ? $_POST['visitor_email'] : false; + $institution = (isset($_POST['visitor_institution'])) ? $_POST['visitor_institution'] : false; + $message = (isset($_POST['message'])) ? $_POST['message'] : false; + if (!$name) { + $output['message'] = __('Name is required.', 'aldine'); + $output['status'] = 'error'; + $output['field'] = 'visitor_name'; + } elseif (!$email) { + $output['message'] = __('Email is required.', 'aldine'); + $output['status'] = 'error'; + $output['field'] = 'visitor_email'; + } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { + $output['message'] = __('Email is invalid.', 'aldine'); + $output['status'] = 'error'; + $output['field'] = 'visitor_email'; + } elseif (!$institution) { + $output['message'] = __('Institution is required.', 'aldine'); + $output['status'] = 'error'; + $output['field'] = 'visitor_institution'; + } elseif (!$message) { + $output['message'] = __('Message is required.', 'aldine'); + $output['status'] = 'error'; + $output['field'] = 'message'; + } else { + $sent = wp_mail( + get_option('admin_email'), + sprintf(__('Contact Form Submission from %s', 'aldine'), $name), + sprintf( + "From: %1\$s <%2\$s>\n%3\$s", + $name, + $email, + strip_tags($message) + ), + "From: ${email}\r\nReply-To: ${email}\r\n" + ); + if ($sent) { + $output['message'] = __('Your message was sent!', 'aldine'); + $output['status'] = 'success'; + } else { + $output['message'] = __('Your message could not be sent.', 'aldine'); + $output['status'] = 'error'; + } + } + return $output; + } + return false; +} + +function fix_path($path) { - return ltrim($color, '#'); + return str_replace('/dist//', '/dist/', $path); } diff --git a/app/setup.php b/app/setup.php index 193879e..d90dda3 100644 --- a/app/setup.php +++ b/app/setup.php @@ -73,8 +73,8 @@ add_action('after_setup_theme', function () { */ add_theme_support('custom-header', [ 'default-image' => asset_path('images/header.jpg'), - 'width' => 1650, - 'height' => 880, + 'width' => 1920, + 'height' => 884, 'default-text-color' => '#000', ]); @@ -82,7 +82,12 @@ add_action('after_setup_theme', function () { * Enable custom logos * @link https://developer.wordpress.org/themes/functionality/custom-logo/ */ - add_theme_support('custom-logo'); + add_theme_support('custom-logo', [ + 'height' => 40, + 'width' => 265, + 'flex-width' => true, + 'flex-height' => true, + ]); /** * Enable post thumbnails @@ -193,23 +198,33 @@ add_action('after_setup_theme', function () { }); add_action('wp_head', function () { - $primary = get_option('pb_network_primary_color'); - $secondary = get_option('pb_network_secondary_color'); - $header_text_color = get_header_textcolor(); - if ($primary || $secondary || $header_text_color) { ?> + $primary = get_option('pb_network_color_primary'); + $accent = get_option('pb_network_color_accent'); + $primary_fg = get_option('pb_network_color_primary_fg'); + $accent_fg = get_option('pb_network_color_accent_fg'); + $header_text = get_header_textcolor(); + if ($primary || $accent || $primary_fg || $accent_fg || $header_text) { ?> share('contact_form_response', $response); +}); diff --git a/config/assets.php b/config/assets.php index 314b0cd..979ea49 100644 --- a/config/assets.php +++ b/config/assets.php @@ -14,7 +14,7 @@ return [ | */ - 'manifest' => get_theme_file_path().'/dist/assets.json', + 'manifest' => get_theme_file_path().'/dist/mix-manifest.json', /* |-------------------------------------------------------------------------- diff --git a/package.json b/package.json index 26edaf4..5da3e4c 100644 --- a/package.json +++ b/package.json @@ -75,60 +75,37 @@ } }, "scripts": { - "build": "webpack --progress --config resources/assets/build/webpack.config.js", - "build:production": "webpack --progress -p --config resources/assets/build/webpack.config.js", - "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js", - "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js", + "build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "build:production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "build:profile": "cross-env NODE_ENV=production webpack --progress --profile --json --config=node_modules/laravel-mix/setup/webpack.config.js", + "start": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "rmdist": "rimraf dist", "lint": "npm run -s lint:scripts && npm run -s lint:styles", - "lint:scripts": "eslint resources/assets/scripts resources/assets/build", - "lint:styles": "stylelint 'resources/assets/styles/**/*.{css,sass,scss,sss,less}'", + "lint:scripts": "eslint \"resources/assets/scripts\"", + "lint:styles": "stylelint \"resources/assets/styles/**/*.scss\"", "test": "npm run -s lint" }, "engines": { "node": ">= 6.9.4" }, "devDependencies": { - "autoprefixer": "~7.1", - "browser-sync": "~2.18", - "browsersync-webpack-plugin": "^0.6.0", - "bs-html-injector": "~3.0", - "buble-loader": "^0.4.1", - "cache-loader": "~1.0", - "clean-webpack-plugin": "^0.1.16", - "copy-globs-webpack-plugin": "^0.2.0", - "css-loader": "^0.28.4", - "cssnano": "~4.0.0-rc.1", + "browser-sync": "^2.18.13", + "browser-sync-webpack-plugin": "^1.2.0", + "cross-env": "*", "eslint": "~4.2", "eslint-loader": "~1.9", "eslint-plugin-import": "~2.7", "extract-text-webpack-plugin": "~3.0", - "file-loader": "^0.11.2", - "friendly-errors-webpack-plugin": "^1.6.1", - "imagemin-mozjpeg": "~6.0", - "imagemin-webpack-plugin": "~1.5.0-beta.0", - "import-glob": "~1.5", - "node-sass": "~4.5", - "postcss-loader": "~2.0", - "postcss-safe-parser": "~3.0", - "resolve-url-loader": "~2.1", + "laravel-mix": "~1.4", "rimraf": "~2.6", - "sass-loader": "~6.0", - "style-loader": "^0.18.2", "stylelint": "~7.12", "stylelint-config-standard": "~16.0", - "stylelint-webpack-plugin": "^0.8.0", - "url-loader": "^0.5.9", - "webpack": "~3.3", - "webpack-assets-manifest": "^0.7.0", - "webpack-dev-middleware": "~1.11", - "webpack-hot-middleware": "~2.18", - "webpack-merge": "~4.1", - "yargs": "~8.0" + "stylelint-webpack-plugin": "^0.8.0" }, "dependencies": { + "isotope-layout": "^3.0.4", "jquery": "1.12.4 - 3", - "slick-carousel": "^1.7.1", + "jquery-bridget": "^2.0.1", "tachyons-sass": "~4.7", "wpapi": "^1.1.2" } diff --git a/resources/assets/build/webpack.config.js b/resources/assets/build/webpack.config.js index d37eb60..f8d57d9 100644 --- a/resources/assets/build/webpack.config.js +++ b/resources/assets/build/webpack.config.js @@ -120,6 +120,10 @@ let webpackConfig = { 'node_modules', 'bower_components', ], + alias: { + 'masonry': 'masonry-layout', + 'isotope': 'isotope-layout', + }, enforceExtension: false, }, resolveLoader: { diff --git a/resources/assets/images/banner.jpg b/resources/assets/images/banner.jpg new file mode 100644 index 0000000..8af440d Binary files /dev/null and b/resources/assets/images/banner.jpg differ diff --git a/resources/assets/images/catalog-header.jpg b/resources/assets/images/catalog-header.jpg new file mode 100644 index 0000000..2a064c4 Binary files /dev/null and b/resources/assets/images/catalog-header.jpg differ diff --git a/resources/assets/images/header.jpg b/resources/assets/images/header.jpg index 8ff4a67..16e29f0 100644 Binary files a/resources/assets/images/header.jpg and b/resources/assets/images/header.jpg differ 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/logo.png b/resources/assets/images/logo.png deleted file mode 100644 index 0683a36..0000000 Binary files a/resources/assets/images/logo.png and /dev/null differ diff --git a/resources/assets/images/logo.svg b/resources/assets/images/logo.svg new file mode 100644 index 0000000..6425937 --- /dev/null +++ b/resources/assets/images/logo.svg @@ -0,0 +1 @@ +Pressbooks diff --git a/resources/assets/images/logo@2x.png b/resources/assets/images/logo@2x.png deleted file mode 100644 index ec2b333..0000000 Binary files a/resources/assets/images/logo@2x.png and /dev/null differ 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/main.js b/resources/assets/scripts/main.js index 59a5468..e43e363 100644 --- a/resources/assets/scripts/main.js +++ b/resources/assets/scripts/main.js @@ -1,12 +1,11 @@ // import external dependencies import 'jquery'; -import 'slick-carousel'; // import local dependencies import Router from './util/Router'; import common from './routes/common'; import home from './routes/home'; -import aboutUs from './routes/about'; +import catalog from './routes/catalog'; /** Populate Router instance with DOM routes */ const routes = new Router({ @@ -14,8 +13,8 @@ const routes = new Router({ common, // Home page home, - // About Us page, note the change from about-us to aboutUs. - aboutUs, + // Catalog page + catalog, }); // Load Events diff --git a/resources/assets/scripts/routes/about.js b/resources/assets/scripts/routes/about.js deleted file mode 100644 index fae4c82..0000000 --- a/resources/assets/scripts/routes/about.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - init() { - // JavaScript to be fired on the about us page - }, -}; diff --git a/resources/assets/scripts/routes/catalog.js b/resources/assets/scripts/routes/catalog.js new file mode 100644 index 0000000..d7a4dd9 --- /dev/null +++ b/resources/assets/scripts/routes/catalog.js @@ -0,0 +1,101 @@ +const jQueryBridget = require('jquery-bridget'); +const Isotope = require('isotope-layout'); + +export default { + init() { + // JavaScript to be fired on the catalog page + jQueryBridget('isotope', Isotope, $); + let $grid = $('.books'); + $grid.isotope({ + itemSelector: '.book', + getSortData: { + title: '.title a', + subject: '[data-subject]', + latest: '[data-date-published]', + }, + sortAscending: { + title: true, + subject: true, + latest: false, + }, + }); + $('.filters > a').click((e) => { + e.preventDefault(); + $('.filters').toggleClass('is-active'); + $('.filter-groups > div').removeClass('is-active'); + }) + $('.filter-groups .subjects > a').click((e) => { + e.preventDefault(); + let id = $(e.currentTarget).attr('href'); + $(`.filter-groups .subjects:not(${id})`).removeClass('is-active'); + $(`.filter-groups ${id}`).toggleClass('is-active'); + }) + $('.licenses > a').click((e) => { + e.preventDefault(); + let id = $(e.currentTarget).attr('href'); + $(id).toggleClass('is-active'); + }) + $('.subjects .filter-list a').click((e) => { + e.preventDefault(); + if ($(e.currentTarget).hasClass('is-active')) { + $('.subjects .filter-list a').removeClass('is-active'); + $('.subjects').removeClass('has-active-child'); + } else { + $('.subjects .filter-list a').removeClass('is-active'); + $(e.currentTarget).addClass('is-active'); + $('.subjects').removeClass('has-active-child'); + $(e.currentTarget).parent().parent().parent('.subjects').addClass('has-active-child'); + } + let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter'); + let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter'); + if(typeof licenseValue === "undefined") { + licenseValue = ''; + } else { + licenseValue = `[data-license="${licenseValue}"]`; + } + if(typeof subjectValue === "undefined") { + subjectValue = ''; + } else { + subjectValue = `[data-subject="${subjectValue}"]`; + } + $grid.isotope({ filter: `${subjectValue}${licenseValue}` }); + }); + $('.licenses .filter-list a').click((e) => { + e.preventDefault(); + if ($(e.currentTarget).hasClass('is-active')) { + $('.licenses .filter-list a').removeClass('is-active'); + $('.licenses').removeClass('has-active-child'); + } else { + $('.licenses .filter-list a').removeClass('is-active'); + $(e.currentTarget).addClass('is-active'); + $('.licenses').addClass('has-active-child'); + } + let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter'); + let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter'); + if(typeof licenseValue === "undefined") { + licenseValue = ''; + } else { + licenseValue = `[data-license="${licenseValue}"]`; + } + if(typeof subjectValue === "undefined") { + subjectValue = ''; + } else { + subjectValue = `[data-subject="${subjectValue}"]`; + } + $grid.isotope({ filter: `${subjectValue}${licenseValue}` }); + }); + $('.sort > a').click((e) => { + e.preventDefault(); + $('.sort').toggleClass('is-active'); + }) + $('.sorts a').click((e) => { + e.preventDefault(); + let sortBy = $(e.currentTarget).attr('data-sort'); + $('.sorts a').removeClass('is-active'); + $(e.currentTarget).addClass('is-active'); + $grid.isotope({sortBy: sortBy}); + }); + }, + finalize() { + }, +}; diff --git a/resources/assets/scripts/routes/home.js b/resources/assets/scripts/routes/home.js index 9a41e1e..6836504 100644 --- a/resources/assets/scripts/routes/home.js +++ b/resources/assets/scripts/routes/home.js @@ -1,64 +1,6 @@ -const WPAPI = require( 'wpapi' ); - export default { init() { // JavaScript to be fired on the home page - let books = $('.books'); - let pb = new WPAPI({ endpoint: 'http://pressbooks.dev/wp-json' }); - pb.books = pb.registerRoute( 'pressbooks/v2', '/books/' ); - - function loadNextPage() { - let nextpage = books.attr('data-next-page'); - if (typeof nextpage !== typeof undefined && nextpage !== false) { - const total = parseInt($('.books').attr('data-total-pages')); - const page = parseInt($('.books').attr('data-next-page')); - pb.books().perPage(3).page(page).then(function(data) { - data.forEach((book) => { - books.slick('slickAdd', `
-

Fiction

-

${book.metadata.name}

-

About this book →

-
`); // TODO Localize - }); - if (page < total) { - books.attr('data-next-page', page + 1); - } else { - books.removeAttr('data-next-page'); - } - }).catch(function(err) { // TODO handle error - console.error(err); // eslint-disable-line - }); - } - } - - books.on('init', () => { - loadNextPage(); - }) - - books.slick({ - slidesToShow: 1, - slidesToScroll: 1, - infinite: false, - mobileFirst: true, - prevArrow: '.latest-books .navigation .previous', - nextArrow: '.latest-books .navigation .next', - responsive: [ - { - breakpoint: 960, - settings: { - slidesToShow: 3, - slidesToScroll: 3, - }, - }, - ], - variableWidth: true, - }); - - books.on('afterChange', (slick, currentSlide) => { - if((parseInt($('.slick-active:last').attr('data-slick-index')) + 1) === currentSlide.slideCount) { - loadNextPage(true); - } - }) }, finalize() { }, diff --git a/resources/assets/styles/autoload/_tachyons.scss b/resources/assets/styles/autoload/_tachyons.scss deleted file mode 100644 index 6ab7ab2..0000000 --- a/resources/assets/styles/autoload/_tachyons.scss +++ /dev/null @@ -1,4 +0,0 @@ -// `sage preset` installed this file automatically. -// Running `sage preset` again could result in automatic deletion of this file. -// Because of this, we do not recommend editing this file. -@import "~tachyons-sass/tachyons"; diff --git a/resources/assets/styles/common/_functions.scss b/resources/assets/styles/common/_functions.scss index 871aa09..87f351b 100644 --- a/resources/assets/styles/common/_functions.scss +++ b/resources/assets/styles/common/_functions.scss @@ -1,3 +1,7 @@ -@function em($pixels, $context: $base-font-size) { - @return #{$pixels / $context}em; +@function rem($pixels, $context: $base-font-size) { + @return #{$pixels / $context}rem; +} + +@function percent($target, $context) { + @return ($target / $context) * 100%; } diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss index f1c248e..0f444de 100644 --- a/resources/assets/styles/common/_global.scss +++ b/resources/assets/styles/common/_global.scss @@ -1,3 +1,7 @@ +html { + -webkit-font-smoothing: antialiased; +} + * { box-sizing: border-box; } @@ -5,7 +9,8 @@ body { margin: 0; font-family: $font-family-serif; - font-size: #{$base-font-size}px; + font-size: rem(18); + background: #fff; } h1, @@ -18,27 +23,38 @@ h6 { } h1 { - font-size: em(30); + font-size: rem(30); font-weight: 600; - letter-spacing: em(2); + letter-spacing: rem(2); line-height: (36/30); margin: 0; } h2 { - font-size: em(16); + font-size: rem(16); font-weight: normal; line-height: (30/16); margin: 0; } +.ml-auto { + margin-left: auto; +} + +.mr-auto { + margin-right: auto; +} + :root { - --brand-primary: $brand-primary; - --brand-secondary: $brand-secondary; + --primary: $brand-primary; + --accent: $brand-accent; + --primary-fg: $white; + --accent-fg: $white; + --header-text: $black; } a { - color: var(--brand-primary, $brand-primary); + color: var(--primary, $brand-primary); text-decoration: none; } @@ -54,14 +70,14 @@ a { border-color: var(--brand-primary, $brand-primary); } -.secondary { - color: var(--brand-secondary, $brand-secondary); +.accent { + color: var(--brand-secondary, $brand-accent); } -.bg-secondary { - background-color: var(--brand-secondary, $brand-secondary); +.bg-accent { + background-color: var(--brand-secondary, $brand-accent); } -.b--secondary { - border-color: var(--brand-secondary, $brand-secondary); +.b--accent { + border-color: var(--brand-secondary, $brand-accent); } diff --git a/resources/assets/styles/common/_variables.scss b/resources/assets/styles/common/_variables.scss index ffba8b0..640d9b1 100644 --- a/resources/assets/styles/common/_variables.scss +++ b/resources/assets/styles/common/_variables.scss @@ -1,6 +1,7 @@ /** Colors */ -$brand-primary: #b01109; -$brand-secondary: #015d75; +$brand-primary: #b01109; +$brand-accent: #015d75; +$light-gray: #ececec; $dark-grey: #444; $black: #000; $white: #fff; @@ -17,4 +18,4 @@ $extra-large: 1650px; /** Fonts */ $font-family-sans-serif: 'Karla', sans-serif; $font-family-serif: 'Spectral', serif; -$base-font-size: 18; +$base-font-size: 16; diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss index ce71516..40ea15d 100644 --- a/resources/assets/styles/components/_buttons.scss +++ b/resources/assets/styles/components/_buttons.scss @@ -1,90 +1,47 @@ .button { display: inline-block; - width: 250px; - height: 60px; - margin-top: 2em; - padding: 1em; - border: 2px solid $black; + width: rem(250); + height: rem(60); + padding: rem(19); + border: 2px solid var(--primary, $brand-primary); border-radius: 3px; - background: $black; + background: var(--primary, $brand-primary); font-family: $font-family-sans-serif; - font-size: em(16); + font-size: 1rem; font-weight: 600; - color: $white; - letter-spacing: 2px; + color: var(--primary-fg, $white); + line-height: normal; + letter-spacing: rem(2); text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.5s; + vertical-align: middle; &:hover, &:focus { background: $white; - color: $black; + color: var(--primary, $brand-primary); } - &.button-small { - width: 150px; - height: 40px; - padding: 0.5em; + &.button--small { + width: rem(150); + height: rem(40); + padding: rem(6.5); } - &.button-wide { - width: 305px; + &.button--wide { + width: 19.0625rem; } - &.button-outline { + &.button--outline { background: $white; - color: $black; + color: var(--primary, $brand-primary); &:hover, &:focus { - background: $black; - color: $white; - } - } - - &.button-primary { - border-color: var(--brand-primary, $brand-primary); - background: var(--brand-primary, $brand-primary); - - &:hover, - &:focus { - background: $white; - color: var(--brand-primary, $brand-primary); - } - - &.button-outline { - background: $white; - color: var(--brand-primary, $brand-primary); - - &:hover, - &:focus { - color: $white; - background: var(--brand-primary, $brand-primary); - } - } - } - - &.button-secondary { - border-color: var(--brand-secondary, $brand-secondary); - background: var(--brand-secondary, $brand-secondary); - - &:hover, - &:focus { - background: $white; - color: var(--brand-secondary, $brand-secondary); - } - - &.button-outline { - background: $white; - color: var(--brand-secondary, $brand-secondary); - - &:hover, - &:focus { - color: $white; - background: var(--brand-secondary, $brand-secondary); - } + color: var(--primary-fg, $white); + background: var(--primary, $brand-primary); } } } diff --git a/resources/assets/styles/components/_forms.scss b/resources/assets/styles/components/_forms.scss index 8914fbe..6fe9608 100644 --- a/resources/assets/styles/components/_forms.scss +++ b/resources/assets/styles/components/_forms.scss @@ -9,10 +9,52 @@ } .contact { - margin-bottom: 120px; + background: #f6f6f6; + padding: rem(65) 0 rem(120); + + h3 { + color: var(--primary, $brand-primary); + + &::before { + content: ''; + display: block; + margin: 0 auto 1rem; + width: rem(46); + height: rem(5); + background: var(--accent, $brand-accent); + } + } + + p { + font-size: 0.875rem; + font-weight: 600; + font-family: $font-family-sans-serif; + + &:last-child { + margin-top: rem(47); + } + } + + .success { + color: $dark-green; + } + + .error { + color: $dark-red; + } form { width: 22.125rem; + + .error > input[type="text"], + .error > input[type="email"], + .error > textarea { + border-bottom: solid 2px $dark-red; + } + + .error > ::placeholder { + color: $dark-red; + } } label { @@ -26,6 +68,11 @@ font-size: 0.875rem; font-weight: 600; font-family: $font-family-sans-serif; + background: transparent; + } + + .button { + background: transparent; } textarea { @@ -45,7 +92,7 @@ &:focus { outline: none; - border-bottom: solid 2px var(--brand-primary, $brand-primary); + border-bottom: solid 2px var(--accent, $brand-accent); } } } 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/_footer.scss b/resources/assets/styles/layouts/_footer.scss index 66156ed..4d95c32 100644 --- a/resources/assets/styles/layouts/_footer.scss +++ b/resources/assets/styles/layouts/_footer.scss @@ -3,8 +3,9 @@ margin-bottom: 0; padding: 60px 42.5px 40px; font-family: $font-family-sans-serif; - font-size: em(16); - color: $white; + font-size: rem(16); + color: var(--accent-fg, $white); + background: var(--accent, $brand-accent); ul { margin: 0; @@ -16,13 +17,13 @@ } a { - color: $white; + color: var(--accent-fg, $white); text-decoration: none; border-bottom: solid 1px transparent; &:hover, &:focus { - border-bottom: solid 1px $white; + border-bottom: solid 1px var(--accent-fg, $white); } } @@ -35,7 +36,7 @@ } .network-footer-block { - border-top: solid 1px $white; + border-top: solid 1px var(--accent-fg, $white); } .network-footer-block-1 { @@ -75,7 +76,7 @@ margin-top: 1em; a { - font-size: em(32); + font-size: rem(32); margin: 0 0.25em; transition: all 0.4s; } @@ -102,7 +103,7 @@ } h1 { - font-size: em(16); + font-size: rem(16); font-weight: normal; margin-bottom: 0; @@ -124,7 +125,7 @@ ul { display: none; margin: 0; - font-size: em(14); + font-size: rem(14); } .pressbooks-icon { @@ -174,7 +175,7 @@ .social-media { a { - font-size: em(24); + font-size: rem(24); margin: 0 0.5em 0 0; } } diff --git a/resources/assets/styles/layouts/_header.scss b/resources/assets/styles/layouts/_header.scss index b1db1ad..a5235b1 100644 --- a/resources/assets/styles/layouts/_header.scss +++ b/resources/assets/styles/layouts/_header.scss @@ -16,14 +16,14 @@ top: 7px; width: 25px; height: 3px; - background: var(--brand-primary, $brand-primary); + background: var(--primary, $brand-primary); &::before, &::after { width: 25px; height: 3px; content: ''; - background: var(--brand-primary, $brand-primary); + background: var(--primary, $brand-primary); } &::before { @@ -41,21 +41,26 @@ &.is-active .icon { // TODO - background: $white; + background: var(--primary-fg, $white); &::before, &::after { - background: $white; + background: var(--primary-fg, $white); } } } .brand { - width: 109px; - height: 17px; + width: 6.5625rem; + height: auto; margin: 30px 0 0 17px; - background-image: url('../images/logo.png'); // TODO - background-size: 109px 17px; + + svg, + img { + width: auto; + max-width: 100%; + height: auto; + } } .primary-navigation { @@ -66,9 +71,9 @@ a { display: none; font-family: $font-family-sans-serif; - font-size: em(24); + font-size: rem(24); line-height: (80/24); - color: $white; + color: var(--primary-fg, $white); letter-spacing: 0; } @@ -80,12 +85,12 @@ margin: 0; padding: 0 52px; z-index: 1; - background: var(--brand-primary, $brand-primary); + background: var(--primary, $brand-primary); a { display: block; width: 100%; - border-bottom: solid 1px $white; + border-bottom: solid 1px var(--primary-fg, $white); &:last-child { border-bottom: 0; @@ -115,11 +120,9 @@ } .brand { - width: 265px; - height: 40px; + width: 16.5625rem; + height: auto; margin-top: 40px; - background-image: url('../images/logo@2x.png'); // TODO - background-size: 265px 40px; } .primary-navigation { @@ -130,20 +133,20 @@ a { display: inline-block; - font-size: em(18); - color: $black; + font-size: rem(18); + color: var(--header-text, $black); line-height: normal; &:hover, &:focus { - color: var(--brand-primary, $brand-primary); + color: var(--primary, $brand-primary); } - &.catalog { + &:nth-child(1) { margin-right: auto; } - &.contact { + &:nth-child(2) { margin: 0 1em 0 auto; } } @@ -158,17 +161,17 @@ height: 576px; p { - font-size: em(30); + font-size: rem(30); letter-spacing: 0.75px; line-height: (40/30); } } h1 { - margin-bottom: 0.5em; - font-size: em(72); + margin-bottom: rem(32); + font-size: rem(72); line-height: (40/72); - letter-spacing: 1.8px; + letter-spacing: rem(1.8); } } } diff --git a/resources/assets/styles/layouts/_pages.scss b/resources/assets/styles/layouts/_pages.scss index 93abe65..267f385 100644 --- a/resources/assets/styles/layouts/_pages.scss +++ b/resources/assets/styles/layouts/_pages.scss @@ -1,226 +1,2 @@ -.home { - .block, - .latest-books { - height: 445px; - background-color: $white; - 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 { - .widget_text:nth-child(2) { - border: solid 2px var(--brand-primary, $brand-primary); - box-shadow: unset; - } - } - - .blocks.blocks-4 { - .widget_text:nth-child(2) { - color: $white; - background: var(--brand-secondary, $brand-secondary); - - h3::before { - background-color: $white; - } - - .button { - border-color: $white; - background: transparent; - - &:hover, - &:focus { - color: var(--brand-secondary, $brand-secondary); - background: $white; - } - } - } - - .widget_text:nth-child(3) { - border: solid 2px var(--brand-primary, $brand-primary); - box-shadow: unset; - } - } - - .latest-books { - box-shadow: unset; - height: auto; - padding-bottom: 0 0 50px; - - h3 { - margin-top: 70px; - } - - .book, - .slick-slide { - width: 100vw; - height: 386px; - margin: 45px 0 0; - padding: 0 29.5px; - border: solid 2px; - - a { - font-family: $font-family-sans-serif; - color: $white; - text-decoration: none; - } - - .subject { - height: 91px; - margin-top: 24px; - font-size: em(24); - } - - .title { - height: 329px - 115px; - font-size: em(30); - font-weight: 500; - } - - .read-more { - font-size: em(18); - } - } - - .navigation { - a { - &.slick-disabled { - opacity: 0; - } - } - } - } -} - -@media (min-width: $medium) { - .home { - .wrap { - margin-top: -366px; - } - - .block { - width: 775px; - margin-bottom: 119px; - padding: 0 90px; - box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); - - &:last-child { - margin-bottom: 4.0625rem; - } - - h3 { - font-size: em(48); - line-height: (56/48); - - &::before { - width: 74px; - } - } - - p { - font-size: em(18); - line-height: (32/18); - } - } - - .latest-books { - width: 100%; - - .books { - flex-direction: row; - justify-content: space-between; - } - - .book, - .slick-slide { - width: 300px; - margin-right: 30px; - - &:last-child { - margin-right: 0; - } - } - } - } -} - -@media (min-width: $large) { - .home { - .block { - width: 1115px; - height: 494px; - } - - .latest-books { - width: 1200px; - margin-bottom: 0; - - .book, - .slick-slide { - width: 367px; - margin-right: 50px; - - &:last-child { - margin-right: 0; - } - } - } - } -} - -@media (min-width: $extra-large) { - .home { - .block { - width: 1115px; - box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); - } - - .blocks.blocks-4 { - display: flex; - flex-flow: row wrap; - width: 1615px; - - .widget_text { - width: 1115px; - margin-right: auto; - margin-left: auto; - } - - .widget_text:nth-child(1), - .widget_text:nth-child(2) { - width: 775px; - } - - .widget_text:nth-child(1) { - margin-right: 65px; - } - } - } -} +@import 'pages/front-page'; +@import 'pages/catalog'; diff --git a/resources/assets/styles/layouts/pages/_catalog.scss b/resources/assets/styles/layouts/pages/_catalog.scss new file mode 100644 index 0000000..c108d56 --- /dev/null +++ b/resources/assets/styles/layouts/pages/_catalog.scss @@ -0,0 +1,514 @@ +.catalog { + .banner .container { + height: rem(381); + } + + .banner .primary-navigation { + height: rem(381); + } + + .page-header { + display: flex; + flex-direction: column; + justify-content: center; + height: rem(381); + margin-top: rem(-381); + + h1 { + color: var(--primary, $brand-primary); + margin-bottom: 2rem; + font-size: rem(36); + line-height: 0.55556; + letter-spacing: 0.1125rem; + } + } + + .network-catalog { + width: 100%; + padding-bottom: rem(152); + } + + .controls { + width: 100%; + } + + .filters, + .search, + .sort { + width: 100%; + border-top: solid 2px var(--accent, $brand-accent); + background: $white; + + a { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: rem(16) rem(19); + font-size: rem(16); + font-weight: 600; + font-family: $font-family-sans-serif; + letter-spacing: rem(0.67); + color: $black; + + &:hover, + &:focus { + background: #fafdff; + color: var(--primary, $brand-primary); + } + } + + .has-active-child > a { + color: var(--primary, $brand-primary); + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + font-size: rem(16); + font-family: $font-family-sans-serif; + letter-spacing: rem(0.67); + + a { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-weight: normal; + cursor: pointer; + + .close { + display: inline-block; + float: right; + margin-top: rem(-2); + font-size: rem(20); + opacity: 0; + transition: opacity 0.5s; + } + } + + a.is-active { + font-weight: 600; + color: var(--primary, $brand-primary); + + .close { + opacity: 1; + } + } + } + } + } + + .arrow { + path { + fill: var(--primary, $brand-primary); + } + } + + .is-active > a .arrow { + transform: rotate(180deg); + } + + .filters { + .filter-groups { + display: none; + border-top: solid 2px var(--accent, $brand-accent); + + h3 { + margin: 0; + border-top: solid 1px $light-gray; + } + + h3:first-of-type { + border-top: none; + } + } + + .licenses { + display: none; + } + + .filter-list { + display: none; + } + + &.is-active { + .filter-groups, + .licenses { + display: block; + } + } + + .is-active ul { + display: block; + } + } + + .search { + display: none; + } + + .sort { + border-bottom: solid 2px var(--accent, $brand-accent); + + .sorts { + display: none; + border-top: solid 2px var(--accent, $brand-accent); + } + + &.is-active { + .sorts { + display: block; + } + } + } + + .books { + align-self: flex-start; + width: percent(358, 360); + margin: rem(32) 0 0 percent(10.5, 360); + padding: 0; + } + + .book { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: percent(165, 358); + margin: 0 percent(9, 358) rem(8) 0; + height: rem(230); + float: left; + padding: 1.5rem rem(8) rem(26); + border: solid 2px var(--accent, $brand-accent); + background: var(--accent, $brand-accent); + + p { + margin: 0; + } + + a { + font-family: $font-family-sans-serif; + color: var(--accent-fg, $white); + text-decoration: none; + } + + .subject { + height: rem(44); + font-size: rem(14); + } + + .title { + height: rem(118); + font-size: rem(16); + font-weight: 600; + line-height: (20/16); + } + + .read-more { + font-size: rem(14); + } + } + + .catalog-navigation { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + margin-top: rem(83); + align-items: baseline; + font-family: $font-family-sans-serif; + + a { + color: $black; + + &:hover, + &:focus { + color: var(--primary, $brand-primary); + } + } + + .previous, + .next { + display: block; + margin: 0 rem(26); + font-family: $font-family-sans-serif; + font-size: rem(16); + + svg { + width: rem(16.2); + height: rem(12.5); + margin: 0 rem(6); + + path { + fill: var(--primary, $brand-primary); + } + } + } + + .pages { + display: inline-block; + border-bottom: solid 2px #ececec; + + a, + span { + display: inline-block; + width: rem(41); + padding: rem(8) 0; + font-size: rem(24); + text-align: center; + } + + .current { + border-bottom: solid rem(6) var(--primary, $brand-primary); + } + } + } +} + +@media (min-width: 768px) { + .catalog { + .controls { + width: percent(706, 768); + height: rem(52); + margin: rem(60) percent(29, 768) rem(20) percent(33, 768); + + .filters, + .search, + .sort { + position: relative; + border-top: 0; + border-bottom: solid 2px var(--accent, $brand-accent); + z-index: 99; + } + + .filters { + float: left; + width: rem(360); + + .filter-groups { + border-right: solid 1px #ececec; + border-left: solid 1px #ececec; + } + } + + .sort { + float: right; + width: rem(160); + + .sorts { + border-right: solid 1px #ececec; + border-bottom: solid 1px #ececec; + border-left: solid 1px #ececec; + } + } + } + + .books { + align-self: flex-start; + width: percent(735, 768); + margin-bottom: rem(15); + margin-left: percent(24, 768); + } + + .book { + width: percent(230, 735); + height: rem(260); + margin: 0 percent(15, 735) 2rem 0; + padding: 0 rem(14) rem(21.35); + + .subject { + height: rem(45.85); + font-size: rem(18); + } + + .title { + height: rem(147.65); + font-size: rem(22); + font-weight: 600; + line-height: (40/30); + } + + .read-more { + font-size: rem(16); + } + } + } +} + +@media (min-width: $medium) { + .catalog { + .page-header { + h1 { + font-size: rem(72); + } + } + } +} + +@media #{$breakpoint-large} { + .catalog { + .banner { + .container { + height: rem(450); + } + + .primary-navigation { + height: 40px; + } + + .brand { + text-align: center; + + img { + max-height: rem(60); + } + } + } + + .page-header { + height: rem(360); + margin-top: rem(-360); + } + } +} + +@media (min-width: $extra-large) { + .catalog { + .main { + width: rem(1535); + margin: 0 auto; + } + + .network-catalog { + margin-top: rem(205); + } + + .controls { + width: 100%; + margin: 0 0 rem(64); + + .filters { + width: rem(286); + border-bottom: 0; + + > a { + border-bottom: solid 3px var(--accent, $brand-accent); + + &:hover, + &:focus { + color: $black; + background: $white; + cursor: default; + } + + .arrow { + display: none; + } + } + + .filter-groups { + display: block; + border-right: 0; + border-top: 0; + border-left: 0; + + .subjects { + border-bottom: solid 1px #ececec; + } + } + + .licenses { + display: block; + margin-top: rem(60); + + > a { + background: var(--primary, $brand-primary); + color: var(--primary-fg, $white); + + .arrow { + path { + fill: var(--primary-fg, $white); + } + } + } + } + + ul li { + a { + padding-top: 0; + padding-bottom: 0; + line-height: 2; + } + + &:last-child a { + padding-bottom: 1rem; + } + } + } + + .sort { + .sorts { + border-top: solid 3px var(--accent, $brand-accent); + border-right: 0; + border-left: 0; + } + } + } + + .books { + width: percent(1221.5, 1535); + margin: 0 0 0 percent(316, 1535); + } + + .book { + width: percent(367, 1221.5); + height: rem(386); + margin: 0 0 2rem percent(39.5, 1221.5); + padding: 1.5rem 1.85rem 2.1875rem; + + .subject { + height: 4.625rem; + font-size: rem(24); + } + + .title { + height: 13rem; + font-size: rem(30); + font-weight: 500; + line-height: (40/30); + } + + .read-more { + font-size: rem(18); + } + } + } +} + +.catalog.no-js { + .filters { + .arrow { + display: none; + } + + .filter-groups, + .licenses, + .filter-list { + display: block; + } + } + + .sort { + .arrow { + display: none; + } + + .sorts { + display: block; + } + } +} diff --git a/resources/assets/styles/layouts/pages/_front-page.scss b/resources/assets/styles/layouts/pages/_front-page.scss new file mode 100644 index 0000000..2e5468c --- /dev/null +++ b/resources/assets/styles/layouts/pages/_front-page.scss @@ -0,0 +1,404 @@ +.home { + .block { + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 0.78125rem; + display: flex; + height: rem(445); + background-color: $white; + margin-left: auto; + margin-right: auto; + text-align: center; + + p { + font-size: rem(18); + line-height: (32/16); + } + } + + .blocks.blocks-2, + .blocks.blocks-3 { + .widget_text:nth-child(2) { + margin-right: 0.5rem; + margin-left: 0.5rem; + border: solid 2px var(--primary, $brand-primary); + box-shadow: unset; + } + } + + .blocks.blocks-4 { + .widget_text:nth-child(2) { + color: var(--accent-fg, $white); + background: var(--accent, $brand-accent); + + h3 { + color: var(--accent-fg, $white); + + &::before { + background: var(--accent-fg, $white); + } + } + + .button { + color: var(--accent-fg, $white); + border-color: var(--accent-fg, $white); + background: transparent; + + &:hover, + &:focus { + color: var(--accent, $brand-accent); + background: var(--accent-fg, $white); + } + } + } + + .widget_text:nth-child(3) { + margin-top: 2rem; + margin-right: 0.5rem; + margin-left: 0.5rem; + border: solid 2px var(--primary, $brand-primary); + box-shadow: unset; + } + } + + .blocks.blocks-2 .widget_text:nth-child(2), + .blocks.blocks-3 .widget_text:nth-child(2), + .blocks.blocks-4 .widget_text:nth-child(3) { + background: transparent; + margin-bottom: rem(400); + + &::after { + z-index: -1; + content: ""; + display: block; + width: 100vw; + height: rem(444); + background-image: url('../images/banner.jpg'); + background-position: center; + background-size: cover; + position: absolute; + top: rem(1410); + left: 0; + } + } + + .blocks.blocks-4 .widget_text:nth-child(3) { + &::after { + top: rem(1880); + } + } + + .block, + .latest-books { + h3 { + font-size: rem(30); + font-weight: 600; + color: var(--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: var(--accent, $brand-accent); + } + } + } + + .latest-books { + height: auto; + padding: 0 0 rem(154); + + h3 { + text-align: center; + text-transform: uppercase; + margin-top: 4.375rem; + margin-bottom: 2.8125rem; + } + + .track { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + max-width: 22.9375rem; + margin-left: auto; + margin-right: auto; + margin-bottom: 2rem; + padding: 0 0.46875rem; + position: relative; + } + + .books { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + order: 0; + padding: 0; + width: 100%; + margin-bottom: rem(34); + } + + .book { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + max-width: 22.9375rem; + height: 24.125rem; + margin: 0 0 2rem; + padding: 1.5rem 1.85rem 2.1875rem; + border: solid 2px var(--accent, $brand-accent); + background: var(--accent, $brand-accent); + + a { + margin: 0; + font-family: $font-family-sans-serif; + color: var(--accent-fg, $white); + text-decoration: none; + text-align: center; + } + + .subject { + height: 4.625rem; + margin: 0; + font-size: rem(24); + text-align: center; + } + + .title { + height: 13rem; + margin: 0; + font-size: rem(30); + font-weight: 500; + line-height: (40/30); + text-align: left; + } + + .read-more { + margin: 0; + font-size: rem(18); + text-align: left; + } + + &:last-child { + margin-bottom: 0; + } + } + + .previous, + .next { + display: block; + width: auto; + height: auto; + + svg { + path { + fill: var(--primary, $brand-primary); + } + } + } + + .previous { + order: 1; + margin-right: auto; + } + + .next { + order: 2; + margin-left: auto; + } + + .catalog-link { + text-align: center; + } + } +} + +@media (min-width: $medium) { + .home { + .wrap { + margin-top: rem(-366); + } + + .block { + width: rem(775); + height: rem(494); + margin-bottom: rem(119); + padding: 0 90px; + box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); + + &:last-child { + margin-bottom: 4.0625rem; + } + + h3 { + font-size: rem(48); + line-height: (56/48); + + &::before { + width: 74px; + } + } + + p { + font-size: rem(18); + line-height: (32/18); + } + } + + .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; + } + + .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-bottom: rem(119); + + &::after { + height: rem(600); + top: rem(1547); + } + } + + .blocks.blocks-4 .widget_text:nth-child(3) { + &::after { + top: rem(2177); + } + } + + .latest-books { + width: 100%; + margin-left: auto; + margin-right: auto; + + h3 { + margin-bottom: 4.375rem; + } + + .track { + display: flex; + flex-flow: row nowrap; + width: 100%; + max-width: 100%; + margin: 0; + padding: 0; + } + + .next, + .previous { + position: absolute; + top: rem(165.5); + + svg { + width: 2.4375rem; + height: 1.875rem; + } + } + + .next { + margin-right: 0.9375rem; + right: 0; + } + + .previous { + order: 0; + margin-left: 0.9375rem; + left: 0; + } + + .books { + width: auto; + min-width: 50rem; + flex-direction: row; + order: 1; + justify-content: space-between; + margin-bottom: 2rem; + } + + .book { + width: 30%; + max-width: 19.54rem; + + &:last-child { + margin-bottom: 2rem; + } + } + } + } +} + +@media (min-width: $large) { + .home { + .block { + width: rem(1115); + } + + .latest-books { + width: 100%; + margin-bottom: 0; + + .track { + width: 100%; + margin: 0 auto; + max-width: 87rem; + } + + .books { + width: 100%; + max-width: 75rem; + } + + .book { + min-width: 19.54rem; + max-width: 22.9375rem; + } + } + } +} + +@media (min-width: $extra-large) { + .home { + .block { + width: 1115px; + box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); + } + + .blocks.blocks-4 { + display: flex; + flex-flow: row wrap; + width: 1615px; + + .widget_text { + width: 1115px; + margin-right: auto; + margin-left: auto; + } + + .widget_text:nth-child(1), + .widget_text:nth-child(2) { + width: 775px; + } + + .widget_text:nth-child(1) { + margin-right: 65px; + } + } + + .blocks.blocks-4 .widget_text:nth-child(3) { + &::after { + top: rem(1596); + } + } + } +} diff --git a/resources/assets/styles/login.scss b/resources/assets/styles/login.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/styles/main.scss b/resources/assets/styles/main.scss index 0e43f27..4441e9c 100644 --- a/resources/assets/styles/main.scss +++ b/resources/assets/styles/main.scss @@ -1,15 +1,12 @@ @import "common/variables"; -/** Import everything from autoload */ -@import "./autoload/**/*"; - /** * Import npm dependencies * * Prefix your imports with `~` to grab from node_modules/ * @see https://github.com/webpack-contrib/sass-loader#imports */ -@import "~slick-carousel/slick/slick"; +@import "~tachyons-sass/tachyons"; /** Import theme styles */ @import "common/functions"; diff --git a/resources/views/front-page.blade.php b/resources/views/front-page.blade.php index 58742a0..00730cf 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 @@ -19,7 +19,29 @@ @endcomponent @endif @if(get_option('pb_front_page_catalog')) - @include('partials.front-page-catalog') +
+

{{ $latest_books_title }}

+
+
+ @foreach($catalog_data['books'] as $book) + @include('partials.book', ['book' => $book]) + @endforeach +
+ @if($previous_page) + + @endif + @if($next_page <= $catalog_data['pages']) + + @endif +
+
+ {{ __('View Complete Catalog', 'aldine') }} +
+
@endif
@endsection diff --git a/resources/views/page-catalog.blade.php b/resources/views/page-catalog.blade.php new file mode 100644 index 0000000..8a65c8f --- /dev/null +++ b/resources/views/page-catalog.blade.php @@ -0,0 +1,67 @@ +{{-- + Template Name: Catalog +--}} + +@extends('layouts.app') + +@section('content') + @include('partials.page-header') +
+
+
+

{{ __('Search by titles or keyword', 'aldine') }}

+
+
+ {{ __('Filter by', 'aldine') }} +
+ @foreach($subject_groups as $key => $val) +
+ {{ $val['title'] }} +
    + @foreach($val['subjects'] as $k => $v) +
  • {{ $v }}×
    • + @endforeach +
+
+ @endforeach +
+
+ {{ __('Licenses', 'aldine' ) }} +
    + @foreach($licenses as $key => $value) +
  • {{ $value }}×
    • + @endforeach +
+
+
+
+ {{ __('Sort by', 'aldine') }} + +
+
+
+ @foreach($catalog_data['books'] as $book) + @include('partials.book', ['book' => $book]) + @endforeach +
+ @if($catalog_data['pages'] > 1) + + @endif +
+@endsection diff --git a/resources/views/partials/book.blade.php b/resources/views/partials/book.blade.php new file mode 100644 index 0000000..0b9738b --- /dev/null +++ b/resources/views/partials/book.blade.php @@ -0,0 +1,17 @@ +
+ @if(isset($book['metadata']['keywords'])) +

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

+ @endif +

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

+

+ {{ __('About this book →', 'aldine') }} +

+
diff --git a/resources/views/partials/contact-form.blade.php b/resources/views/partials/contact-form.blade.php index 4fb49c3..5411ae3 100644 --- a/resources/views/partials/contact-form.blade.php +++ b/resources/views/partials/contact-form.blade.php @@ -1,11 +1,22 @@

{{ $contact_form_title }}

-
+ + @if($contact_form_response) +

{{ $contact_form_response['message'] }}

+ @endif -

-

-

-

-

+

+ +

+

+ +

+

+ +

+

+ +

+

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 4ca3f2f..6aedce9 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -3,7 +3,7 @@ @if(get_option('pb_network_contact_form')) @include('partials.contact-form') @endif -
+
@if(App::networkFooter(1) !== 'empty') @php(dynamic_sidebar('network-footer-block-1')) @@ -31,14 +31,14 @@
- @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/pb.svg')) + @php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))

{!! sprintf(__('Powered by %s', 'aldine'), 'Pressbooks') !!}