added playing verse number to bottom nav, fixed morphology load butto…

…n issue, design changes
marwan · Mar 27, 2024 · 1671986 · 1671986
1 parent e5a47b3
commit 1671986
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/src/components/morphology/MorphologyTable.svelte b/src/components/morphology/MorphologyTable.svelte
@@ -14,6 +14,13 @@
   const loadAll = params.get("load_all") === "true";
   const totalAvailableWords = Object.keys(wordData).length;
   let lastWordToLoad = loadAll === true ? totalAvailableWords : totalAvailableWords > 10 ? 10 : totalAvailableWords;
+
+  function updateLastWordToLoad() {
+    lastWordToLoad = lastWordToLoad + 10;
+    if (lastWordToLoad > totalAvailableWords) {
+      lastWordToLoad = totalAvailableWords;
+    }
+  }
 </script>
 
 {#if totalAvailableWords > 0}
@@ -49,8 +56,8 @@
 
       <!-- button to load more words -->
       {#if totalAvailableWords > 10}
-        <div class="text-center text-xs">
-          <button on:click={() => (lastWordToLoad = lastWordToLoad + 10)} class={buttonElement}>Load more 10 words</button>
+        <div class="text-center text-xs {lastWordToLoad === totalAvailableWords && 'hidden'}">
+          <button on:click={() => updateLastWordToLoad()} class={buttonElement}>Load more...</button>
         </div>
       {/if}
     </div>

diff --git a/src/components/ui/BottomNavbar.svelte b/src/components/ui/BottomNavbar.svelte
@@ -8,7 +8,6 @@
   import { updateSettings } from "$utils/updateSettings";
 
   // icons
-  // import Play from "$svgs/Play.svelte";
   import PlaySolid from "$svgs/PlaySolid.svelte";
   import Pause from "$svgs/Pause.svelte";
   import ChevronLeft from "$svgs/ChevronLeft.svelte";
@@ -24,7 +23,7 @@
         type: "verse",
         chapter: $chapterNumberStore,
         verse: 1,
-        firstToPlay: 1,
+        firstToPlay: +document.querySelector("#verses-block :nth-child(1)").id.split(":")[1], // first verse of page
         lastToPlay: quranMetaData[$chapterNumberStore].verses,
         timesToRepeat: 1,
         delay: 0,
@@ -43,17 +42,23 @@
       </Link>
 
       <!-- 2nd icon -->
-      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <Eye />
         <span class="sr-only">Display Type</span>
       </button>
 
       <!-- 3rd icon -->
       <!-- play/pause button -->
       <div class="flex items-center justify-center">
-        <button type="button" on:click={() => audioController()} class="inline-flex items-center justify-center w-10 h-10 font-medium bg-[#ebebeb] hover:bg-gray-200 rounded-full group focus:ring-2 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
+        <button type="button" on:click={() => audioController()} class="inline-flex flex-col items-center justify-center w-10 h-10 font-medium bg-[#ebebeb] hover:bg-gray-200 rounded-full group focus:ring-2 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
           <svelte:component this={$audioSettingsStore.isPlaying === true ? Pause : PlaySolid} />
+
           <span class="sr-only">Play/Pause</span>
+
+          <!-- show badge when a verse is playing -->
+          {#if $audioSettingsStore.isPlaying === true && $audioSettingsStore.audioType === "verse"}
+            <div class="absolute inline-flex items-center justify-center z-30 text-xs px-2 text-white bg-gray-500 border-2 border-white rounded-md -top-3 dark:border-gray-900">{$audioSettingsStore.playingKey}</div>
+          {/if}
         </button>
       </div>
 

diff --git a/src/views/Changelogs.svelte b/src/views/Changelogs.svelte
@@ -41,7 +41,7 @@
       {#each Object.entries(fetchData) as [key, value]}
         <div class="py-6 space-y-2 border-b dark:border-slate-700">
           <div class="space-y-2">
-            <div class="truncate"><a href={value.html_url} target="_blank" class={linkElement}>{value.commit.message}</a></div>
+            <div><a href={value.html_url} target="_blank" class={linkElement}>{value.commit.message}</a></div>
             <div>
               <img class="rounded-full inline-flex w-5 h-5" src={value.author.avatar_url} alt={value.author.login} />
               {value.author.login} commited {timeAgo(value.commit.committer.date)} <span class="hidden md:inline-block">({value.sha.substring(0, 7)})</span>

diff --git a/src/views/Chapter.svelte b/src/views/Chapter.svelte
@@ -71,7 +71,7 @@
     {/if}
 
     <!-- need custom stylings if display type is 3 or 4 - continuous -->
-    <div style={[3, 4].includes($displayTypeStore) && "text-align: center; direction: rtl;"}>
+    <div id="verses-block" style={[3, 4].includes($displayTypeStore) && "text-align: center; direction: rtl;"}>
       <ChapterVerses {startVerse} {endVerse} />
     </div>
   {:catch error}

diff --git a/src/views/Issues.svelte b/src/views/Issues.svelte
@@ -41,15 +41,13 @@
       {#each Object.entries(fetchData) as [key, value]}
         <div class="py-6 space-y-2 border-b dark:border-slate-700">
           <div class="space-y-2">
-            <div class="truncate">
-              <a href={value.html_url} target="_blank" class={linkElement}>Issue #{value.number}: {value.title}</a>
+            <a href={value.html_url} target="_blank" class={linkElement}>Issue #{value.number}: {value.title}</a>
 
-              <!-- labels -->
-              <div class="inline-flex ml-2 space-x-2">
-                {#each Object.entries(value.labels) as [id, label]}
-                  <span class="bg-gray-300 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full grayscale">{label.name}</span>
-                {/each}
-              </div>
+            <!-- labels -->
+            <div class="inline-flex ml-2 space-x-2">
+              {#each Object.entries(value.labels) as [id, label]}
+                <span class="bg-gray-300 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full grayscale">{label.name}</span>
+              {/each}
             </div>
             <div>
               <img class="rounded-full inline-flex w-5 h-5" src={value.user.avatar_url} alt={value.user.login} />