ui fixes
This commit is contained in:
MuslemRahimi
parent
c51d2d4c39
commit
9e8e0a2ed6
@ -690,7 +690,7 @@ $: {
|
||||
</Pane>
|
||||
<Pane>
|
||||
<Splitpanes class="w-full" theme="modern-theme">
|
||||
{#if $screenWidth >= 1536}
|
||||
{#if $screenWidth >= 1736}
|
||||
<Pane size={14} minSize={0}>
|
||||
<aside class="fixed overflow-y-scroll scroller overflow-hidden inset-y-0 left-0 z-50 hidden 3xl:flex w-72 flex-col 3xl:border-r 3xl:border-gray-800 bg-[#141417]">
|
||||
<nav class="flex flex-col items-center mr-auto gap-y-4 3xl:py-5 w-full">
|
||||
@ -937,7 +937,7 @@ $: {
|
||||
{/if}
|
||||
<Pane class="w-full">
|
||||
|
||||
<main class="w-full overflow-y-auto bg-[#09090B] xl:p-4">
|
||||
<main class="xl:pl-10 w-full overflow-y-auto bg-[#09090B] sm:p-4">
|
||||
<slot />
|
||||
<Toaster class="bg-[#1A1A27] text-white text-medium"/>
|
||||
{#if Cookie && $showCookieConsent === true}
|
||||
|
||||
@ -172,7 +172,7 @@
|
||||
<tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
|
||||
|
||||
|
||||
<td class="text-sm text-start">
|
||||
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
|
||||
<div class="flex flex-col items-start w-32 sm:w-fit">
|
||||
<span class="text-blue-400">{item?.ticker}</span>
|
||||
<span class="text-white sm:hidden">
|
||||
@ -181,11 +181,11 @@
|
||||
</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] whitespace-nowrap text-white text-start">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm text-white whitespace-nowrap">
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white">
|
||||
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
{item?.returnSince}%
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
|
||||
{item?.sector}
|
||||
</td>
|
||||
|
||||
|
||||
@ -452,7 +452,7 @@ $: {
|
||||
|
||||
</script>
|
||||
|
||||
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex flex-col">
|
||||
<main class="grow w-full">
|
||||
|
||||
@ -479,7 +479,7 @@ $: {
|
||||
|
||||
|
||||
|
||||
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex flex-col">
|
||||
<main class="grow w-full">
|
||||
|
||||
@ -167,7 +167,7 @@ isLoaded = true;
|
||||
|
||||
|
||||
|
||||
let charNumber = 20;
|
||||
let charNumber =40;
|
||||
|
||||
|
||||
$: {
|
||||
@ -176,7 +176,7 @@ $: {
|
||||
charNumber = 15;
|
||||
}
|
||||
else {
|
||||
charNumber = 20;
|
||||
charNumber =40;
|
||||
}
|
||||
}
|
||||
|
||||
@ -211,7 +211,7 @@ $: {
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
<div class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
|
||||
<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">
|
||||
@ -319,12 +319,13 @@ $: {
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr class="">
|
||||
<th class="text-white hidden sm:table-cell font-medium text-sm ">Symbol</th>
|
||||
<th class="text-white font-medium text-sm ">Company</th>
|
||||
<th class="text-white hidden sm:table-cell font-medium text-center text-sm ">Volume</th>
|
||||
<th class="text-white font-medium text-end text-sm ">Price when Created</th>
|
||||
<th class="text-white font-medium text-end text-sm ">Price Target</th>
|
||||
<th class="text-white font-medium text-end text-sm ">Today</th>
|
||||
<th class="text-white font-semibold text-[1rem] ">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem] ">Company</th>
|
||||
<th class="text-white font-semibold text-center text-[1rem] ">Volume</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Price Target</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Current Price</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="p-3">
|
||||
@ -332,60 +333,44 @@ $: {
|
||||
<!-- row -->
|
||||
<tr on:click={() => stockSelector(item?.symbol, item?.assetType)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
|
||||
|
||||
<td on:click={() => handleFilter(item?.id)} class="hidden sm:table-cell text-blue-400 font-medium text-sm text-start border-b-[#09090B] flex flex-row items-center">
|
||||
<td on:click={() => handleFilter(item?.id)} class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center">
|
||||
<input type="checkbox" checked={deletePriceAlertList?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" />
|
||||
{item?.symbol}
|
||||
</td>
|
||||
|
||||
<td on:click={() => handleFilter(item?.id)} class="text-gray-200 border-b-[#09090B]">
|
||||
|
||||
<span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
||||
<div class="sm:hidden flex flex-row items-center">
|
||||
<input type="checkbox" checked={deletePriceAlertList?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" />
|
||||
<div class="flex flex-col w-24">
|
||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
||||
<span class="text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<td on:click={() => handleFilter(item?.id)} 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="hidden sm:table-cell text-white font-medium text-sm text-center border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}).format(item?.volume)}
|
||||
|
||||
</td>
|
||||
<td class="text-white font-medium text-sm text-end border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
${item?.priceWhenCreated}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white font-medium text-sm text-end border-b-[#09090B]">
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
${item?.targetPrice}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
${item.price?.toFixed(2)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
{#if item?.changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{item?.changesPercentage?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{item?.changesPercentage?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-gray-200 border-b-[#09090B]">
|
||||
<div class="flex flex-row justify-end items-center">
|
||||
|
||||
<div class="flex flex-col mt-3">
|
||||
<span class="text-white font-medium text-md ml-auto">${item.price?.toFixed(2)}</span>
|
||||
<div class="flex flex-row mt-1">
|
||||
{#if item?.changesPercentage >=0}
|
||||
<svg class="w-5 h-5 -mr-0.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-xs font-medium">+{item?.changesPercentage?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
<svg class="w-5 h-5 -mr-0.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-xs font-medium">{item?.changesPercentage?.toFixed(2)}% </span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
@ -396,9 +396,9 @@ $: isScrolled = y > 0;
|
||||
|
||||
<svelte:window bind:scrollY={y}/>
|
||||
|
||||
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden">
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col w-full">
|
||||
<main class="grow w-full">
|
||||
<section class="w-full">
|
||||
<div class="w-full">
|
||||
@ -487,11 +487,11 @@ $: isScrolled = y > 0;
|
||||
<!--End Mobile Navbar-->
|
||||
|
||||
|
||||
<div class="w-full max-w-3xl sm:max-w-6xl px-3">
|
||||
<div class="w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-5">
|
||||
|
||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||
<!-- Main content -->
|
||||
<div class="pb-12 md:pb-20 w-full lg:max-w-2xl xl:max-w-3xl 2xl:max-w-5xl">
|
||||
<div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
|
||||
<div class="md:pr-6 lg:pr-10">
|
||||
|
||||
|
||||
@ -664,11 +664,11 @@ $: isScrolled = y > 0;
|
||||
<!--End Main Content-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
|
||||
<aside class="hidden lg:block w-fit max-w-xl xl:w-[120px] md:pt-10 pb-12 md:pb-20">
|
||||
<div class="sm:pl-10">
|
||||
|
||||
<!--Start Company Info -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user