Fix bug UI

ionivetech · Mar 24, 2024 · bd44568 · bd44568
1 parent 1a1e79c
commit bd44568
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/assets/css/components.scss b/assets/css/components.scss
@@ -1,9 +1,9 @@
 @layer components {
   .input-search {
-    @apply block w-full rounded-3xl bg-white md:px-4 md:py-3 px-3 py-2.5 md:pr-12 pr-12 text-slate-700 shadow focus:outline-none;
+    @apply block w-full rounded-3xl bg-white md:px-4 md:py-3 px-3 py-2 md:pr-12 pr-12 text-slate-700 shadow focus:outline-none;
   }
 
   .search-section-wrapper {
-    @apply mb-10 mt-16 flex h-72 w-full flex-col items-center justify-center gap-y-8 bg-gradient-to-br from-teal-700 to-teal-500 p-4 dark:from-slate-800/50 dark:to-slate-700/50 md:h-80;
+    @apply mb-10 mt-16 flex h-56 w-full flex-col items-center justify-center gap-y-5 md:gap-y-8 bg-gradient-to-br from-teal-700 to-teal-500 p-4 dark:from-slate-800/50 dark:to-slate-700/50 md:h-80;
   }
 }
diff --git a/components/hadith/HeaderList.vue b/components/hadith/HeaderList.vue
@@ -21,7 +21,7 @@ const emits = defineEmits<{
     <!-- Icon -->
     <Icon
       name="solar:notebook-minimalistic-bold"
-      class="text-[80px] text-white sm:text-[95px]"
+      class="text-[70px] text-white sm:text-[95px]"
     />
 
     <!-- Search field -->
@@ -34,7 +34,7 @@ const emits = defineEmits<{
       />
 
       <div
-        class="absolute inset-y-2/4 right-2 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:size-9"
+        class="mdright-2 absolute inset-y-2/4 right-1 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:size-9"
       >
         <Icon
           name="radix-icons:magnifying-glass"

diff --git a/components/prayer/List.vue b/components/prayer/List.vue
@@ -23,9 +23,12 @@ defineProps<{
   >
     <template #default="{ item, index, open }">
       <div class="flex cursor-pointer items-center justify-between gap-x-3 p-3 md:p-4">
-        <p class="text-sm font-normal text-yami dark:text-slate-200 md:text-base">
-          {{ index + 1 }}. {{ item.nama }}
-        </p>
+        <div
+          class="flex items-start gap-x-1.5 text-sm font-normal text-yami dark:text-slate-200 md:text-base"
+        >
+          <p>{{ index + 1 }}.</p>
+          <p>{{ item.nama }}</p>
+        </div>
 
         <Icon
           name="fluent:chevron-down-24-filled"

diff --git a/components/quran/HeaderList.vue b/components/quran/HeaderList.vue
@@ -8,7 +8,7 @@ const search = defineModel<string>()
     <img
       src="/images/alquran.svg"
       alt="alquran-logo"
-      class="h-auto w-24"
+      class="w-22 h-auto md:w-24"
     />
 
     <!-- Search field -->
@@ -21,7 +21,7 @@ const search = defineModel<string>()
       />
 
       <div
-        class="absolute inset-y-2/4 right-2 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:size-9"
+        class="absolute inset-y-2/4 right-1 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:right-2 md:size-9"
       >
         <Icon
           name="radix-icons:magnifying-glass"

diff --git a/pages/al-quran/[id].vue b/pages/al-quran/[id].vue
@@ -67,6 +67,7 @@ const { data: dataTafsir } = useLazyFetch<ITafsir[]>(`/${route.params.id}`, {
 
 const setDataChunks = (data: IVerse[]) => {
   chunkPage.value = 1
+  verseList.value = []
   masterVerseList.value = data
 
   // Split array into chunks
@@ -101,8 +102,10 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 // Go to previous / next surah
 const goToSurah = (surah: IBeforeNextSurah) => router.push(`/al-quran/${surah.nomor}`)
 
-watchEffect(() => {
-  if (dataDetail.value) setDataChunks(dataDetail.value!.ayat!)
+onMounted(() => {
+  setTimeout(() => {
+    if (dataDetail.value) setDataChunks(dataDetail.value.ayat!)
+  }, 500)
 })
 
 useSeoMeta({