some manga page Responsiveness

Suwayomi · Jan 18, 2024 · 667e29b · 667e29b
1 parent 46362e8
commit 667e29b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/InfoSide.svelte
@@ -128,7 +128,7 @@
 				<h1 class="h1 md:h3 lg:h2 xl:h1 line-clamp-2 xl:leading-[4rem]">
 					{$manga.data.manga.title}
 				</h1>
-				<div class="w-3/4 space-y-1 lg:space-y-2">
+				<div class="space-y-1 lg:space-y-2">
 					<InfoSubTitles text={$manga.data.manga.author} name="Author" />
 					<InfoSubTitles text={$manga.data.manga.artist} name="Artist" />
 					<InfoSubTitles text={$manga.data.manga.status} name="Status" />
@@ -188,7 +188,7 @@
 				{/if}
 			</div>
 		</MediaQuery>
-		<section class="w-full">
+		<section class="w-full text-xs xs:text-sm md:text-base">
 			<p>{$manga.data.manga.description}</p>
 		</section>
 		<div class="space-x-2">

diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/InfoSubTitles.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/InfoSubTitles.svelte
@@ -12,7 +12,7 @@
 </script>
 
 {#if text}
-	<h3 class="h3 md:h5 lg:h4 xl:h3 flex items-center space-x-2">
+	<h3 class="h6 xs:h3 md:h5 lg:h4 xl:h3 flex items-center space-x-2">
 		<span>{name}:</span>
 		<span class=" line-clamp-1">{text}</span>
 	</h3>

diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte
@@ -249,7 +249,7 @@
 	>
 		<div class="sticky top-0 z-10 h-10 xs:h-14">
 			<div class="card variant-glass p-0 flex items-center space-x-1 h-full">
-				<span class="w-full text-3xl font-medium pl-2 line-clamp-1">
+				<span class="w-full text-2xl md:text-3xl font-medium pl-2 line-clamp-1">
 					{sortedChapters.length} Chapters
 				</span>
 				<MediaQuery
@@ -387,13 +387,13 @@
 								/>
 							{/if}
 							<div class="space-y-0 w-full {chapter.isRead && 'opacity-50'}">
-								<div class="w-full line-clamp-1 text-2xl">
+								<div class="w-full line-clamp-1 text-xl md:text-2xl">
 									{$mangaMeta.ChapterTitle === ChapterTitle['Source Title']
 										? chapter.name
 										: `Chapter ${chapter.chapterNumber}`}
 								</div>
 								<div
-									class="w-full line-clamp-1 font-light"
+									class="w-full line-clamp-1 font-light text-sm md:text-base"
 									title="Fetched Date: {new Date(
 										chapter.fetchedAt * 1000
 									).toLocaleString()}&#013;Upload Date: {new Date(
@@ -509,7 +509,7 @@
 			href="/manga/{manga.data.manga.id}/chapter/{sortedChapters
 				.filter((e) => !e.isRead)
 				.toSorted((a, b) => (a.sourceOrder > b.sourceOrder ? 1 : -1))[0].id}"
-			class="btn variant-filled-primary hover:variant-glass-primary fixed bottom-2 right-16"
+			class="btn variant-filled-primary hover:variant-glass-primary fixed bottom-2 right-16 z-10"
 		>
 			resume
 		</a>