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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-07 19:26:19 +02:00
parent c0c5d70fb0
commit b3e361ea6b
8 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/DividendCard.svelte
View File

@ -31,7 +31,7 @@
<span class="font-bold text-white text-2xl">
Dividends
</span>
<span class="text-white font-medium ml-auto text-sm">
<span class="text-white font-semibold ml-auto text-[1rem]">
Dividend Yield {dividendYield ?? '0'}%
</span>
</div>

2
src/lib/components/SECFilingsCard.svelte
View File

@ -146,7 +146,7 @@ $: {
<!--Start Header-->
<div class="bg-[#000] w-full p-1 flex flex-col items-center pb-5 h-auto">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
SEC Filings
</h2>

30
src/lib/components/SimilarETFCard.svelte
View File

@ -40,25 +40,25 @@ export let similarTicker;
<thead>
<tr>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Fund Name</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Holdings</th>
</tr>
</thead>
<tbody>
{#each similarTicker as item, index}
<tr on:click={() => etfSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
<tr on:click={() => etfSelector(item?.symbol)} class="shake-ticker sm:hover:text-white text-blue-400 cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">
<td class="">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
n/a
{/if}
@ -69,11 +69,11 @@ export let similarTicker;
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-semibold ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets, true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{abbreviateNumber(item?.numberOfHoldings)}
</td>
@ -123,12 +123,12 @@ export let similarTicker;
<!--End Header-->
{#if similarTicker?.length !== 0}
<div class="flex justify-start items-center w-full m-auto pl-2 mt-10">
<div class="flex justify-start items-center w-full m-auto pl-2 mt-10 overflow-x-scroll">
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-bold text-sm text-start bg-[#000] border-b border-blue-400">Company</th>
<th class="text-white font-bold text-sm text-center bg-[#000] border-b border-blue-400">Market Cap</th>
<th class="text-white font-bold text-sm text-end bg-[#000] border-b border-blue-400">Market Cap</th>
<th class="text-white font-bold text-sm text-end bg-[#000] border-b border-blue-400">Change</th>
</tr>
</thead>
@ -137,16 +137,16 @@ export let similarTicker;
<tr on:click={() => etfSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer border-b border-[#000]">
{#if index <=6}
<td class="text-gray-200">
<td class="text-gray-200 whitespace-nowrap">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
{:else}
n/a
{/if}
@ -157,11 +157,11 @@ export let similarTicker;
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-semibold ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets, true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{abbreviateNumber(item?.numberOfHoldings)}
</td>

28
src/lib/components/SimilarTickerCard.svelte
View File

@ -40,25 +40,25 @@ export let similarstock;
<thead>
<tr>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Company</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#09090B]">Market Cap</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Market Cap</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Avg Volume</th>
</tr>
</thead>
<tbody>
{#each similarstock as item, index}
<tr on:click={() => stockSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
<tr on:click={() => stockSelector(item?.symbol)} class="shake-ticker sm:hover:text-white text-blue-400 cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">
<td class="whitespace-nowrap">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
{:else}
n/a
{/if}
@ -69,11 +69,11 @@ export let similarstock;
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-semibold ">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
</td>
{/if}
@ -104,7 +104,7 @@ export let similarstock;
<!--Start Header-->
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
Similar Ticker
</h2>
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
@ -117,7 +117,7 @@ export let similarstock;
<!--End Header-->
{#if similarstock?.length !== 0}
<div class="flex justify-start items-center w-full m-auto mt-10 overflow-hidden">
<div class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll">
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr>
@ -135,7 +135,7 @@ export let similarstock;
<div class="flex flex-row items-center">
<div class="flex flex-col w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
@ -148,11 +148,11 @@ export let similarstock;
</td>
<td class="text-white text-end font-medium text-sm">
<td class="text-white text-end font-semibold text-sm">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
</td>
<td class="text-white font-medium text-end text-sm">
<td class="text-white font-semibold text-end text-sm">
{item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
</td>
{/if}

24
src/lib/components/TopETFTickerHolder.svelte
View File

@ -41,22 +41,22 @@
<thead>
<tr >
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Company Name</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#09090B]">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">% of Fund</th>
</tr>
</thead>
<tbody>
{#each topETFHolder as item, index}
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
<tr on:click={() => etfSelector(item?.symbol)} class="sm:hover:text-white text-blue-400 cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">
<td >
<div class="flex flex-row items-center">
<div class="flex flex-col w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
n/a
{/if}
@ -67,11 +67,11 @@
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-semibold">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{item?.weightPercentage !== null ? item?.weightPercentage?.toFixed(2) : '-'}%
</td>
{/if}
@ -116,7 +116,7 @@
<!--End Header-->
{#if topETFHolder?.length !== 0}
<div class="flex justify-start items-center w-full m-auto mt-10 overflow-hidden">
<div class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll">
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr>
@ -134,7 +134,7 @@
<div class="flex flex-row items-center">
<div class="flex flex-col w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
@ -147,11 +147,11 @@
</td>
<td class="text-white text-end font-medium ">
<td class="text-white text-end font-semibold ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{item?.weightPercentage !== null ? abbreviateNumber(item?.weightPercentage)?.toFixed(2) : '-'}%
</td>
{/if}

18
src/lib/components/TopHoldingCard.svelte
View File

@ -46,7 +46,7 @@ $: {
<span class="hidden lg:block font-bold text-white text-2xl">
Top Holdings
</span>
<span class="text-white font-medium ml-auto text-sm">
<span class="text-white font-semibold ml-auto text-[1rem]">
{totalAssetPercentage}% of assets
</span>
</div>
@ -60,24 +60,24 @@ $: {
<thead>
<tr>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Company</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Market Value</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Market Value</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Portfolio</th>
</tr>
</thead>
<tbody>
{#each topHoldingList?.slice(0,5) as item}
{#if item?.asset !== null}
<tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker text-white cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
<td class="text-gray-200">
<tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
<td class="">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={item?.asset?.length !== 0 ? `https://financialmodelingprep.com/image-stock/${item?.asset}.png` : defaultLogo} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<span class="text-blue-400 text-sm font-medium">{item?.asset ?? '-'}</span>
<span class="text-white text-xs">
<span class="text-sm font-medium">{item?.asset ?? '-'}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 10 ? formatString(item?.name?.slice(0,10)) + "..." : formatString(item?.name)}
{item?.name?.length > 20 ? formatString(item?.name?.slice(0,20)) + "..." : formatString(item?.name)}
{:else}
n/a
{/if}
@ -87,11 +87,11 @@ $: {
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-semibold ">
{item?.marketValue !== null ? abbreviateNumber(item?.marketValue, true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-semibold text-end">
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
</td>

2
src/routes/options-flow/+page.svelte
View File

@ -822,7 +822,7 @@ $: {
{formatTime(displayedData[index]?.time)}
</div>
<div on:click|stopPropagation={() => assetSelector(displayedData[index]?.ticker, displayedData[index]?.assetType)} style="justify-content: center;" class="td text-sm sm:text-[1rem] text-blue-400 font-normal">
<div on:click|stopPropagation={() => assetSelector(displayedData[index]?.ticker, displayedData[index]?.assetType)} style="justify-content: center;" class="td text-sm sm:hover:text-white sm:text-[1rem] text-blue-400 font-normal">
{displayedData[index]?.ticker}
</div>

2
src/routes/options-zero-dte/+page.svelte
View File

@ -776,7 +776,7 @@ $: {
{formatTime(rawData[index]?.time)}
</div>
<div on:click|stopPropagation={() => assetSelector(rawData[index]?.ticker, rawData[index]?.assetType)} style="justify-content: center;" class="td text-sm text-blue-400 font-normal">
<div on:click|stopPropagation={() => assetSelector(rawData[index]?.ticker, rawData[index]?.assetType)} style="justify-content: center;" class="td text-sm sm:hover:text-white text-blue-400 font-normal">
{rawData[index]?.ticker}
</div>