ui fix for tables

This commit is contained in:
MuslemRahimi 2025-03-03 17:21:52 +01:00
parent 23981d7458
commit bed2863560
2 changed files with 32 additions and 32 deletions

View File

@ -132,13 +132,13 @@
>
<div
on:click={() => sortData("date")}
class="cursor-pointer p-2 text-center"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Date
</div>
<div
on:click={() => sortData("ticker")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Symbol
<svg
@ -160,7 +160,7 @@
<div
on:click={() => sortData("price")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Price
<svg
@ -181,7 +181,7 @@
</div>
<div
on:click={() => sortData("premium")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Premium
<svg
@ -202,7 +202,7 @@
</div>
<div
on:click={() => sortData("size")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Size
<svg
@ -223,7 +223,7 @@
</div>
<div
on:click={() => sortData("volume")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Volume
<svg
@ -245,7 +245,7 @@
<div
on:click={() => sortData("sizeVolRatio")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
% Size / Vol
<svg

View File

@ -243,7 +243,7 @@
>
<div
on:click={() => sortData("time")}
class="cursor-pointer p-2 text-center whitespace-nowrap"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Time
<svg
@ -264,7 +264,7 @@
</div>
<div
on:click={() => sortData("ticker")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Symbol
<svg
@ -420,7 +420,7 @@
<div
on:click={() => sortData("price")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Price
<svg
@ -441,7 +441,7 @@
</div>
<div
on:click={() => sortData("premium")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Premium
<svg
@ -463,7 +463,7 @@
<div
on:click={() => sortData("type")}
class="cursor-pointer p-2 text-center whitespace-nowrap"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Type
<svg
@ -485,7 +485,7 @@
<div
on:click={() => sortData("exec")}
class="cursor-pointer p-2 text-center whitespace-nowrap"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Exec.
<svg
@ -507,7 +507,7 @@
<div
on:click={() => sortData("size")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Size
<svg
@ -528,7 +528,7 @@
</div>
<div
on:click={() => sortData("vol")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
Vol
<svg
@ -550,7 +550,7 @@
<div
on:click={() => sortData("oi")}
class="cursor-pointer p-2 text-center select-none"
class="cursor-pointer p-2 text-center select-none whitespace-nowrap"
>
OI
<svg
@ -595,13 +595,13 @@
data?.user?.tier !== "Pro"}
>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{formatTime(displayedData[index]?.time)}
</div>
<div
on:click|stopPropagation
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
<HoverStockChart
symbol={displayedData[index]?.ticker}
@ -613,7 +613,7 @@
id={displayedData[index]?.id}
on:click|stopPropagation={() =>
addToWatchlist(displayedData[index]?.id)}
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap {optionsWatchlist.optionsId?.includes(
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap {optionsWatchlist.optionsId?.includes(
displayedData[index]?.id,
)
? 'text-[#FBCE3C]'
@ -633,13 +633,13 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{reformatDate(displayedData[index]?.date_expiration)}
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.dte < 0
? "expired"
@ -647,13 +647,13 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.strike_price}
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap {displayedData[
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
index
]?.put_call === 'Calls'
? 'text-[#00FC50]'
@ -663,7 +663,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap {displayedData[
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
index
]?.sentiment === 'Bullish'
? 'text-[#00FC50]'
@ -675,19 +675,19 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.underlying_price}
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.price}
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
displayedData[index]?.cost_basis,
@ -697,7 +697,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap uppercase {displayedData[
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap uppercase {displayedData[
index
]?.option_activity_type === 'Sweep'
? 'text-[#C6A755]'
@ -707,7 +707,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap uppercase {[
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap uppercase {[
'At Ask',
'Above Ask',
]?.includes(displayedData[index]?.execution_estimate)
@ -726,7 +726,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -735,7 +735,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -744,7 +744,7 @@
</div>
<div
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,