Moved submenu to offcanvas

stashr/templates/all_volumes_page.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()">
+                <a class="fa-stack p-0 text-white">
-                    <i class="fas fa-bars fa-stack-1x"></i>
+                    <i class="fas fa-bars fa-stack-1x" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"></i>
-                </span>
+                </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: ''} },

stashr/templates/base.html

@@ -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 %}">