Browse Source

Fix desktop license filter.

pull/21/head
Ned Zimmerman 7 years ago
parent
commit
d7b239369b
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 5
      resources/assets/scripts/routes/catalog.js
  2. 54
      resources/assets/styles/layouts/pages/_catalog.scss
  3. 18
      resources/views/page-catalog.blade.php

5
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');

54
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;
}

18
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

Loading…
Cancel
Save