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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-15 19:13:13 +02:00
parent abb7d7c08b
commit 976d3877b8
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/list/small-cap-stocks/+page.svelte
View File

@ -2,8 +2,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
@ -11,20 +10,23 @@
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
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 (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length; const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5); const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
marketCapList = [...marketCapList, ...newElements]; marketCapList = [...marketCapList, ...filteredNewResults];
loaded();
} }
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0); let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@ -41,12 +43,11 @@
} }
} }
</script> </script>
<section class="w-full overflow-hidden m-auto"> <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 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"> <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap Mega-Cap
@ -146,10 +147,10 @@
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span> <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"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item?.changesPercentage >=0}
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span> <span class="text-[#10DB06] font-medium">+{item?.changesPercentage?.toFixed(2)}%</span>
{:else} {:else}
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span> <span class="text-[#FF2F1F] font-medium">{item?.changesPercentage?.toFixed(2)}% </span>
{/if} {/if}
</div> </div>
</div> </div>
@ -169,7 +170,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>
</section> </section>

10
src/routes/reddit-tracker/+page.svelte
View File

@ -485,7 +485,7 @@ const optionCompanySpread = {
<a href={item?.assetType === 'stocks' ? `/stocks/${item?.symbol}` : `/etf/${item?.symbol}`} class="whitespace-wrap font-medium"> <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]"> <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-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} {item?.name}
</span> </span>
</div> </div>
@ -500,7 +500,13 @@ const optionCompanySpread = {
<div class="flex flex-col mt-3"> <div class="flex flex-col mt-3">
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span> <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> </div>