ui fixes
This commit is contained in:
MuslemRahimi
parent
c29d613774
commit
ae1f00a82e
@ -562,10 +562,10 @@ onDestroy(async () => {
|
||||
<main class="grow">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Page content -->
|
||||
<section>
|
||||
<div class="w-full max-w-6xl m-auto sm:px-20 ml-auto ">
|
||||
<div class="w-full max-w-7xl m-auto sm:px-20 ml-auto ">
|
||||
|
||||
|
||||
<div class="w-full flex flex-row">
|
||||
@ -619,7 +619,7 @@ onDestroy(async () => {
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="hidden lg:inline-block h-sh lg:w-1/2 lg:pr-2 xl:pr-0">
|
||||
<aside class="hidden lg:inline-block h-sh lg:w-1/3 lg:pr-2 xl:pr-0">
|
||||
<div class="lg:pl-5 z-20 h-full">
|
||||
|
||||
<!-- Sidebar content -->
|
||||
|
||||
@ -244,12 +244,12 @@ onMount(async () => {
|
||||
|
||||
<!-- Page content -->
|
||||
<section>
|
||||
<div class="w-full max-w-6xl m-auto sm:px-20 ml-auto ">
|
||||
<div class="w-full max-w-7xl m-auto sm:px-20 ml-auto ">
|
||||
|
||||
|
||||
<div class="w-full flex flex-row">
|
||||
<!--Start Profile Pic-->
|
||||
<div class="flex items-center justify-start mb-5 w-screen sm:w-full bg-[#09090B] h-48 sm:rounded-xl border border-gray-700 sm:hover:border-gray-600">
|
||||
<div class="flex items-center justify-start mb-5 w-screen sm:w-full bg-[#141417] h-48 sm:rounded-xl border border-gray-700 sm:hover:border-gray-600">
|
||||
<label class="ml-5 avatar w-20 h-20 sm:w-24 sm:h-24 rounded-full hover:cursor-pointer">
|
||||
<img style="clip-path: circle(50%);" class="w-24 bg-slate-300 border border-slate-400 rounded-full inline-block "
|
||||
src={userData?.avatar
|
||||
@ -284,14 +284,14 @@ onMount(async () => {
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="hidden lg:inline-block h-sh lg:w-1/2 lg:pr-2 xl:pr-0">
|
||||
<aside class="hidden lg:inline-block h-sh lg:w-1/3 lg:pr-2 xl:pr-0">
|
||||
<div class="lg:pl-5 z-20 h-full">
|
||||
|
||||
<!-- Sidebar content -->
|
||||
|
||||
<!--Start User Profile -->
|
||||
<div class="space-y-6 ml-4">
|
||||
<div class="rounded-xl bg-[#09090B] h-48 w-full border border-gray-700 font-mono">
|
||||
<div class="rounded-xl bg-[#141417] h-48 w-full border border-gray-700 font-mono">
|
||||
<!--Start Header-->
|
||||
<div class="ml-2 w-full p-3">
|
||||
<span class="text-white text-lg font-medium ml-0.5">User Profile</span>
|
||||
@ -301,17 +301,17 @@ onMount(async () => {
|
||||
<!--Start Content-->
|
||||
<div class="w-full p-2">
|
||||
|
||||
<table class="font-semibold table table-compact bg-[#09090B] text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<tbody class="bg-[#09090B]">
|
||||
<table class="font-semibold table table-compact bg-[#141417] text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<tbody class="bg-[#141417]">
|
||||
<!-- row 1 -->
|
||||
<tr class="text-gray-300">
|
||||
<td class="bg-[#09090B] border-b border-[#27272A]">Karma: {userData?.karma}</td>
|
||||
<td class="bg-[#141417] border-b border-[#27272A]">Karma: {userData?.karma}</td>
|
||||
<td class="bg-[#27272A border-b border-[#27272A]">Posts: {userStats?.numberOfPosts}</td>
|
||||
</tr>
|
||||
<!-- row 2 -->
|
||||
<tr class="text-gray-300">
|
||||
<td class="bg-[#09090B]">Comments: {userStats?.numberOfComments}</td>
|
||||
<td class="bg-[#09090B]"></td>
|
||||
<td class="bg-[#141417]">Comments: {userStats?.numberOfComments}</td>
|
||||
<td class="bg-[#141417]"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -320,7 +320,7 @@ onMount(async () => {
|
||||
|
||||
{#if userData?.tier === 'Pro'}
|
||||
<!--Start Badge-->
|
||||
<div class="rounded-xl bg-[#09090B] h-48 w-full border border-gray-700 mt-14">
|
||||
<div class="rounded-xl bg-[#141417] h-48 w-full border border-gray-700 mt-14">
|
||||
<!--Start Header-->
|
||||
<div class="ml-2 w-full p-3">
|
||||
<span class="text-white text-lg font-medium ml-0.5 ">Badge</span>
|
||||
|
||||
@ -74,17 +74,17 @@ $: {
|
||||
|
||||
</svelte:head>
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
<!--
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a class="text-gray-300">All ETF Symbols</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a class="text-gray-300">All ETF Symbols</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -140,7 +140,7 @@ $: {
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl mt-10 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
|
||||
<div class="w-full mt-10 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
|
||||
|
||||
|
||||
<!--Start Top Winners/Losers-->
|
||||
|
||||
@ -44,9 +44,9 @@
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm breadcrumbs mb-2 ml-4">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs mb-2 ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a href="/etf/etf-providers" class="text-gray-300">ETF Providers</a></li>
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -105,11 +105,10 @@
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||
<div class="w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||
|
||||
|
||||
<!--Start Top Winners/Losers-->
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
|
||||
|
||||
<slot />
|
||||
|
||||
@ -36,10 +36,10 @@ let etfProviderList = data?.getAllETFProviders;
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||
|
||||
Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market.
|
||||
@ -47,23 +47,23 @@ let etfProviderList = data?.getAllETFProviders;
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
|
||||
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="relative flex flex-col flex-1 overflow-hidden">
|
||||
<div class="w-full overflow-x-scroll">
|
||||
|
||||
|
||||
|
||||
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<thead>
|
||||
<tr class="border border-slate-800">
|
||||
<th class="text-slate-200 font-semibold text-[0.95rem]">Provider Name</th>
|
||||
<th class="text-slate-200 font-semibold text-center text-[0.95rem]">Total Assets</th>
|
||||
<th class="text-slate-200 font-semibold text-[0.95rem] text-end">Funds</th>
|
||||
<th class="text-slate-200 font-semibold hidden sm:table-cell text-[0.95rem] text-end">Avg. Cost</th>
|
||||
<th class="text-slate-200 font-semibold hidden sm:table-cell text-[0.95rem] text-end">Avg. Holdings</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem]">Provider Name</th>
|
||||
<th class="text-slate-200 font-semibold text-center text-[1rem]">Total Assets</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Funds</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Cost</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Holdings</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -72,24 +72,24 @@ let etfProviderList = data?.getAllETFProviders;
|
||||
<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">
|
||||
|
||||
|
||||
<td class="text-blue-400 font-medium border-b-[#09090B]">
|
||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
|
||||
{formatETFName(item?.etfProvider)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium 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">
|
||||
{abbreviateNumber(item?.totalAssets, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
{item?.funds}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
{item?.avgExpenseRatio}%
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
{item?.avgHoldings}
|
||||
</td>
|
||||
|
||||
|
||||
@ -71,11 +71,11 @@
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||
|
||||
{etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(totalAssets,true)}
|
||||
@ -107,18 +107,18 @@
|
||||
{#if rawData?.length !== 0}
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
<div class="relative flex flex-col flex-1 overflow-hidden pt-5">
|
||||
<div class="w-full overflow-x-scroll pt-5">
|
||||
|
||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<thead>
|
||||
<tr class="border border-slate-800">
|
||||
<th class="text-slate-200 sm:font-semibold hidden sm:table-cell text-sm sm:text-[0.95rem]">Symbol</th>
|
||||
<th class="text-slate-200 sm:font-semibold text-sm sm:text-[0.95rem]">Fund Name</th>
|
||||
<th class="text-slate-200 sm:font-semibold text-center text-sm sm:text-[0.95rem]">Total Assets</th>
|
||||
<th class="text-slate-200 sm:font-semibold text-sm sm:text-[0.95rem] text-end">Holdings</th>
|
||||
<th class="text-slate-200 sm:font-semibold hidden sm:table-cell text-sm sm:text-[0.95rem] text-end">Expense Ratio</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Fund Name</th>
|
||||
<th class="text-white font-semibold text-center text-[1rem]">Total Assets</th>
|
||||
<th class="text-white font-semibold text-[1rem] text-end">Holdings</th>
|
||||
<th class="text-white font-semibold text-[1rem] text-end">Expense Ratio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -126,30 +126,24 @@
|
||||
<!-- 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">
|
||||
|
||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
||||
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td class="text-gray-200 border-b-[#09090B]">
|
||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
||||
<div class="sm:hidden flex flex-row">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
||||
<span class="text-gray-200 text-xs sm:text-md font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium border-b-[#09090B] text-end sm:text-center">
|
||||
<td class="text-white font-medium border-b-[#09090B] text-end sm:text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{abbreviateNumber(item?.totalAssets, true)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.numberOfHoldings}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.expenseRatio}%
|
||||
</td>
|
||||
|
||||
|
||||
@ -46,16 +46,16 @@ $: {
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a class="text-gray-300">New Launches of ETFs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -111,7 +111,7 @@ $: {
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
|
||||
<div class="w-full mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
|
||||
|
||||
|
||||
<!--Start Top Winners/Losers-->
|
||||
@ -125,40 +125,40 @@ $: {
|
||||
|
||||
<div class="border-b mt-2 border-gray-800 w-full mb-4" />
|
||||
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-medium text-[0.95rem]">Inception</th>
|
||||
<th class="text-white font-medium text-[0.95rem]">Symbol</th>
|
||||
<th class="text-white font-medium text-[0.95rem] hidden sm:table-cell">Fund Name</th>
|
||||
<th class="text-white font-medium text-end text-[0.95rem] hidden sm:table-cell">Holdings</th>
|
||||
<th class="text-white font-medium text-end text-[0.95rem] ">Total Assets</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Inception</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem] ">Fund Name</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Holdings</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Total Assets</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each etfData 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">
|
||||
<td class="text-white font-medium border-b-[#09090B]">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{new Date(item?.inceptionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-blue-400 border-b-[#09090B]">
|
||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium border-b-[#09090B] hidden sm:table-cell">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] ">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + '...' : item?.name}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-white font-medium border-b-[#09090B] text-end hidden sm:table-cell">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end ">
|
||||
{item?.numberOfHoldings}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium border-b-[#09090B] text-end">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end">
|
||||
{(item?.totalAssets !== 0 && item?.totalAssets !== null) ? abbreviateNumber(item?.totalAssets,true) : '-'}
|
||||
</td>
|
||||
|
||||
@ -170,6 +170,7 @@ $: {
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -257,8 +257,8 @@ $: {
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<!--
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">
|
||||
@ -266,7 +266,7 @@ $: {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
|
||||
|
||||
@ -32,7 +32,7 @@ const navigation = [
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pt-4 mb-40">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<!--
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
@ -48,7 +48,7 @@ const navigation = [
|
||||
<main>
|
||||
|
||||
|
||||
<div class="w-full max-w-5xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -99,7 +99,7 @@ const navigation = [
|
||||
|
||||
<div class="pl-4 pr-4 sm:pl-0 sm:pr-0 w-screen sm:w-full">
|
||||
|
||||
<div class="tabs flex flex-row justify-between sm:justify-start items-center w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
|
||||
<div class="tabs grid grid-cols-3 sm:grid-cols-9 w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
|
||||
|
||||
{#each navigation as item}
|
||||
|
||||
|
||||
@ -73,22 +73,22 @@
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Most Shorted Stocks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl overflow-hidden m-auto mt-5">
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden w-full">
|
||||
<main class="w-full">
|
||||
|
||||
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -142,27 +142,27 @@
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#09090B]">
|
||||
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
#
|
||||
</th>
|
||||
<th class="text-start bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Symbol
|
||||
</th>
|
||||
|
||||
<th class="hidden sm:table-cell text-start bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="hidden sm:table-cell text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="text-center bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-center bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Short Interest
|
||||
</th>
|
||||
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Float
|
||||
</th>
|
||||
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Outstd
|
||||
</th>
|
||||
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Sector
|
||||
</th>
|
||||
</tr>
|
||||
@ -171,11 +171,11 @@
|
||||
{#each shortedList as item, index}
|
||||
|
||||
<tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === shortedList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
|
||||
<td class="text-white text-sm font-medium text-white text-end">
|
||||
<td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
|
||||
{index+1}
|
||||
</td>
|
||||
|
||||
<td class="text-sm text-start">
|
||||
<td class="text-sm sm:text-[1rem] whtitespace-nowrap text-start">
|
||||
<div class="flex flex-col items-start w-32 sm:w-fit">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-white sm:hidden">
|
||||
@ -184,24 +184,24 @@
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="hidden sm:table-cell text-white text-sm text-white text-start">
|
||||
<td class="hidden sm:table-cell text-white text-sm sm:text-[1rem] whtitespace-nowrap text-white text-start">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-center text-sm font-medium text-white">
|
||||
<td class="text-center text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
|
||||
{item?.shortOutStandingPercent}%
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
<td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
|
||||
{abbreviateNumber(item?.latestFloatShares)}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
<td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
|
||||
{abbreviateNumber(item?.latestOutstandingShares)}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
<td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
|
||||
{item?.sector}
|
||||
</td>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user