groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-12-26 21:59:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mobile UI adjustments

Browse source
This commit is contained in:
advplyr 2022-02-09 11:19:02 -06:00
parent 18a095c6e4
commit 70c5db4534
14 changed files with 50 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/components/app/BookShelfToolbar.vue
View file

@ -11,7 +11,7 @@
<p>Series</p>
</nuxt-link>
</div>
<div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center px-2 md:px-8">
<div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
<template v-if="page !== 'search' && !isHome">
<p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
<div v-else class="items-center hidden md:flex">
@ -25,11 +25,11 @@
<span class="font-mono">{{ numShowing }}</span>
</div>
</div>
<div class="flex-grow hidden md:inline-block" />
<div class="flex-grow hidden sm:inline-block" />
<ui-checkbox v-show="showSortFilters" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
<controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-48 h-7.5 ml-4" @change="updateFilter" />
<controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5 ml-4" @change="updateOrder" />
<controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
<controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
<!-- <div v-show="showSortFilters" class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
<div class="h-full px-2 text-white flex items-center rounded-l-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'grid')">
<span class="material-icons" style="font-size: 1.4rem">view_module</span>

24
client/components/app/ConfigSideNav.vue
View file

@ -9,7 +9,7 @@
<div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
</nuxt-link>
<div class="w-full h-10 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamAudiobook && windowHeight > 700 && !isMobile ? '300px' : '65px' }">
<div class="w-full h-10 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamAudiobook && isMobileLandscape ? '300px' : '65px' }">
<p class="font-mono text-sm">v{{ $config.version }}</p>
<a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-sm">Update available: {{ latestVersion }}</a>
</div>
@ -22,10 +22,7 @@ export default {
isOpen: Boolean
},
data() {
return {
windowWidth: 0,
windowHeight: 0
}
return {}
},
computed: {
userIsRoot() {
@ -88,7 +85,10 @@ export default {
return classes.join(' ')
},
isMobile() {
return this.windowWidth < 758
return this.$store.state.globals.isMobile
},
isMobileLandscape() {
return this.$store.state.globals.isMobileLandscape
},
drawerOpen() {
if (this.isMobile) return this.isOpen
@ -120,19 +120,7 @@ export default {
},
closeDrawer() {
this.$emit('update:isOpen', false)
},
resize() {
this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight
}
},
mounted() {
window.addEventListener('resize', this.resize)
this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
}
}
</script>