mirror/audiobookshelf.audiobookshelf-web
1
0
Fork 0
mirror of https://github.com/audiobookshelf/audiobookshelf-web.git synced 2025-09-01 07:20:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mobile layout fixes

Browse source
This commit is contained in:
advplyr 2021-09-27 16:43:18 -05:00
parent 462d2b3f8d
commit d722c28294
5 changed files with 37 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

2
layouts/blank.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-screen h-screen max-w-full max-h-screen"> <div class="w-screen h-screen max-h-screen max-w-screen overflow-hidden">
<Nuxt /> <Nuxt />
</div> </div>
</template> </template>

11
layouts/default.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-screen h-screen max-w-full max-h-screen text-white bg-gradient"> <div class="w-screen h-screen max-w-full max-h-screen text-white bg-gradient overflow-hidden">
<div class="fixed top-0 left-0 w-full h-16 shadow-lg bg-primary flex px-4 items-center"> <div class="fixed top-0 left-0 w-full h-16 shadow-lg bg-primary flex px-4 items-center">
<nuxt-link to="/" class="h-12 w-12"> <nuxt-link to="/" class="h-12 w-12">
<img src="/Logo48.png" class="h-12 w-12" /> <img src="/Logo48.png" class="h-12 w-12" />
@ -25,10 +25,9 @@
</a> </a>
</div> </div>
<div class="page-container w-screen pt-16"> <div class="page-container w-screen pt-16">
<div class="w-full h-full overflow-y-auto py-8"> <div class="w-full h-full overflow-y-auto">
<Nuxt /> <Nuxt />
<div class="w-full h-8 flex items-center text-xs text-gray-300 bg-primary px-4">
<div class="absolute bottom-0 left-0 w-full h-8 flex items-center text-xs text-gray-300 bg-primary px-4">
No copyright, take whatever you want. No copyright, take whatever you want.
<div class="flex-grow" /> <div class="flex-grow" />
<a href="https://github.com/advplyr" target="_blank" class="font-mono underline text-blue-200 hover:text-blue-100 text-sm">advplyr</a> <a href="https://github.com/advplyr" target="_blank" class="font-mono underline text-blue-200 hover:text-blue-100 text-sm">advplyr</a>
@ -78,7 +77,7 @@ body {
overflow: hidden; overflow: hidden;
} }
.page-container { .page-container {
height: calc(100% - 32px); height: calc(100%);
max-height: calc(100% - 32px); max-height: calc(100%);
} }
</style> </style>

50
pages/docs.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div class="w-full h-full max-w-5xl mx-auto px-2"> <div class="w-full max-w-5xl mx-auto px-2 py-8">
<div class="flex -ml-8"> <div class="flex -ml-8">
<div> <div>
<span class="material-icons text-warning text-2xl">priority_high</span> <span class="material-icons text-warning text-2xl">priority_high</span>
</div> </div>
<p class="pl-2 text-lg">AudioBookshelf relies on you already having an organized directory structure. This is because information is taken from your folder names. This includes the author name, series name, book title, publish year, volume number, and subtitle.</p> <p class="pl-2 text-base md:text-lg">AudioBookshelf relies on you already having an organized directory structure. This is because information is taken from your folder names. This includes the author name, series name, book title, publish year, volume number, and subtitle.</p>
</div> </div>
<div class="w-full bg-white bg-opacity-20 h-px my-8" /> <div class="w-full bg-white bg-opacity-20 h-px my-8" />
@ -14,28 +14,28 @@
>Directory Structure >Directory Structure
</h1> </h1>
<p class="mb-4">Here is an example supported directory structure</p> <p class="mb-4 text-sm md:text-base">Here is an example supported directory structure</p>
<div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono"> <div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Terry Goodkind</p> <p class="pl-2">Terry Goodkind</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Author</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Author</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;</span>
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Sword of Truth</p> <p class="pl-2">Sword of Truth</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Series</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Series</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Vol 1 - 1994 - Wizards First Rule</p> <p class="pl-2">Vol 1 - 1994 - Wizards First Rule</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
@ -56,8 +56,8 @@
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Vol 2 - 1995 - Stone of Tears</p> <p class="pl-2">Vol 2 - 1995 - Stone of Tears</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
@ -68,8 +68,8 @@
<span class="text-white text-opacity-25">&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;</span>
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Heart of Black Ice - Sister of Darkness</p> <p class="pl-2">Heart of Black Ice - Sister of Darkness</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
@ -79,15 +79,15 @@
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Steven Levy</p> <p class="pl-2">Steven Levy</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Author</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Author</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;</span>
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">Hackers - Heroes of the Computer Revolution</p> <p class="pl-2">Hackers - Heroes of the Computer Revolution</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;&nbsp;-&nbsp;</span>
@ -97,8 +97,8 @@
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<img src="/folder.svg" class="h-6" /> <img src="/folder.svg" class="h-6" />
<p class="pl-2">1945 - Animal Farm</p> <p class="pl-2">1945 - Animal Farm</p>
<div class="flex-grow" /> <div class="hidden md:block flex-grow" />
<span class="text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span> <span class="hidden md:block text-white text-opacity-50 pl-4">&lt;-- Title&nbsp;</span>
</div> </div>
<div class="flex py-1 max-w-2xl"> <div class="flex py-1 max-w-2xl">
<span class="text-white text-opacity-25">&nbsp;-&nbsp;</span> <span class="text-white text-opacity-25">&nbsp;-&nbsp;</span>
@ -107,7 +107,7 @@
</div> </div>
</div> </div>
<p class="my-4">Files must always be in a directory with the book title. <span class="text-error">Files in the root directory are ignored.</span><br />The title directory can be in the root directory, an author directory, or a series directory.</p> <p class="my-4 text-sm md:text-base">Files must always be in a directory with the book title. <span class="text-error">Files in the root directory are ignored.</span><br />The title directory can be in the root directory, an author directory, or a series directory.</p>
<div class="w-full bg-white bg-opacity-20 h-px my-8" /> <div class="w-full bg-white bg-opacity-20 h-px my-8" />
@ -150,13 +150,13 @@
</div> </div>
</div> </div>
<ul class="list-inside list-disc my-4"> <ul class="list-outside md:list-inside px-6 md:px-0 list-disc my-4 text-sm md:text-base">
<li class="list-item">Parsing out subtitles into a separate field is optional and must be enabled in settings.</li> <li class="py-1">Parsing out subtitles into a separate field is optional and must be enabled in settings.</li>
<li>Different parts of a name should be separated by " - ", with the exception of the volume number (spaces aren't needed).</li> <li class="py-1">Different parts of a name should be separated by " - ", with the exception of the volume number (spaces aren't needed).</li>
<li>The publish year must be the first part of the name OR directly after a volume number, and separated by " - " on both sides.</li> <li class="py-1">The publish year must be the first part of the name OR directly after a volume number, and separated by " - " on both sides.</li>
</ul> </ul>
<div class="w-full h-px my-24" /> <!-- <div class="w-full h-px my-24" /> -->
</div> </div>
</template> </template>

7
pages/index.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div ref="wrapper" class="w-full h-full bg-gradient"> <div ref="wrapper" class="w-full h-full bg-gradient overflow-hidden">
<div class="absolute top-0 left-0 w-full h-screen pointer-events-none"> <div class="absolute top-0 left-0 w-full h-screen pointer-events-none max-h-screen max-w-screen overflow-hidden">
<template v-for="(shelf, index) in shelves"> <template v-for="(shelf, index) in shelves">
<div :key="index" class="bookshelfRow w-full flex relative h-32 md:h-60 px-3 md:px-12"> <div :key="index" class="bookshelfRow w-full flex relative h-32 md:h-60 px-3 md:px-12">
<template v-for="(book, n) in shelf"> <template v-for="(book, n) in shelf">
@ -61,7 +61,8 @@ export default {
['bravenewworld.jpg', 'againstdemocracy.jpg', 'fahrenheit451.jpg', 'lordoftheflies.jpg', 'humanaction.jpg', 'theoryofsocialismandcapitalism.jpg', 'thehobbit.jpg', 'warandpeace.jpg', 'anthem.jpg'], ['bravenewworld.jpg', 'againstdemocracy.jpg', 'fahrenheit451.jpg', 'lordoftheflies.jpg', 'humanaction.jpg', 'theoryofsocialismandcapitalism.jpg', 'thehobbit.jpg', 'warandpeace.jpg', 'anthem.jpg'],
['theanarchisthandbook.jpg', 'faithofthefallen.jpg', 'theidiot.jpg', 'machineryoffreedom.png', 'thefountainhead.jpg'], ['theanarchisthandbook.jpg', 'faithofthefallen.jpg', 'theidiot.jpg', 'machineryoffreedom.png', 'thefountainhead.jpg'],
['notreason.jpg', 'ethicsofliberty.jpg'], ['notreason.jpg', 'ethicsofliberty.jpg'],
[] ['theprince.jpg', 'templeofthewinds.jpg'],
['economicsinonelesson.jpg']
] ]
} }
}, },

4
pages/install.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-full h-full max-w-5xl mx-auto px-2"> <div class="w-full max-w-5xl mx-auto px-2 py-8">
<h1 id="docker" class="text-3xl mb-4"> <h1 id="docker" class="text-3xl mb-4">
<nuxt-link to="#docker"><span class="material-icons text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link <nuxt-link to="#docker"><span class="material-icons text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
>Docker Install >Docker Install
@ -70,7 +70,7 @@ sudo apt update
sudo apt install audiobookshelf</code> sudo apt install audiobookshelf</code>
</pre> </pre>
<div class="w-full h-24" /> <!-- <div class="w-full h-24" /> -->
</div> </div>
</template> </template>