mirror of
https://github.com/audiobookshelf/audiobookshelf-web.git
synced 2025-08-31 06:59:31 +02:00
Mobile layout fixes
This commit is contained in:
advplyr
parent
462d2b3f8d
commit
d722c28294
5 changed files with 37 additions and 37 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<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>
|
||||
<span class="material-icons text-warning text-2xl">priority_high</span>
|
||||
</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 class="w-full bg-white bg-opacity-20 h-px my-8" />
|
||||
|
|
@ -14,28 +14,28 @@
|
|||
>Directory Structure
|
||||
</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="flex py-1 max-w-2xl">
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Terry Goodkind</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Author</span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Author</span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - </span>
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Sword of Truth</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Series</span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Series</span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - - </span>
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Vol 1 - 1994 - Wizards First Rule</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - - - </span>
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
<span class="text-white text-opacity-25"> - - </span>
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Vol 2 - 1995 - Stone of Tears</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - - - </span>
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
<span class="text-white text-opacity-25"> - </span>
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Heart of Black Ice - Sister of Darkness</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - - </span>
|
||||
|
|
@ -79,15 +79,15 @@
|
|||
<div class="flex py-1 max-w-2xl">
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Steven Levy</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Author</span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Author</span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - </span>
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">Hackers - Heroes of the Computer Revolution</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - - </span>
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
<div class="flex py-1 max-w-2xl">
|
||||
<img src="/folder.svg" class="h-6" />
|
||||
<p class="pl-2">1945 - Animal Farm</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
<div class="hidden md:block flex-grow" />
|
||||
<span class="hidden md:block text-white text-opacity-50 pl-4"><-- Title </span>
|
||||
</div>
|
||||
<div class="flex py-1 max-w-2xl">
|
||||
<span class="text-white text-opacity-25"> - </span>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</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" />
|
||||
|
||||
|
|
@ -150,13 +150,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inside list-disc my-4">
|
||||
<li class="list-item">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>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 class="list-outside md:list-inside px-6 md:px-0 list-disc my-4 text-sm md:text-base">
|
||||
<li class="py-1">Parsing out subtitles into a separate field is optional and must be enabled in settings.</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 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>
|
||||
|
||||
<div class="w-full h-px my-24" />
|
||||
<!-- <div class="w-full h-px my-24" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue