From 46396f68288703b0e01f3c074e87ceca8cee1259 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Sun, 3 Sep 2017 21:42:20 -0300 Subject: [PATCH] Finish desktop and tablet layouts. --- app/controllers/PageCatalog.php | 13 +- resources/assets/scripts/routes/catalog.js | 38 ++++-- .../assets/styles/layouts/pages/_catalog.scss | 120 +++++++++++++++++- resources/views/page-catalog.blade.php | 12 +- resources/views/partials/book.blade.php | 2 +- .../partials/front-page-catalog.blade.php | 2 +- 6 files changed, 162 insertions(+), 25 deletions(-) diff --git a/app/controllers/PageCatalog.php b/app/controllers/PageCatalog.php index f207a8d..b6e0bbb 100644 --- a/app/controllers/PageCatalog.php +++ b/app/controllers/PageCatalog.php @@ -6,6 +6,15 @@ use Sober\Controller\Controller; class PageCatalog extends Controller { + public function licenses() + { + $licenses = (new \Pressbooks\Licensing())->getSupportedTypes(); + foreach ($licenses as $key => $value) { + $licenses[$key] = preg_replace("/\([^)]+\)/", '', $value['desc']); + } + return $licenses; + } + public function subjectGroups() { return [ @@ -21,7 +30,7 @@ class PageCatalog extends Controller ], ], 'engineering-technology' => [ - 'title' => __('Engineering and Technology', 'aldine'), + 'title' => __('Engineering & Technology', 'aldine'), 'subjects' => [ 'architecture' => 'Architecture', 'bioengineering' => 'Bioengineering', @@ -43,7 +52,7 @@ class PageCatalog extends Controller ], ], 'humanities-arts' => [ - 'title' => __('Humanities and Arts', 'aldine'), + 'title' => __('Humanities & Arts', 'aldine'), 'subjects' => [ 'archaeology' => 'Archaeology', 'art' => 'Art', diff --git a/resources/assets/scripts/routes/catalog.js b/resources/assets/scripts/routes/catalog.js index e1dc3ef..d75f6e8 100644 --- a/resources/assets/scripts/routes/catalog.js +++ b/resources/assets/scripts/routes/catalog.js @@ -32,28 +32,50 @@ export default { $(`.filter-groups ${id}`).toggleClass('is-active'); }) $('.subjects .filter-list a').click((e) => { - let subjectValue = $(e.currentTarget).attr('data-filter'); + 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'); + $(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}"]`; } - $('.subjects .filter-list a').removeClass('is-active'); - $(e.currentTarget).addClass('is-active'); - $grid.isotope({ filter: `[data-subject="${subjectValue}"]${licenseValue}` }); + if(typeof subjectValue === "undefined") { + subjectValue = ''; + } else { + subjectValue = `[data-subject="${subjectValue}"]`; + } + $grid.isotope({ filter: `${subjectValue}${licenseValue}` }); }); $('.licenses .filter-list a').click((e) => { - let licenseValue = $(e.currentTarget).attr('data-filter'); + 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}"]`; } - $('.licenses .filter-list a').removeClass('is-active'); - $(e.currentTarget).addClass('is-active'); - $grid.isotope({ filter: `[data-license="${licenseValue}"]${subjectValue}` }); + $grid.isotope({ filter: `${subjectValue}${licenseValue}` }); }); $('.sort > a').click((e) => { e.preventDefault(); diff --git a/resources/assets/styles/layouts/pages/_catalog.scss b/resources/assets/styles/layouts/pages/_catalog.scss index bdb5ab9..cbba42c 100644 --- a/resources/assets/styles/layouts/pages/_catalog.scss +++ b/resources/assets/styles/layouts/pages/_catalog.scss @@ -17,6 +17,7 @@ .sort { width: 100%; border-top: solid 2px var(--accent, $brand-accent); + background: $white; a { display: flex; @@ -30,7 +31,6 @@ font-family: $font-family-sans-serif; letter-spacing: rem(0.67); color: $black; - transition: color 0.2s; &:hover, &:focus { @@ -39,6 +39,17 @@ } } + .has-active-child > a { + background: var(--link, $brand-primary); + color: $white; + + .arrow { + path { + fill: $white; + } + } + } + ul { margin: 0; padding: 0; @@ -50,13 +61,30 @@ letter-spacing: rem(0.67); a { - display: block; + 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(--link, $brand-primary); + + .close { + opacity: 1; + } } } } @@ -111,6 +139,7 @@ .sorts { display: none; + border-top: solid 2px var(--accent, $brand-accent); } &.is-active { @@ -169,6 +198,42 @@ @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); @@ -217,19 +282,60 @@ } .network-catalog { - display: flex; - flex-direction: row; - align-items: flex-start; margin-top: rem(205); } .controls { - width: percent(314, 1535); + width: 100%; + margin: 0 0 rem(64); + + .filters { + width: rem(286); + + .filter-groups { + border-right: 0; + border-top: 0; + border-left: 0; + + .subjects, + .licenses { + border-bottom: solid 1px #ececec; + } + } + + &.is-active { + border-bottom: 0; + + .filter-groups { + border-top: solid 2px var(--accent, $brand-accent); + } + } + + ul li { + a { + padding-top: 0; + padding-bottom: 0; + line-height: 2; + } + + &:last-child a { + padding-bottom: 1rem; + } + } + } + + .sort { + .sorts { + border-top: solid 2px var(--accent, $brand-accent); + border-right: 0; + border-left: 0; + } + } } .books { width: percent(1221.5, 1535); - margin: 0 0 0 percent(2, 1535); + margin: 0 0 0 percent(316, 1535); } .book { diff --git a/resources/views/page-catalog.blade.php b/resources/views/page-catalog.blade.php index dc6618b..56f95a5 100644 --- a/resources/views/page-catalog.blade.php +++ b/resources/views/page-catalog.blade.php @@ -4,6 +4,9 @@ @include('partials.page-header')
+
+

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

+
{{ __('Filter by', 'aldine') }}
@@ -12,7 +15,7 @@ {{ $val['title'] }}
@@ -20,16 +23,13 @@
{{ __('Licenses', 'aldine' ) }}
    - @foreach((new \Pressbooks\Licensing())->getSupportedTypes() as $key => $val) -
  • {{ $val['desc'] }}
    • + @foreach($licenses as $key => $value) +
  • {{ $value }}×
    • @endforeach
-
-

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

-
{{ __('Sort by', 'aldine') }}
    diff --git a/resources/views/partials/book.blade.php b/resources/views/partials/book.blade.php index 40b21e1..152c97e 100644 --- a/resources/views/partials/book.blade.php +++ b/resources/views/partials/book.blade.php @@ -5,7 +5,7 @@ > @if(isset($book['metadata']['keywords']))

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

    @endif

    diff --git a/resources/views/partials/front-page-catalog.blade.php b/resources/views/partials/front-page-catalog.blade.php index f7acfb8..f2c5c8b 100644 --- a/resources/views/partials/front-page-catalog.blade.php +++ b/resources/views/partials/front-page-catalog.blade.php @@ -6,7 +6,7 @@

    @if(isset($book['metadata']['keywords']))

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

    @endif