🐛 Fix collapsible button

Open-Webtoon-Reader · Jun 15, 2024 · a3eae2b · a3eae2b
1 parent d19e2fb
commit a3eae2b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/components/webtoons/episodes/EpisodeItem.vue b/components/webtoons/episodes/EpisodeItem.vue
@@ -12,17 +12,20 @@ const {episode} = defineProps<{
 
 <template>
     <Collapsible>
-        <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/webtoon/${episode.id}`)">
+        <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/episode/${episode.id}`)">
             <NuxtImg :src="sumToImageUrl(episode.thumbnail)" loading="lazy" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
-            <div id="infos" class="flex items-center w-full justify-between px-2  h-20 sm:h-24 md:h-28 xl:h-32">
-                <div id="text-infos" class="flex flex-col justify-between gap-auto h-full py-1 sm:py-2">
-                    <div class="flex flex-col gap-0 md:gap-1 lg:gap-2">
+            <div id="infos" class="flex items-center w-full justify-between px-2 h-20 sm:h-24 md:h-28 xl:h-32">
+                <div id="text-infos" class="flex flex-col w-full h-full justify-center">
+                    <div class="flex flex-row justify-between items-center">
                         <div id="title" class="flex flex-row gap-2">
                             <div v-if="episode.isNew" class="flex items-center">
                                 <Badge v-if="episode.isNew" variant="default">New</Badge>
                             </div>
                             <h4 class="whitespace-nowrap truncate max-w-64">{{ episode.title }}</h4>
                         </div>
+                        <div id="number">
+                            <p>#{{ episode.number }}</p>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/components/webtoons/webtoons/WebtoonItem.vue b/components/webtoons/webtoons/WebtoonItem.vue
@@ -9,6 +9,13 @@ const {webtoon} = defineProps<{
     webtoon: any,
 }>();
 
+const isOpen = ref(false);
+
+function toggleCollapsible(){
+    isOpen.value = !isOpen.value;
+    console.log(isOpen.value);
+}
+
 onMounted(() => {
     webtoon.genres.sort();
     webtoon.genres = webtoon.genres.map((genre: string) => {
@@ -29,7 +36,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <Collapsible>
+    <Collapsible v-model:open="isOpen">
         <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/webtoon/${webtoon.id}`)">
             <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
             <div id="infos" class="flex items-center w-full justify-between px-2  h-20 sm:h-24 md:h-28 xl:h-32">
@@ -46,11 +53,9 @@ onMounted(() => {
                     </div>
                     <Badge variant="secondary" class="w-fit">{{ webtoon.language.toUpperCase() }}</Badge>
                 </div>
-                <CollapsibleTrigger>
-                    <Button variant="ghost">
-                        <Icon name="iconoir:arrow-down"/>
-                    </Button>
-                </CollapsibleTrigger>
+                <Button variant="ghost" @click="(event) => { event.stopPropagation(); toggleCollapsible()}">
+                    <Icon name="iconoir:arrow-down"/>
+                </Button>
             </div>
         </div>
         <CollapsibleContent class="pl-2">

diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import * as apiurlMiddleware from "~/middleware/apiurl.middleware";
+
+definePageMeta({
+    middleware: [
+        apiurlMiddleware.default
+    ],
+    layout: "nav-layout"
+});
+</script>
+
+<template>
+    <div class="flex justify-center h-[calc(theme(height.dvh)-70px)]">
+        <h1>Work in progress</h1>
+    </div>
+</template>
+
+<style scoped>
+
+</style>