ui fix
This commit is contained in:
MuslemRahimi
parent
25492bc6f8
commit
43e1e5b02e
@ -9,6 +9,7 @@
|
|||||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
|
import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
|
||||||
|
import Infobox from "$lib/components/Infobox.svelte";
|
||||||
import { closedPWA } from "$lib/store";
|
import { closedPWA } from "$lib/store";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -244,72 +245,78 @@
|
|||||||
</div>
|
</div>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
<Table.Root class="overflow-x-scroll w-full">
|
{#if gainersList?.length > 0}
|
||||||
<Table.Header>
|
<Table.Root class="overflow-x-scroll w-full">
|
||||||
<Table.Row>
|
<Table.Header>
|
||||||
<Table.Head class="text-white font-semibold"
|
|
||||||
>Symbol</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head
|
|
||||||
class="hidden sm:table-cell text-white font-semibold"
|
|
||||||
>Name</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head class="text-white text-right font-semibold"
|
|
||||||
>Price</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head class="text-white text-right font-semibold"
|
|
||||||
>Change</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head
|
|
||||||
class="text-white text-right font-semibold whitespace-nowrap"
|
|
||||||
>Market Cap</Table.Head
|
|
||||||
>
|
|
||||||
</Table.Row>
|
|
||||||
</Table.Header>
|
|
||||||
<Table.Body>
|
|
||||||
{#each gainersList as item}
|
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.Cell class="text-sm sm:text-[1rem]">
|
<Table.Head class="text-white font-semibold"
|
||||||
<HoverStockChart symbol={item?.symbol} />
|
>Symbol</Table.Head
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{item?.name?.length > charNumber
|
<Table.Head
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
class="hidden sm:table-cell text-white font-semibold"
|
||||||
: item?.name}
|
>Name</Table.Head
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{item?.price?.toFixed(2)}
|
<Table.Head class="text-white text-right font-semibold"
|
||||||
</Table.Cell>
|
>Price</Table.Head
|
||||||
<Table.Cell
|
|
||||||
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
|
||||||
>
|
>
|
||||||
{#if item?.changesPercentage >= 0}
|
<Table.Head class="text-white text-right font-semibold"
|
||||||
<span class="text-[#00FC50]"
|
>Change</Table.Head
|
||||||
>+{item?.changesPercentage >= 1000
|
>
|
||||||
? abbreviateNumber(item?.changesPercentage)
|
<Table.Head
|
||||||
: item?.changesPercentage?.toFixed(2)}%</span
|
class="text-white text-right font-semibold whitespace-nowrap"
|
||||||
>
|
>Market Cap</Table.Head
|
||||||
{:else}
|
|
||||||
<span class="text-[#FF2F1F]"
|
|
||||||
>{item?.changesPercentage <= -1000
|
|
||||||
? abbreviateNumber(item?.changesPercentage)
|
|
||||||
: item?.changesPercentage?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{abbreviateNumber(item?.marketCap)}
|
|
||||||
</Table.Cell>
|
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
{/each}
|
</Table.Header>
|
||||||
</Table.Body>
|
<Table.Body>
|
||||||
</Table.Root>
|
{#each gainersList as item}
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell class="text-sm sm:text-[1rem]">
|
||||||
|
<HoverStockChart symbol={item?.symbol} />
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.price?.toFixed(2)}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
||||||
|
>
|
||||||
|
{#if item?.changesPercentage >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{item?.changesPercentage >= 1000
|
||||||
|
? abbreviateNumber(item?.changesPercentage)
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{item?.changesPercentage <= -1000
|
||||||
|
? abbreviateNumber(item?.changesPercentage)
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(item?.marketCap)}
|
||||||
|
</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
{/each}
|
||||||
|
</Table.Body>
|
||||||
|
</Table.Root>
|
||||||
|
{:else}
|
||||||
|
<Infobox
|
||||||
|
text="Currently, no market gainer data is available."
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
<Card.Root
|
<Card.Root
|
||||||
@ -346,72 +353,76 @@
|
|||||||
</div>
|
</div>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
<Table.Root class="overflow-x-scroll w-full">
|
{#if losersList?.length > 0}
|
||||||
<Table.Header>
|
<Table.Root class="overflow-x-scroll w-full">
|
||||||
<Table.Row>
|
<Table.Header>
|
||||||
<Table.Head class="text-white font-semibold"
|
|
||||||
>Symbol</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head
|
|
||||||
class="hidden sm:table-cell text-white font-semibold"
|
|
||||||
>Name</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head class="text-white text-right font-semibold"
|
|
||||||
>Price</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head class="text-white text-right font-semibold"
|
|
||||||
>Change</Table.Head
|
|
||||||
>
|
|
||||||
<Table.Head
|
|
||||||
class="text-white text-right font-semibold whitespace-nowrap"
|
|
||||||
>Market Cap</Table.Head
|
|
||||||
>
|
|
||||||
</Table.Row>
|
|
||||||
</Table.Header>
|
|
||||||
<Table.Body>
|
|
||||||
{#each losersList as item}
|
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.Cell class="text-sm sm:text-[1rem]">
|
<Table.Head class="text-white font-semibold"
|
||||||
<HoverStockChart symbol={item?.symbol} />
|
>Symbol</Table.Head
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{item?.name?.length > charNumber
|
<Table.Head
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
class="hidden sm:table-cell text-white font-semibold"
|
||||||
: item?.name}
|
>Name</Table.Head
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{item?.price?.toFixed(2)}
|
<Table.Head class="text-white text-right font-semibold"
|
||||||
</Table.Cell>
|
>Price</Table.Head
|
||||||
<Table.Cell
|
|
||||||
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
|
||||||
>
|
>
|
||||||
{#if item?.changesPercentage >= 0}
|
<Table.Head class="text-white text-right font-semibold"
|
||||||
<span class="text-[#00FC50]"
|
>Change</Table.Head
|
||||||
>+{item?.changesPercentage >= 1000
|
>
|
||||||
? abbreviateNumber(item?.changesPercentage)
|
<Table.Head
|
||||||
: item?.changesPercentage?.toFixed(2)}%</span
|
class="text-white text-right font-semibold whitespace-nowrap"
|
||||||
>
|
>Market Cap</Table.Head
|
||||||
{:else}
|
|
||||||
<span class="text-[#FF2F1F]"
|
|
||||||
>{item?.changesPercentage <= -1000
|
|
||||||
? abbreviateNumber(item?.changesPercentage)
|
|
||||||
: item?.changesPercentage?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell
|
|
||||||
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
||||||
>
|
>
|
||||||
{abbreviateNumber(item?.marketCap)}
|
|
||||||
</Table.Cell>
|
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
{/each}
|
</Table.Header>
|
||||||
</Table.Body>
|
<Table.Body>
|
||||||
</Table.Root>
|
{#each losersList as item}
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell class="text-sm sm:text-[1rem]">
|
||||||
|
<HoverStockChart symbol={item?.symbol} />
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.price?.toFixed(2)}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
||||||
|
>
|
||||||
|
{#if item?.changesPercentage >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{item?.changesPercentage >= 1000
|
||||||
|
? abbreviateNumber(item?.changesPercentage)
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{item?.changesPercentage <= -1000
|
||||||
|
? abbreviateNumber(item?.changesPercentage)
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell
|
||||||
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(item?.marketCap)}
|
||||||
|
</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
{/each}
|
||||||
|
</Table.Body>
|
||||||
|
</Table.Root>
|
||||||
|
{:else}
|
||||||
|
<Infobox text="Currently, no market loser data is available." />
|
||||||
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
</div>
|
</div>
|
||||||
@ -638,20 +649,9 @@
|
|||||||
>
|
>
|
||||||
</table>
|
</table>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<Infobox
|
||||||
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
|
text="Currently, there are no new analyst reports available."
|
||||||
>
|
/>
|
||||||
<svg
|
|
||||||
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 256 256"
|
|
||||||
><path
|
|
||||||
fill="#fff"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
Currently, there are no new analyst reports available.
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
@ -683,7 +683,8 @@
|
|||||||
<ul style="padding-left: 5px;">
|
<ul style="padding-left: 5px;">
|
||||||
{#each data?.getDashboard?.upcomingEarnings as item}
|
{#each data?.getDashboard?.upcomingEarnings as item}
|
||||||
<li
|
<li
|
||||||
class="text-sm sm:text-[1rem]" style=" margin-left: 8px; margin-bottom: 30px; list-style-type: disc;"
|
class="text-sm sm:text-[1rem]"
|
||||||
|
style=" margin-left: 8px; margin-bottom: 30px; list-style-type: disc;"
|
||||||
>
|
>
|
||||||
<strong>{item?.name}</strong> (<HoverStockChart
|
<strong>{item?.name}</strong> (<HoverStockChart
|
||||||
symbol={item?.symbol}
|
symbol={item?.symbol}
|
||||||
@ -710,7 +711,6 @@
|
|||||||
{:else}
|
{:else}
|
||||||
during market.
|
during market.
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{/if}Analysts estimate {abbreviateNumber(
|
{/if}Analysts estimate {abbreviateNumber(
|
||||||
item?.revenueEst,
|
item?.revenueEst,
|
||||||
)} in revenue ({(
|
)} in revenue ({(
|
||||||
@ -726,21 +726,9 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<Infobox
|
||||||
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
|
text="Currently, there are no upcoming earnings reports available that include the latest analyst estimates."
|
||||||
>
|
/>
|
||||||
<svg
|
|
||||||
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 256 256"
|
|
||||||
><path
|
|
||||||
fill="#fff"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
Currently, there are no upcoming earnings reports available that
|
|
||||||
include the latest analyst estimates.
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
@ -771,7 +759,8 @@
|
|||||||
)}:
|
)}:
|
||||||
|
|
||||||
<li
|
<li
|
||||||
class="text-sm sm:text-[1rem]" style="color: #fff; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
class="text-sm sm:text-[1rem]"
|
||||||
|
style="color: #fff; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
||||||
>
|
>
|
||||||
Revenue of {abbreviateNumber(item?.revenue)}
|
Revenue of {abbreviateNumber(item?.revenue)}
|
||||||
{item?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates
|
{item?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates
|
||||||
@ -803,20 +792,9 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<Infobox
|
||||||
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
|
text="Currently, there are no recent earnings reports available."
|
||||||
>
|
/>
|
||||||
<svg
|
|
||||||
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 256 256"
|
|
||||||
><path
|
|
||||||
fill="#fff"
|
|
||||||
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
|
|
||||||
>
|
|
||||||
Currently, there are no recent earnings reports available.
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user