sudoxreboot/audiobookshelf-atv
1
0
Fork 0
mirror of https://github.com/sudoxnym/audiobookshelf-atv.git synced 2026-05-21 13:18:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add alternate view to LazybookShelf.vue

Browse source
This commit is contained in:
Sam Bloomingdale 2022-07-27 13:29:07 -05:00
parent a60ff00f7e
commit 96fff469fc
2 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/app.css
View file

@ -57,12 +57,23 @@ body {
background-image: url(/wood_panels.jpg);
}
.altBookshelfRow {
background-image: url(/grey_panel.jpg);
background-size: cover;
}
.bookshelfDivider {
background: rgb(149, 119, 90);
background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
box-shadow: 2px 10px 8px #1111117e;
}
.altBookshelfDivider {
background: rgb(38 38 38);
/*background: linear-gradient(180deg, rgba(191, 193, 195, 1) 0%, rgb(156, 158, 159) 17%, rgb(114, 115, 117) 88%, rgb(120, 120, 122) 100%);*/
box-shadow: 2px 10px 8px #1111117e;
}
/*
Bookshelf Label
*/
@ -78,6 +89,14 @@ Bookshelf Label
color: #fce3a6;
}
.altBookshelfLabel {
background-color: #2d3436;
background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
border-color: rgb(255, 255, 255);
border-style: solid;
color: #ffffff;
}
.cover-bg {
width: calc(100% + 40px);
height: calc(100% + 40px);

15
components/bookshelf/LazyBookshelf.vue
View file

@ -1,8 +1,8 @@
<template>
<div id="bookshelf" class="w-full max-w-full h-full">
<template v-for="shelf in totalShelves">
<div :key="shelf" class="w-full px-2 relative" :class="showBookshelfListView ? '' : 'bookshelfRow'" :id="`shelf-${shelf - 1}`" :style="{ height: shelfHeight + 'px' }">
<div v-if="!showBookshelfListView" class="bookshelfDivider w-full absolute bottom-0 left-0 z-30" style="min-height: 16px" :class="`h-${shelfDividerHeightIndex}`" />
<div :key="shelf" class="w-full px-2 relative" :class="showBookshelfListView ? '' : bookshelfRowStyle" :id="`shelf-${shelf - 1}`" :style="{ height: shelfHeight + 'px' }">
<div v-if="!showBookshelfListView" class="w-full absolute bottom-0 left-0 z-30" style="min-height: 16px" :class="[(shelfDividerStyle), (`h-${shelfDividerHeightIndex}`)]" />
<div v-else class="flex border-t border-white border-opacity-10" />
</div>
</template>
@ -69,6 +69,14 @@ export default {
showBookshelfListView() {
return this.isBookEntity && this.bookshelfListView
},
bookshelfRowStyle() {
if (this.altViewEnabled) return 'altBookshelfRow'
return 'bookshelfRow'
},
bookshelfDividerStyle() {
if (this.altViewEnabled) return 'altBookshelfDivider'
return 'bookshelfDivider'
},
entityName() {
return this.page
},
@ -125,6 +133,9 @@ export default {
if (this.showBookshelfListView) return this.entityWidth
// Includes margin
return this.entityWidth + 24
},
altViewEnabled() {
return this.$store.getters['getAltViewEnabled'];
}
},
methods: {