mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-10-05 09:42:20 +02:00
Update:Show siderail on all pages not just library pages
This commit is contained in:
advplyr
parent
113026ce13
commit
eaa383b6d8
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px">
|
||||
<div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
|
||||
<!-- <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px"> -->
|
||||
<div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-40" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
|
||||
<!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
|
||||
<div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
|
||||
|
||||
<nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
@ -79,6 +82,13 @@ export default {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isShowingBookshelfToolbar() {
|
||||
if (!this.$route.name) return false
|
||||
return this.$route.name.startsWith('library')
|
||||
},
|
||||
offsetTop() {
|
||||
return 64
|
||||
},
|
||||
showExperimentalFeatures() {
|
||||
return this.$store.state.showExperimentalFeatures
|
||||
},
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
<div class="text-white max-h-screen h-screen overflow-hidden bg-bg">
|
||||
<app-appbar />
|
||||
|
||||
<Nuxt />
|
||||
<app-side-rail v-if="isShowingSideRail" class="hidden md:block" />
|
||||
<div id="app-content" class="h-full" :class="{ 'has-siderail': isShowingSideRail }">
|
||||
<Nuxt />
|
||||
</div>
|
||||
|
||||
<app-stream-container ref="streamContainer" />
|
||||
|
||||
@ -45,6 +48,13 @@ export default {
|
||||
},
|
||||
isCasting() {
|
||||
return this.$store.state.globals.isCasting
|
||||
},
|
||||
isShowingSideRail() {
|
||||
if (!this.$route.name) return false
|
||||
return !this.$route.name.startsWith('config')
|
||||
},
|
||||
appContentMarginLeft() {
|
||||
return this.isShowingSideRail ? 80 : 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -551,4 +561,13 @@ export default {
|
||||
.Vue-Toastification__toast-body.custom-class-1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
width: 100%;
|
||||
}
|
||||
#app-content.has-siderail {
|
||||
width: calc(100% - 80px);
|
||||
max-width: calc(100% - 80px);
|
||||
margin-left: 80px;
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar is-home />
|
||||
<div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<template v-for="author in authors">
|
||||
<cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<app-book-shelf-toolbar is-home />
|
||||
<div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<template v-for="author in authors">
|
||||
<cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar :page="id || ''" :view-mode.sync="viewMode" />
|
||||
<app-lazy-bookshelf :page="id || ''" :view-mode="viewMode" />
|
||||
</div>
|
||||
</div>
|
||||
<app-book-shelf-toolbar :page="id || ''" :view-mode.sync="viewMode" />
|
||||
<app-lazy-bookshelf :page="id || ''" :view-mode="viewMode" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar is-home />
|
||||
<app-book-shelf-categorized />
|
||||
</div>
|
||||
</div>
|
||||
<app-book-shelf-toolbar is-home />
|
||||
<app-book-shelf-categorized />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar page="podcast-search" />
|
||||
<div class="w-full h-full overflow-y-auto p-12 relative">
|
||||
<div class="w-full max-w-3xl mx-auto">
|
||||
<form @submit.prevent="submit" class="flex">
|
||||
<ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2" />
|
||||
<ui-btn type="submit" :disabled="processing">Submit</ui-btn>
|
||||
</form>
|
||||
</div>
|
||||
<app-book-shelf-toolbar page="podcast-search" />
|
||||
<div class="w-full h-full overflow-y-auto p-12 relative">
|
||||
<div class="w-full max-w-3xl mx-auto">
|
||||
<form @submit.prevent="submit" class="flex">
|
||||
<ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2" />
|
||||
<ui-btn type="submit" :disabled="processing">Submit</ui-btn>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-3xl mx-auto py-4">
|
||||
<p v-if="termSearched && !results.length && !processing" class="text-center text-xl">No podcasts found</p>
|
||||
<template v-for="podcast in results">
|
||||
<div :key="podcast.id" class="flex p-1 hover:bg-primary hover:bg-opacity-25 cursor-pointer" @click="selectPodcast(podcast)">
|
||||
<div class="w-24 min-w-24 h-24 bg-primary">
|
||||
<img v-if="podcast.cover" :src="podcast.cover" class="h-full w-full" />
|
||||
</div>
|
||||
<div class="flex-grow pl-4 max-w-2xl">
|
||||
<a :href="podcast.pageUrl" class="text-lg text-gray-200 hover:underline" target="_blank" @click.stop>{{ podcast.title }}</a>
|
||||
<p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ podcast.artistName }}</p>
|
||||
<p class="text-xs text-gray-400 leading-5">{{ podcast.genres.join(', ') }}</p>
|
||||
<p class="text-xs text-gray-400 leading-5">{{ podcast.trackCount }} Episodes</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-full max-w-3xl mx-auto py-4">
|
||||
<p v-if="termSearched && !results.length && !processing" class="text-center text-xl">No podcasts found</p>
|
||||
<template v-for="podcast in results">
|
||||
<div :key="podcast.id" class="flex p-1 hover:bg-primary hover:bg-opacity-25 cursor-pointer" @click="selectPodcast(podcast)">
|
||||
<div class="w-24 min-w-24 h-24 bg-primary">
|
||||
<img v-if="podcast.cover" :src="podcast.cover" class="h-full w-full" />
|
||||
</div>
|
||||
<div class="flex-grow pl-4 max-w-2xl">
|
||||
<a :href="podcast.pageUrl" class="text-lg text-gray-200 hover:underline" target="_blank" @click.stop>{{ podcast.title }}</a>
|
||||
<p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ podcast.artistName }}</p>
|
||||
<p class="text-xs text-gray-400 leading-5">{{ podcast.genres.join(', ') }}</p>
|
||||
<p class="text-xs text-gray-400 leading-5">{{ podcast.trackCount }} Episodes</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-show="processing" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-25 z-40">
|
||||
<ui-loading-indicator />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="processing" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-25 z-40">
|
||||
<ui-loading-indicator />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar is-home page="search" :search-query="query" />
|
||||
<app-book-shelf-categorized v-if="hasResults" ref="bookshelf" search :results="results" />
|
||||
<div v-else class="w-full py-16">
|
||||
<p class="text-xl text-center">No Search results for "{{ query }}"</p>
|
||||
</div>
|
||||
</div>
|
||||
<app-book-shelf-toolbar is-home page="search" :search-query="query" />
|
||||
<app-book-shelf-categorized v-if="hasResults" ref="bookshelf" search :results="results" />
|
||||
<div v-else class="w-full py-16">
|
||||
<p class="text-xl text-center">No Search results for "{{ query }}"</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<div class="flex h-full">
|
||||
<app-side-rail class="hidden md:block" />
|
||||
<div class="flex-grow">
|
||||
<app-book-shelf-toolbar :selected-series="series" />
|
||||
<app-lazy-bookshelf page="series-books" :series-id="seriesId" />
|
||||
</div>
|
||||
</div>
|
||||
<app-book-shelf-toolbar :selected-series="series" />
|
||||
<app-lazy-bookshelf page="series-books" :series-id="seriesId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user