Commit 352c9396 authored by dindigala's avatar dindigala
Browse files

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

refactored toggleBar to toggleIndex / toggleFilter according to window size. toggle switches at 1100px
parent 99eb951d
......@@ -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
......
......@@ -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,
......
<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>
<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: {},
......
// 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
......@@ -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;
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment