AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-20 21:42:37 +02:00
parent 0f9059cbce
commit e7939b0a34
3 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/etf/+page.svelte
View File

@ -161,11 +161,13 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</thead> </thead>
<tbody> <tbody>
{#each stockList as item,index} {#each stockList as item,index}
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] text-start border-b-[#09090B]"> <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} <a href={"/etf/"+item?.symbol} class="sm:hover:text-white text-blue-400">
</td> {item?.symbol}
</a>
</td>
<td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"> <td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}

8
src/routes/etf/etf-providers/+page.svelte
View File

@ -69,11 +69,13 @@ let etfProviderList = data?.getAllETFProviders;
<tbody> <tbody>
{#each etfProviderList as item,index} {#each etfProviderList as item,index}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/etf/etf-providers/"+item?.etfProvider)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"> <td class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
{formatETFName(item?.etfProvider)} <a href={"/etf/etf-providers/"+item?.etfProvider} class="sm:hover:text-white text-blue-400">
{formatETFName(item?.etfProvider)}
</a>
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end sm:text-center"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end sm:text-center">

51
src/routes/etf/etf-providers/[slug]/+page.svelte
View File

@ -2,7 +2,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { abbreviateNumber, formatETFName} from '$lib/utils'; import { abbreviateNumber, formatETFName} from '$lib/utils';
import { screenWidth, numberOfUnreadNotification } from '$lib/store'; import { screenWidth, numberOfUnreadNotification } from '$lib/store';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getETFProviderData; let rawData = data?.getETFProviderData;
@ -18,31 +18,25 @@
) / rawData?.length; ) / rawData?.length;
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (etfProviderData?.length === rawData?.length) { if (isBottom && etfProviderData?.length !== rawData?.length) {
complete(); const nextIndex = etfProviderData?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
else { etfProviderData = [...etfProviderData, ...filteredNewResults];
const nextIndex = etfProviderData?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
etfProviderData = [...etfProviderData, ...newElements];
loaded();
}
} }
let charNumber = 20; onMount(() => {
window.addEventListener('scroll', handleScroll);
$: { return () => {
if ($screenWidth < 640) window.removeEventListener('scroll', handleScroll);
{ };
charNumber = 30; })
}
else {
charNumber = 50; $:charNumber = $screenWidth < 640 ? 20 : 30;
}
}
</script> </script>
@ -124,10 +118,12 @@
<tbody> <tbody>
{#each etfProviderData as item,index} {#each etfProviderData as item,index}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} <a href={"/etf/"+item?.symbol} class="sm:hover:text-white text-blue-400">
{item?.symbol}
</a>
</td> </td>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"> <td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
@ -158,7 +154,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>
</div> </div>