From 976d3877b898ad378cf6d257bcd7d00fb97bbd20 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 15 Aug 2024 19:13:13 +0200
Subject: [PATCH] ui fix

---
 src/routes/list/small-cap-stocks/+page.svelte | 40 +++++++++----------
 src/routes/reddit-tracker/+page.svelte        | 10 ++++-
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/routes/list/small-cap-stocks/+page.svelte b/src/routes/list/small-cap-stocks/+page.svelte
index 53411d64..5943ff6a 100644
--- a/src/routes/list/small-cap-stocks/+page.svelte
+++ b/src/routes/list/small-cap-stocks/+page.svelte
@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-
+  import { onMount } from 'svelte';
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -41,12 +43,11 @@
     }
   }
   </script>
-  
   <section class="w-full overflow-hidden m-auto">
           
         
         
-    <div class="w-full m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full m-auto text-gray-100 font-medium bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Small-cap stocks have a market capitalizations ranging between $300 million and $2 billion USD, while additional categories include 
       <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
           Mega-Cap
@@ -146,10 +147,10 @@
                           <div class="flex flex-col">
                             <span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
                             <div class="flex flex-row mt-0.5 ml-auto">
-                              {#if item.changesPercentage >=0}
-                                <span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
+                              {#if item?.changesPercentage >=0}
+                                <span class="text-[#10DB06] font-medium">+{item?.changesPercentage?.toFixed(2)}%</span>
                               {:else}
-                                <span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span> 
+                                <span class="text-[#FF2F1F] font-medium">{item?.changesPercentage?.toFixed(2)}% </span> 
                               {/if}
                             </div>
                           </div>
@@ -169,7 +170,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
 
         </div>
     </section>
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 514bf1bc..f0be2368 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -485,7 +485,7 @@ const optionCompanySpread = {
                                 <a href={item?.assetType === 'stocks' ? `/stocks/${item?.symbol}` : `/etf/${item?.symbol}`} class="whitespace-wrap font-medium">
                                   <div class="flex flex-col items-start text-[1rem]">
                                     <span class="text-blue-400 sm:hover:text-white transition duration-100">{item?.symbol}</span>
-                                    <span class="text-white whitespace-wrap text-sm hidden sm:block">
+                                    <span class="text-white whitespace-wrap hidden sm:block">
                                         {item?.name}
                                     </span>
                                 </div>
@@ -500,7 +500,13 @@ const optionCompanySpread = {
 
                                   <div class="flex flex-col mt-3">
                                     <span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
-                                    <span class="{item?.changesPercentage > 0 ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-sm font-semibold text-end">{item?.changesPercentage?.toFixed(2)}%</span>
+                                    <span class="{item?.changesPercentage > 0 ? 'text-[#00FC50]' : 'text-[#FC2120]'} font-semibold text-end">
+                                      {#if item?.changesPercentage > 0 }
+                                      +{item?.changesPercentage?.toFixed(2)}%
+                                      {:else}
+                                      {item?.changesPercentage?.toFixed(2)}%
+                                      {/if}
+                                    </span>
                                     
                                   </div>