mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-15 16:34:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:UI for playlist & rss feed modal to add more padding on top and bottom to prevent iOS cutoff

Browse source
This commit is contained in:
advplyr 2023-12-16 15:06:49 -06:00
parent 6ae4d72b68
commit 2b8ed16616
2 changed files with 11 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/modals/playlists/AddCreateModal.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<modals-fullscreen-modal v-model="show" :processing="processing"> <modals-fullscreen-modal v-model="show" :processing="processing">
<div class="flex items-end justify-between h-16 px-4 pb-2"> <div class="flex items-end justify-between h-24 px-4 pb-2">
<h1 class="text-lg">{{ $strings.LabelAddToPlaylist }}</h1> <h1 class="text-lg">{{ $strings.LabelAddToPlaylist }}</h1>
<button class="flex" @click="show = false"> <button class="flex" @click="show = false">
<span class="material-icons">close</span> <span class="material-icons">close</span>
@ -8,13 +8,13 @@
</div> </div>
<!-- create new playlist form --> <!-- create new playlist form -->
<div v-if="showPlaylistNameInput" class="w-full h-full max-h-[calc(100vh-128px)] flex items-center"> <div v-if="showPlaylistNameInput" class="w-full h-full max-h-[calc(100vh-176px)] flex items-center">
<div class="w-full px-4"> <div class="w-full px-4">
<div class="flex mb-4 items-center"> <div class="flex mb-4 items-center">
<div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false"> <div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false">
<span class="material-icons text-3xl">arrow_back</span> <span class="material-icons text-3xl">arrow_back</span>
</div> </div>
<p class="text-xl pl-2">{{ $strings.HeaderNewPlaylist }}</p> <p class="text-xl pl-2 leading-none">{{ $strings.HeaderNewPlaylist }}</p>
<div class="flex-grow" /> <div class="flex-grow" />
</div> </div>
@ -26,7 +26,7 @@
</div> </div>
<!-- playlists list --> <!-- playlists list -->
<div v-if="!showPlaylistNameInput" class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-128px)]"> <div v-if="!showPlaylistNameInput" class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-176px)]">
<div class="w-full h-full" v-show="!showPlaylistNameInput"> <div class="w-full h-full" v-show="!showPlaylistNameInput">
<template v-for="playlist in sortedPlaylists"> <template v-for="playlist in sortedPlaylists">
<modals-playlists-playlist-row :key="playlist.id" :in-playlist="playlist.isItemIncluded" :playlist="playlist" @click="clickPlaylist" @close="show = false" /> <modals-playlists-playlist-row :key="playlist.id" :in-playlist="playlist.isItemIncluded" :playlist="playlist" @click="clickPlaylist" @close="show = false" />
@ -38,8 +38,8 @@
</div> </div>
<!-- create playlist btn --> <!-- create playlist btn -->
<div v-if="!showPlaylistNameInput" class="flex items-start justify-between h-16 pt-2 absolute bottom-0 left-0 w-full"> <div v-if="!showPlaylistNameInput" class="flex items-start justify-between h-20 pt-2 absolute bottom-0 left-0 w-full">
<ui-btn :loading="processing" color="success" class="w-full h-full flex items-center justify-center" @click.stop="createPlaylist"> <ui-btn :loading="processing" color="success" class="w-full h-14 flex items-center justify-center" @click.stop="createPlaylist">
<p class="text-base">{{ $strings.ButtonCreateNewPlaylist }}</p> <p class="text-base">{{ $strings.ButtonCreateNewPlaylist }}</p>
</ui-btn> </ui-btn>
</div> </div>

11
components/modals/rssfeeds/RssFeedModal.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<modals-fullscreen-modal v-model="show" :processing="processing"> <modals-fullscreen-modal v-model="show" :processing="processing">
<div class="flex items-end justify-end h-16 pr-4 pb-2 mb-2"> <div class="flex items-end justify-end h-24 pr-4 pb-2">
<!-- <h1 class="text-lg">RSS Feed</h1> --> <!-- <h1 class="text-lg">RSS Feed</h1> -->
<button class="flex" @click="show = false"> <button class="flex" @click="show = false">
<span class="material-icons">close</span> <span class="material-icons">close</span>
</button> </button>
</div> </div>
<div class="w-full px-2 h-[calc(100%-138px)] overflow-y-auto"> <div class="w-full px-2 h-[calc(100%-176px)] overflow-y-auto">
<div v-if="currentFeed" class="w-full"> <div v-if="currentFeed" class="w-full">
<div class="w-full relative"> <div class="w-full relative">
<h1 class="text-lg mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</h1> <h1 class="text-lg mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</h1>
@ -50,10 +50,9 @@
</div> </div>
</div> </div>
<div v-show="userIsAdminOrUp" class="flex items-center px-2 h-16"> <div v-show="userIsAdminOrUp" class="flex items-start pt-2 h-20">
<div class="flex-grow" /> <ui-btn v-if="currentFeed" color="error" class="w-full h-14" @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
<ui-btn v-if="currentFeed" color="error" class="w-full" @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn> <ui-btn v-else color="success" class="w-full h-14" @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
<ui-btn v-else color="success" class="w-full" @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
</div> </div>
</modals-fullscreen-modal> </modals-fullscreen-modal>
</template> </template>