mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-30 14:49:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Increase height of minimized audio player to accomadate iOS safe area #531

Browse source
This commit is contained in:
advplyr 2023-01-31 15:30:13 -06:00
parent ebd65b4fa7
commit 62a5a2d069
4 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/app.css
View file

@ -20,9 +20,9 @@ body {
} }
#content.playerOpen { #content.playerOpen {
height: calc(100% - 164px); height: calc(100% - 184px);
min-height: calc(100% - 164px); min-height: calc(100% - 184px);
max-height: calc(100% - 164px); max-height: calc(100% - 184px);
} }
#bookshelf { #bookshelf {

12
components/app/AudioPlayer.vue
View file

@ -916,7 +916,7 @@ export default {
} }
.playerContainer { .playerContainer {
height: 100px; height: 120px;
} }
.fullscreen .playerContainer { .fullscreen .playerContainer {
height: 200px; height: 200px;
@ -931,14 +931,14 @@ export default {
#playerTrack { #playerTrack {
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: margin; transition-property: margin;
bottom: 20px; bottom: 35px;
} }
.fullscreen #playerTrack { .fullscreen #playerTrack {
bottom: unset; bottom: unset;
} }
.cover-wrapper { .cover-wrapper {
bottom: 48px; bottom: 68px;
left: 12px; left: 12px;
height: var(--cover-image-height-collapsed); height: var(--cover-image-height-collapsed);
width: var(--cover-image-width-collapsed); width: var(--cover-image-width-collapsed);
@ -959,7 +959,7 @@ export default {
transform-origin: left bottom; transform-origin: left bottom;
width: 40%; width: 40%;
bottom: 56px; bottom: 76px;
left: var(--title-author-left-offset-collapsed); left: var(--title-author-left-offset-collapsed);
text-align: left; text-align: left;
} }
@ -998,7 +998,7 @@ export default {
width: 140px; width: 140px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
bottom: 50px; bottom: 70px;
} }
#playerControls .jump-icon { #playerControls .jump-icon {
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@ -1016,7 +1016,6 @@ export default {
min-width: 40px; min-width: 40px;
min-height: 40px; min-height: 40px;
margin: 0px 14px; margin: 0px 14px;
/* padding: 8px; */
} }
#playerControls .play-btn .material-icons { #playerControls .play-btn .material-icons {
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@ -1046,7 +1045,6 @@ export default {
font-size: 2rem; font-size: 2rem;
} }
.fullscreen #playerControls .play-btn { .fullscreen #playerControls .play-btn {
/* padding: 16px; */
height: 65px; height: 65px;
width: 65px; width: 65px;
min-width: 65px; min-width: 65px;

2
components/readers/EpubReader.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div id="epub-frame" class="w-full"> <div id="epub-frame" class="w-full">
<div id="viewer" class="border border-gray-100 bg-white shadow-md h-full w-full"></div> <div id="viewer" class="border border-gray-100 bg-white shadow-md h-full w-full"></div>
<div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }"> <div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
<p class="text-xs">epub</p> <p class="text-xs">epub</p>
<div class="flex-grow" /> <div class="flex-grow" />

2
pages/localMedia/item/_id.vue
View file

@ -90,7 +90,7 @@
<p class="text-lg text-center px-8">{{ failed ? 'Failed to get local library item ' + localLibraryItemId : 'Loading..' }}</p> <p class="text-lg text-center px-8">{{ failed ? 'Failed to get local library item ' + localLibraryItemId : 'Loading..' }}</p>
</div> </div>
<div v-if="orderChanged" class="fixed left-0 w-full py-4 px-4 bg-bg box-shadow-book flex items-center" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }"> <div v-if="orderChanged" class="fixed left-0 w-full py-4 px-4 bg-bg box-shadow-book flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
<div class="flex-grow" /> <div class="flex-grow" />
<ui-btn small color="success" @click="saveTrackOrder">Save Order</ui-btn> <ui-btn small color="success" @click="saveTrackOrder">Save Order</ui-btn>
</div> </div>