Fix desktop license filter.

resources/assets/scripts/routes/catalog.js

@@ -26,10 +26,10 @@ export default {
       $(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
       $(`.filter-groups ${id}`).toggleClass('is-active');
     })
-    $('.filter-groups .licenses > a').click((e) => {
+    $('.licenses > a').click((e) => {
       e.preventDefault();
       let id = $(e.currentTarget).attr('href');
-      $(`.filter-groups ${id}`).toggleClass('is-active');
+      $(id).toggleClass('is-active');
     })
     $('.subjects .filter-list a').click((e) => {
       if ($(e.currentTarget).hasClass('is-active')) {
@@ -38,6 +38,7 @@ export default {
       } 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');

resources/assets/styles/layouts/pages/_catalog.scss

@@ -60,14 +60,7 @@
     }
 
     .has-active-child > a {
-      background: var(--link, $brand-primary);
-      color: $white;
-
-      .arrow {
-        path {
-          fill: $white;
-        }
-      }
+      color: var(--link, $brand-primary);
     }
 
     ul {
@@ -135,12 +128,17 @@
       }
     }
 
+    .licenses {
+      display: none;
+    }
+
     .filter-list {
       display: none;
     }
 
     &.is-active {
-      .filter-groups {
+      .filter-groups,
+      .licenses {
         display: block;
       }
     }
@@ -394,23 +392,47 @@
 
       .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,
-          .licenses {
+          .subjects {
             border-bottom: solid 1px #ececec;
           }
         }
 
-        &.is-active {
-          border-bottom: 0;
+        .licenses {
+          display: block;
+          margin-top: rem(60);
 
-          .filter-groups {
-            border-top: solid 2px var(--accent, $brand-accent);
+          a {
+            background: var(--link, $brand-primary);
+            color: $white;
+
+            .arrow {
+              path {
+                fill: $white;
+              }
+            }
           }
         }
 
@@ -429,7 +451,7 @@
 
       .sort {
         .sorts {
-          border-top: solid 2px var(--accent, $brand-accent);
+          border-top: solid 3px var(--accent, $brand-accent);
           border-right: 0;
           border-left: 0;
         }

resources/views/page-catalog.blade.php

@@ -20,14 +20,14 @@
             </ul>
           </div>
           @endforeach
-          <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($licenses as $key => $value)
-          		  <li><a data-filter="{{ $key }}">{{ $value }}<span class="close">&times;</span></a></li>
-              @endforeach
-            </ul>
-          </div>
+        </div>
+        <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($licenses as $key => $value)
+              <li><a data-filter="{{ $key }}">{{ $value }}<span class="close">&times;</span></a></li>
+            @endforeach
+          </ul>
         </div>
       </div>
       <div class="sort">
@@ -44,6 +44,7 @@
         @include('partials.book', ['book' => $book])
       @endforeach
     </div>
+    @if(App::totalPages(9) > 1)
     <nav class="catalog-navigation">
       @if(App::previousPage($current_page))<a class="previous" data-page="{{ App::previousPage($current_page) }}" href="{{ network_home_url('/catalog/page/' . App::previousPage($current_page) . '/') }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg')) {{ __('Previous', 'aldine') }}</a>@endif
       <div class="pages">
@@ -57,5 +58,6 @@
       </div>
       @if(App::nextPage($current_page, 9))<a class="next" data-page="{{ App::nextPage($current_page, 9) }}" href="{{ network_home_url('/catalog/page/' . App::nextPage($current_page, 9) . '/') }}">{{ __('Next', 'aldine') }} @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
     </nav>
+    @endif
   </section>
 @endsection