mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-24 19:11:44 +01:00
452af43916
This patch fixes several problems of the settings menu related to display on mobile devices or small(ish) windows: - The `isMobileLandscape` is now calculated correctly. Previously, this was set to `true` if a device was in portrait mode. - Showing the button to collapse the settings menu and making the menu collapsible now use the same mechanism. Previously, it could happen that the menu was opened and not fixed, but no button to close it again was shown. - The icons fore opening and closing the settings menu are now both arrows, indicating that their functionality is reversed. - The button to open the menu now always has the string “Settings”, instead of using the name of the current page. The current page hader is listed below that anyway and this is the action component to open the settings menu after all. This fixes #1334
105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<div id="page-wrapper" class="page p-2 md:p-6 overflow-y-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
|
|
<app-config-side-nav :is-open.sync="sideDrawerOpen" />
|
|
<div class="configContent" :class="`page-${currentPage}`">
|
|
<div v-show="isMobilePortrait" class="w-full pb-4 px-2 flex border-b border-white border-opacity-10 mb-2 cursor-pointer" @click.stop.prevent="toggleShowMore">
|
|
<span class="material-icons text-2xl cursor-pointer">arrow_forward</span>
|
|
<p class="pl-3 capitalize">{{ $strings.HeaderSettings }}</p>
|
|
</div>
|
|
<nuxt-child />
|
|
</div>
|
|
<div class="fixed bottom-0 right-0 w-10 h-10" @dblclick="setDeveloperMode"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
asyncData({ store, redirect, route }) {
|
|
if (!store.getters['user/getIsAdminOrUp']) {
|
|
// Non-Root user only has access to the listening stats page
|
|
if (route.name !== 'config-stats') {
|
|
redirect('/config/stats')
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
sideDrawerOpen: false
|
|
}
|
|
},
|
|
watch: {
|
|
currentPage: {
|
|
handler() {
|
|
this.sideDrawerOpen = false
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
isMobilePortrait() {
|
|
return this.$store.state.globals.isMobilePortrait
|
|
},
|
|
streamLibraryItem() {
|
|
return this.$store.state.streamLibraryItem
|
|
},
|
|
currentPage() {
|
|
if (!this.$route.name) return this.$strings.HeaderSettings
|
|
var routeName = this.$route.name.split('-')
|
|
if (routeName.length > 0) {
|
|
const pageName = routeName.slice(1).join('-')
|
|
if (pageName === 'log') return this.$strings.HeaderLogs
|
|
else if (pageName === 'backups') return this.$strings.HeaderBackups
|
|
else if (pageName === 'libraries') return this.$strings.HeaderLibraries
|
|
else if (pageName === 'notifications') return this.$strings.HeaderNotifications
|
|
else if (pageName === 'sessions') return this.$strings.HeaderListeningSessions
|
|
else if (pageName === 'stats') return this.$strings.HeaderYourStats
|
|
else if (pageName === 'library-stats') return this.$strings.HeaderLibraryStats
|
|
else if (pageName === 'users') return this.$strings.HeaderUsers
|
|
else if (pageName === 'item-metadata-utils') return this.$strings.HeaderItemMetadataUtils
|
|
}
|
|
return this.$strings.HeaderSettings
|
|
}
|
|
},
|
|
methods: {
|
|
toggleShowMore() {
|
|
this.sideDrawerOpen = !this.sideDrawerOpen
|
|
},
|
|
setDeveloperMode() {
|
|
var value = !this.$store.state.developerMode
|
|
this.$store.commit('setDeveloperMode', value)
|
|
this.$toast.info(`Developer Mode ${value ? 'Enabled' : 'Disabled'}`)
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.configContent {
|
|
margin: auto;
|
|
width: 900px;
|
|
max-width: calc(100% - 176px);
|
|
}
|
|
.configContent.page-library-stats {
|
|
width: 1200px;
|
|
}
|
|
@media (max-width: 1550px) {
|
|
.configContent.page-library-stats {
|
|
margin-left: 176px;
|
|
}
|
|
}
|
|
@media (max-width: 1240px) {
|
|
.configContent {
|
|
margin-left: 176px;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.configContent {
|
|
margin-left: 0px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.configContent.page-library-stats {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
</style> |