✨ Minor fixes and UI improvements

Open-Webtoon-Reader · Oct 22, 2024 · 42f6d24 · 42f6d24
1 parent 45476cf
commit 42f6d24
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -46,6 +46,9 @@ export default defineNuxtConfig({
             short_name: "OWR",
             description: "An open-source webtoon reader",
             theme_color: "#020817",
+            display: "fullscreen",
+            lang: "en",
+            orientation: "portrait",
             screenshots: [
                 {
                     src: "/screenshot.png",

diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
@@ -95,11 +95,11 @@ onMounted(async() => {
 
 <template>
     <div class="flex flex-col items-center w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
-        <div id="header" class="flex border-[1px] border-t-0 w-full items-center justify-around">
+        <div id="header" class="flex border-[1px] border-t-0 w-full items-center justify-around px-8 gap-8 py-2">
             <Button variant="secondary" :disabled="!episodeInfos.previousEpisodeId" @click="navigateTo(`/episode/${episodeInfos.previousEpisodeId}`, {replace: true})">
                 <Icon name="iconoir:arrow-left"/>
             </Button>
-            <h3 class="m-2">{{ episodeInfos.title }}</h3>
+            <h3 class="m-2 grow text-center">{{ episodeInfos.title }}</h3>
             <Button variant="secondary" :disabled="!episodeInfos.nextEpisodeId" @click="navigateTo(`/episode/${episodeInfos.nextEpisodeId}`, {replace: true})">
                 <Icon name="iconoir:arrow-right"/>
             </Button>
@@ -129,11 +129,11 @@ onMounted(async() => {
                 </VisibilityObserver>
             </VisibilityObserver>
         </div>
-        <div id="footer" class="w-full flex flex-row justify-around py-4 px-8 border-[1px]">
-            <Button variant="secondary" :disabled="!episodeInfos.previousEpisodeId" @click="navigateTo(`/episode/${episodeInfos.previousEpisodeId}`, {replace: true})">
+        <div id="footer" class="w-full flex flex-row justify-around py-4 px-8 gap-8 border-[1px]">
+            <Button variant="secondary" class="w-full" :disabled="!episodeInfos.previousEpisodeId" @click="navigateTo(`/episode/${episodeInfos.previousEpisodeId}`, {replace: true})">
                 <Icon name="iconoir:arrow-left"/>
             </Button>
-            <Button variant="secondary" :disabled="!episodeInfos.nextEpisodeId" @click="navigateTo(`/episode/${episodeInfos.nextEpisodeId}`, {replace: true})">
+            <Button variant="secondary" class="w-full" :disabled="!episodeInfos.nextEpisodeId" @click="navigateTo(`/episode/${episodeInfos.nextEpisodeId}`, {replace: true})">
                 <Icon name="iconoir:arrow-right"/>
             </Button>
         </div>