refactored toggleBar to toggleIndex / toggleFilter according to window size....

refactored toggleBar to toggleIndex / toggleFilter according to window size. toggle switches at 1100px

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.1] - 2020-08-12
+
+### Changed
+- refactored toggleBar to toggleIndex / toggleFilter according to window size. toggle switches at 1100px
+
 ## [1.2.0] - 2020-08-03
 
 ### Changed

src/components/header.vue

@@ -13,7 +13,7 @@
       <Navbar v-if="config.headers.navigation"
         class="
           col
-          col-md-6
+          col-md-4
           col-xs-12
           column-xs
           justify-md-start
@@ -24,7 +24,7 @@
         :manifests="manifests"
       />
 
-      <Togglebar v-if="config.headers.toggle"
+      <ToggleIndex v-if="config.headers.toggle"
         class="
           col
           col-md-auto
@@ -43,14 +43,14 @@
 <script>
 import Infobar from '@/components/infobar.vue';
 import Navbar from '@/components/navbar.vue';
-import Togglebar from '@/components/togglebar.vue';
+import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
 
 export default {
   name: 'Header',
   components: {
     Infobar,
     Navbar,
-    Togglebar,
+    ToggleIndex,
   },
   props: {
     collectiontitle: String,

src/components/togglebar/toggleFilter.vue

+<template>
+  <section id="filterBtns">
+    <q-btn-dropdown v-if="$q.screen.width < 1100"
+      class="q-mb-md"
+      color="black"
+      label="Toggle panels ..."
+      >
+      <slot />
+    </q-btn-dropdown>
+
+    <div class="without-dropdown" v-else>
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style lang="sass" scoped>
+  #filterBtns
+    align-items: center
+    display: flex
+    justify-content: center
+</style>

src/components/togglebar.vue → src/components/togglebar/toggleIndex.vue

 <template>
   <div>
-    <q-btn-dropdown class="q-mb-md" color="black" label="Toggle panels ..." split>
+    <ToggleFilter>
       <q-list>
         <q-item v-for="(name, idx) in togglekeys" :key="idx"
           clickable
@@ -12,7 +12,7 @@
           {{ panelstates[name].name | capitalize }}
         </q-item>
       </q-list>
-    </q-btn-dropdown>
+    </ToggleFilter>
 
     <q-btn
       class="q-mb-md"
@@ -34,13 +34,17 @@ import {
   fasCircle,
   fasCheckCircle,
 } from '@quasar/extras/fontawesome-v5';
+import ToggleFilter from './toggleFilter';
 
 export default {
-  name: 'Togglebar',
+  name: 'ToggleIndex',
   props: {
     imageurl: String,
     panelstates: Object,
   },
+  components: {
+    ToggleFilter,
+  },
   data() {
     return {
       states: {},

src/css/global.sass

 // global extra classes
-.scroll-panel 
+.scroll-panel
   position: relative
-  .sticky 
+  .sticky
     background: #fff
     display: flex
     justify-content: flex-start
@@ -10,16 +10,16 @@
     top: 0
     width: 100%
     z-index: 99
-  
 
-.openseadragon-canvas 
-  &:focus 
+.openseadragon-canvas
+  &:focus
     outline: none
-  
 
-.content-panel 
-  .q-tab-panel 
-    > * 
+.content-panel
+  .q-tab-panel
+    > *
       padding: 0 !important
-    
-  
+
+.without-dropdown
+  > *
+    display: flex

src/views/mainview.vue

@@ -128,7 +128,7 @@ export default {
     this.tab = this.config.panels.tabs.default;
   },
   mounted() {
-    // emitted by @/components/togglebar.vue
+    // emitted by @/components/toggleIndex.vue
     this.$root.$on('update-panel-status', (status) => {
       this.states = status;
     });