Update: fix flickering issue

gita · Mar 3, 2024 · 0d67d61 · 0d67d61
1 parent 3fde8cf
commit 0d67d61
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
@@ -51,8 +51,7 @@ export default function ChapterPage({
     : filteredVerses?.slice(0).reverse();
 
   return (
-    <div
-       onClick={() => (viewNavigation && setViewNavigation(false))}>
+    <div onClick={() => viewNavigation && setViewNavigation(false)}>
       <div className="absolute inset-x-0 mx-auto max-w-5xl text-center font-inter">
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
@@ -88,9 +87,7 @@ export default function ChapterPage({
       </section>
 
       <div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
-        <div
-          className="flex items-center justify-between border-y border-gray-200 py-6"
-        >
+        <div className="flex items-center justify-between border-y border-gray-200 py-6">
           <div
             className={classNames(
               "font-extrabold dark:text-white",
@@ -126,7 +123,7 @@ export default function ChapterPage({
             />
             <button
               type="button"
-              className="relative -ml-px inline-flex items-center space-x-0.5 rounded-r-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
+              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 p-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
               onClick={() => setIsAscSorted(!isAscSorted)}
             >
               {isAscSorted ? (

diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
@@ -30,9 +30,10 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute mt-2 flex w-full flex-wrap justify-center rounded border border-gray-200 bg-white py-1 shadow dark:border-dark-100 dark:bg-dark-bg ${
-          !viewNavigation && "hidden"
-        }`,
+        `absolute mt-2 flex flex-wrap justify-center rounded border border-gray-200 bg-white py-2 shadow dark:border-dark-100 dark:bg-dark-bg 
+        ${!viewNavigation && "hidden"}
+         ${verseCount > 50 ? "-right-3 w-[350px] md:w-[550px]" : "w-full"}
+        `,
       )}
     >
       <div
@@ -41,7 +42,7 @@ function VerseNavigator({
           setVerseId(0);
         }}
         className={classNames(
-          ` flex min-w-[2.5rem] items-center justify-center rounded  hover:cursor-pointer hover:bg-my-orange hover:text-white ${
+          `flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
             !currentVerse && "bg-my-orange text-white"
           }`,
           styles.fontSize.para,
@@ -60,10 +61,9 @@ function VerseNavigator({
             <div
               onClick={() => {
                 setViewNavigation(false);
-                setVerseId(index + 1);
               }}
               className={classNames(
-                `flex min-w-[2.3rem] items-center justify-center rounded py-1 hover:cursor-pointer hover:border hover:bg-my-orange hover:text-white ${
+                ` flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
                   index + 1 === currentVerse && "bg-my-orange text-white"
                 }`,
                 styles.fontSize.para,