Moved submenu to offcanvas

nightly
Andrew 4 years ago
parent 0349435dcf
commit 03e2be9fa8
  1. 67
      stashr/templates/all_volumes_page.html
  2. 2
      stashr/templates/base.html

@ -132,10 +132,11 @@ Vue.component('volumes', {
<div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
<div class="row d-flex flex-nowrap w-100 m-0 p-3 bg-mine">
<input type="text" v-model="search" class="form-control flex-shrink-1" placeholder="Search Volumes..." />
<span class="fa-stack p-0 text-white" onclick="toggleSubMenu()">
<i class="fas fa-bars fa-stack-1x"></i>
</span>
<a class="fa-stack p-0 text-white">
<i class="fas fa-bars fa-stack-1x" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"></i>
</a>
</div>
<!--
<div class="row d-flex flex-wrap w-100 m-0 p-0 stashr-submenu">
<div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
<div class="d-flex flex-grow-1">
@ -181,6 +182,7 @@ Vue.component('volumes', {
</div>
</div>
</div>
-->
</div>
<ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
<volume-item
@ -189,6 +191,65 @@ Vue.component('volumes', {
v-bind:key="volume.volume_id"
></volume-item>
</ul>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Sort/Filter</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="m-3">
<div class="my-2">
<i class="fas fa-sort"></i>
<strong>Sort</strong>
</div>
<select class="form-select" aria-label="Default select example" v-model="sorted">
<option value="volume_sort_title">Name</option>
<option value="volume_year">Year</option>
<option value="volume_total">Length</option>
<option value="progress">Progress</option>
</select>
</div>
<div class="m-3">
<div class="my-2">
<i class="fas fa-filter"></i>
<strong>Volume Status</strong>
</div>
<select class="form-select" aria-label="Default select example" v-model="filter">
<option :value="''">All</option>
<option :value=false>Ended</option>
<option :value=true>Ongoing</option>
</select>
</div>
<div class="m-3">
<div class="my-2">
<i class="fas fa-filter"></i>
<strong>Publisher</strong>
</div>
<select class="form-select" aria-label="Default select example" v-model="publisher">
<option :value="''">All</option>
<publisher-item
v-for="publisher in publishers"
v-bind:publisher="publisher"
v-bind:key="publisher.publisher_id"
></publisher-item>
</select>
</div>
<div class="m-3">
<div class="my-2">
<i class="fas fa-filter"></i>
<strong>Age Rating</strong>
</div>
<select class="form-select" aria-label="Default select example" v-model="rating">
<option :value="''">All</option>
<rating-item
v-for="rating in ratings"
v-bind:rating="rating"
v-bind:key="rating.rating_id"
></rating-item>
</select>
</div>
</div>
</div>
</div>
`,
data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title', rating: '', publisher: ''} },

@ -60,11 +60,13 @@
Volumes
</a>
</li>
<!--
<li>
<a href="{{ url_for('all_publishers_page') }}" class="nav-link text-white{% if request.path == url_for('all_publishers_page') %} active{% endif %}">
Publishers
</a>
</li>
-->
{% if current_user.role == 'admin' %}
<li>
<a href="{{ url_for('scrape_folders_page') }}" class="nav-link text-white{% if request.path == url_for('scrape_folders_page') %} active{% endif %}">

Loading…
Cancel
Save