Finish desktop and tablet layouts.

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',

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');
+      if(typeof subjectValue === "undefined") {
-      $(e.currentTarget).addClass('is-active');
+        subjectValue = '';
-      $grid.isotope({ filter: `[data-subject="${subjectValue}"]${licenseValue}` });
+      } 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');
+      $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
-      $(e.currentTarget).addClass('is-active');
-      $grid.isotope({ filter: `[data-license="${licenseValue}"]${subjectValue}` });
     });
     $('.sort > a').click((e) => {
       e.preventDefault();

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 {

resources/views/page-catalog.blade.php

@@ -4,6 +4,9 @@
   @include('partials.page-header')
   <section class="network-catalog">
     <div class="controls">
+      <div class="search">
+        <h2><a href="#search">{{ __('Search by titles or keyword', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a></h2>
+      </div>
       <div class="filters">
         <a href="#filter">{{ __('Filter by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
         <div id="filter" class="filter-groups">
@@ -12,7 +15,7 @@
             <a href="#{{ $key }}">{{ $val['title'] }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
             <ul class="filter-list">
               @foreach($val['subjects'] as $k => $v)
-              <li><a data-filter="{{ $k }}">{{ $v }}</a></li>
+              <li><a data-filter="{{ $k }}">{{ $v }}<span class="close">&times;</span></a></li>
               @endforeach
             </ul>
           </div>
@@ -20,16 +23,13 @@
           <div class="licenses" id="licenses">
             <a href="#licenses">{{ __('Licenses', 'aldine' ) }}<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
             <ul class="filter-list">
-              @foreach((new \Pressbooks\Licensing())->getSupportedTypes() as $key => $val)
+              @foreach($licenses as $key => $value)
-          		  <li><a data-filter="{{ $key }}">{{ $val['desc'] }}</a></li>
+          		  <li><a data-filter="{{ $key }}">{{ $value }}<span class="close">&times;</span></a></li>
               @endforeach
             </ul>
           </div>
         </div>
       </div>
-      <div class="search">
-        <h2><a href="#search">{{ __('Search by titles or keyword', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a></h2>
-      </div>
       <div class="sort">
         <a href="#sort">{{ __('Sort by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
         <ul id="sort" class="sorts">

resources/views/partials/book.blade.php

@@ -5,7 +5,7 @@
 >
   @if(isset($book['metadata']['keywords']))
   <p class="subject">
-    <a href="{{ network_home_url('/catalog/keyword/') . $book['metadata']['keywords'] . '/' }}">{{ $book['metadata']['keywords'] }}</a>
+    <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
   </p>
   @endif
   <p class="title">

resources/views/partials/front-page-catalog.blade.php

@@ -6,7 +6,7 @@
         <div class="book flex flex-column justify-end w-100">
           @if(isset($book['metadata']['keywords']))
           <p class="subject tc ma0">
-            <a href="{{ network_home_url('/catalog/keyword/') . $book['metadata']['keywords'] . '/' }}">{{ $book['metadata']['keywords'] }}</a>
+            <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
           </p>
           @endif
           <p class="title tl ma0">