update ipo page
This commit is contained in:
MuslemRahimi
parent
7d72f23ffc
commit
1253364988
@ -4,7 +4,6 @@
|
||||
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'
|
||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
||||
import dividendsLogo from '$lib/images/dividends_calendar_logo.png';
|
||||
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
|
||||
@ -251,18 +250,18 @@ $: {
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 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">Dividends Calendar</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 -->
|
||||
@ -310,7 +309,7 @@ $: {
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'
|
||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
||||
import logo from '$lib/images/earnings_calender_logo.png';
|
||||
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
|
||||
@ -251,18 +250,18 @@ $: {
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 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">Earnings Calendar</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 -->
|
||||
@ -308,7 +307,7 @@ $: {
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
@ -393,10 +392,10 @@ $: {
|
||||
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{#if item?.time === 'amc'}
|
||||
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
|
||||
<span class="text-sm">After Close</span>
|
||||
After Close
|
||||
{:else}
|
||||
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><g fill="#FEC001"><path d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z" opacity=".2"/><path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"/></g></svg>
|
||||
<span class="text-sm">Before Open</span>
|
||||
Before Open
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
|
||||
@ -74,8 +74,8 @@ $: {
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 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">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
@ -85,11 +85,11 @@ $: {
|
||||
-->
|
||||
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden mb-40">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<main>
|
||||
<div class="w-full relative flex justify-center items-center overflow-hidden">
|
||||
<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-12">
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-lg h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</script>
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto ">
|
||||
<section class="w-full overflow-hidden m-auto ">
|
||||
|
||||
|
||||
|
||||
|
||||
@ -99,13 +99,13 @@ $: {
|
||||
</script>
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto p-5 sm:p-0 ">
|
||||
<section class="w-full overflow-hidden m-auto ">
|
||||
|
||||
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
<div class="flex flex-col justify-center items-center p-5 sm:p-0">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
|
||||
<div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5">
|
||||
@ -139,16 +139,16 @@ $: {
|
||||
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
{#if $screenWidth > 640}
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table class="mt-5 table table-sm 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] text-start">IPO Date</th>
|
||||
<th class="text-white font-medium text-[0.95rem] hidden sm:table-cell text-start">Symbol</th>
|
||||
<th class="text-white font-medium text-sm sm:text-[0.95rem]">Name</th>
|
||||
<th class="text-white font-medium text-end text-sm sm:text-[0.95rem]l">IPO Price</th>
|
||||
<th class="text-white font-medium text-end text-sm sm:text-[0.95rem]">Current Price</th>
|
||||
<th class="text-white font-medium text-end text-sm sm:text-[0.95rem]">Return Since</th>
|
||||
<th class="text-white font-medium text-[1rem] text-start">IPO Date</th>
|
||||
<th class="text-white font-medium text-[1rem] text-start">Symbol</th>
|
||||
<th class="text-white font-medium text-[1rem]">Name</th>
|
||||
<th class="text-white font-medium text-end text-[1rem]">IPO Price</th>
|
||||
<th class="text-white font-medium text-end text-[1rem]">Current Price</th>
|
||||
<th class="text-white font-medium text-end text-[1rem]">Return Since</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -156,27 +156,21 @@ $: {
|
||||
<tr on:click={() => goto("/stocks/"+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 text-sm text-start border-b-[#09090B]">
|
||||
<td class="text-white text-sm text-start border-b-[#09090B] whitespace-nowrap">
|
||||
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#09090B]">
|
||||
<td class="text-blue-400 text-sm text-start border-b-[#09090B] whitespace-nowrap">
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td class="text-gray-200 border-b-[#09090B]">
|
||||
<span class="hidden sm:block text-white">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span>
|
||||
<div class="sm:hidden flex flex-row">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-blue-400 ">{item?.symbol}</span>
|
||||
<span class="text-white">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<td class="text-gray-200 border-b-[#09090B] whitespace-nowrap">
|
||||
<span class="text-white">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white border-b-[#09090B] text-end">
|
||||
<td class="text-white text-sm border-b-[#09090B] text-end">
|
||||
{item?.ipoPrice !== null ? '$'+item?.ipoPrice : '-'}
|
||||
</td>
|
||||
|
||||
@ -207,84 +201,7 @@ $: {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{:else}
|
||||
|
||||
<div class="relative sm:hidden pt-3 w-full">
|
||||
{#each ipoList as item}
|
||||
<div class="bg-[#09090B] rounded-lg border border-slate-800 shadow-lg h-auto pb-3 pl-2 pr-2 pt-4 mb-7">
|
||||
<div class="flex flex-row items-center">
|
||||
<label on:click={() => goto("/stocks/"+item?.symbol)} class="cursor-pointer flex flex-col ml-3 w-40">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-slate-300 text-sm">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">IPO Date</span>
|
||||
<span class="text-white text-opacity-[0.8] text-md text-end">
|
||||
{item?.date !== null ? new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex flex-col ml-3 w-40">
|
||||
<span class="font-medium text-slate-300">IPO Price</span>
|
||||
<span class="text-white text-md">
|
||||
{item?.ipoPrice !== null ? '$'+item?.ipoPrice : '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">Current Price</span>
|
||||
<span class="text-white text-md text-end">
|
||||
{item?.currentPrice !== null ? '$'+item?.currentPrice : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
|
||||
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex flex-col ml-3 w-40">
|
||||
<span class="font-medium text-slate-300">Market Cap</span>
|
||||
<span class="text-white text-md">
|
||||
{item?.marketCap !== null && item?.marketCap !== 0 ? abbreviateNumber(item?.marketCap,true) : '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">Return Since</span>
|
||||
<span class="text-white text-md text-end">
|
||||
<div class="flex flex-row mt-1">
|
||||
{#if item?.return >=0 && item?.return !== null}
|
||||
<svg class="w-5 h-5 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
||||
<span class="text-[#10DB06] text-md">+{abbreviateNumber(item?.return)}%</span>
|
||||
{:else if item?.return < 0 && item?.return !== null}
|
||||
<svg class="w-5 h-5 mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
||||
<span class="text-[#FF2F1F] text-md">{abbreviateNumber(item?.return)}% </span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F] text-md">
|
||||
-
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<ScrollToTop />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/if}
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center items-center m-auto mt-10 mb-6">
|
||||
<div class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user