From fcab813fbb1acd5db3b1a85dcb915daca3a84c75 Mon Sep 17 00:00:00 2001
From: Alessandro Jean <alessandrojean@gmail.com>
Date: Tue, 24 Sep 2019 21:22:28 -0300
Subject: [PATCH] Add folder structure to reading local manga guide.

---
 src/.vuepress/styles/index.scss        | 87 ++++++++++++++++++++++++++
 src/help/guides/reading-local-manga.md | 59 +++++++++++++++--
 2 files changed, 142 insertions(+), 4 deletions(-)

diff --git a/src/.vuepress/styles/index.scss b/src/.vuepress/styles/index.scss
index 6771c785..f7785ae3 100644
--- a/src/.vuepress/styles/index.scss
+++ b/src/.vuepress/styles/index.scss
@@ -56,3 +56,90 @@
 .badge.version-indicator {
 	background-color: #000000 !important;
 }
+
+.file-tree {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-size: 0.85rem;
+
+	li, ul {
+		position: relative;
+	}
+
+	li {
+		margin: 0;
+		padding-left: 1rem;
+		font-weight: bold;
+
+		&.file {
+			font-weight: normal;
+		}
+
+		&::before, &::after {
+			content: "";
+			position: absolute;
+			left: 0em;
+		}
+
+		&::before {
+			border-top: 1px solid black;
+			top: 0.7em;
+			width: 0.5em;
+			height: 0;
+		}
+
+		&:last-child::after {
+			height: 0.7em;
+		}
+
+		&::after {
+			top: 0px;
+			border-left: 1px solid black;
+			height: 100%;
+			width: 0px;
+		}
+	}
+
+	ul {
+		margin-left: 1em;
+	}
+
+	& > li:first-child::before, & > li:first-child::after {
+		content: none;
+	}
+}
+
+.file-tree, .file-tree ul {
+	list-style: none;
+	padding: 0;
+}
+
+.side-by-side {
+	display: flex;
+	align-content: middle;
+	justify-content: center;
+
+	& > * {
+		width: 50%;
+	}
+
+	& > * + * {
+		border-left: 1px solid #aaa;
+	}
+}
+
+@media (max-width: 767px) {
+	.side-by-side {
+		flex-direction: column;
+
+		& > * {
+			width: 100%;
+		}
+
+		& > * + * {
+			margin-top: 0;
+			padding-top: 1em;
+			border-left: none;
+			border-top: 1px solid #aaa;
+		}
+	}
+}
diff --git a/src/help/guides/reading-local-manga.md b/src/help/guides/reading-local-manga.md
index 82e551ae..82c7c3fa 100644
--- a/src/help/guides/reading-local-manga.md
+++ b/src/help/guides/reading-local-manga.md
@@ -19,11 +19,62 @@ Supported chapter formats are directories with pictures inside, `ZIP`/`CBZ`, `RA
 
 You can also place your chapters or manga in both storages and Tachiyomi will merge them.
 
-**Example:**
-- `/sdcard/Tachiyomi/local/my manga/ch1`
-- `/storage/18F5-2C11/Tachiyomi/local/my manga/ch2`
+::: tip EXAMPLE
+<div class="side-by-side">
+	<ul class="file-tree">
+		<li>
+			/sdcard/Tachiyomi/local
+			<ul>
+				<li>
+					My manga
+					<ul>
+						<li>
+							ch1
+							<ul>
+								<li class="file">files</li>
+							</ul>
+						</li>
+						<li>
+							ch2
+							<ul>
+								<li class="file">files</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+				<li>&hellip;</li>
+			</ul>
+		</li>
+	</ul>
+	<ul class="file-tree">
+		<li>
+			/storage/18F5-2C11/Tachiyomi/local
+			<ul>
+				<li>
+					My manga
+					<ul>
+						<li>
+							ch3
+							<ul>
+								<li class="file">files</li>
+							</ul>
+						</li>
+						<li>
+							ch4
+							<ul>
+								<li class="file">files</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+				<li>&hellip;</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+:::
 
-Tachiyomi will see two chapters in a single manga.
+Tachiyomi will see four chapters in a single manga.
 
 The path to the folder (or archive) with images must contain both the manga title and the chapter name (as seen above).