ui fix
This commit is contained in:
parent
e0e098b7f4
commit
9163c5e8f3
@ -167,12 +167,12 @@
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
slot="header"
|
slot="header"
|
||||||
class="tr th m-auto sticky z-40 top-0 border-b border-gray-800 shadow-xl"
|
class="tr th m-auto sticky z-40 top-0 border border-gray-800"
|
||||||
>
|
>
|
||||||
<!-- Table headers -->
|
<!-- Table headers -->
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("date")}
|
on:click={() => sortData("date")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Date
|
Date
|
||||||
<svg
|
<svg
|
||||||
@ -192,7 +192,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("ticker")}
|
on:click={() => sortData("ticker")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] font-bold text-slate-300 text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default font-bold text-white text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Symbol
|
Symbol
|
||||||
<svg
|
<svg
|
||||||
@ -215,7 +215,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("price")}
|
on:click={() => sortData("price")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Price
|
Price
|
||||||
<svg
|
<svg
|
||||||
@ -237,7 +237,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("premium")}
|
on:click={() => sortData("premium")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Premium
|
Premium
|
||||||
<svg
|
<svg
|
||||||
@ -260,7 +260,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("size")}
|
on:click={() => sortData("size")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Size
|
Size
|
||||||
<svg
|
<svg
|
||||||
@ -282,7 +282,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("volume")}
|
on:click={() => sortData("volume")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Volume
|
Volume
|
||||||
<svg
|
<svg
|
||||||
@ -305,7 +305,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("sizeVolRatio")}
|
on:click={() => sortData("sizeVolRatio")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
% Size / Vol
|
% Size / Vol
|
||||||
<svg
|
<svg
|
||||||
@ -329,7 +329,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("sizeAvgVolRatio")}
|
on:click={() => sortData("sizeAvgVolRatio")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
% Size / Avg Vol
|
% Size / Avg Vol
|
||||||
<svg
|
<svg
|
||||||
@ -353,7 +353,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("sector")}
|
on:click={() => sortData("sector")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Sector
|
Sector
|
||||||
<svg
|
<svg
|
||||||
@ -376,7 +376,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("assetType")}
|
on:click={() => sortData("assetType")}
|
||||||
class="td cursor-pointer select-none bg-[#121217] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Asset Type
|
Asset Type
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@ -241,14 +241,11 @@
|
|||||||
itemCount={displayedData.length}
|
itemCount={displayedData.length}
|
||||||
itemSize={40}
|
itemSize={40}
|
||||||
>
|
>
|
||||||
<div
|
<div slot="header" class="tr th sticky z-40 top-0 border border-gray-800">
|
||||||
slot="header"
|
|
||||||
class="tr th sticky z-40 top-0 border-b border-gray-800 shadow-xl"
|
|
||||||
>
|
|
||||||
<!-- Table headers -->
|
<!-- Table headers -->
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("time")}
|
on:click={() => sortData("time")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Time
|
Time
|
||||||
<svg
|
<svg
|
||||||
@ -268,7 +265,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("ticker")}
|
on:click={() => sortData("ticker")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] font-bold text-slate-300 text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default font-bold text-white text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Symbol
|
Symbol
|
||||||
<svg
|
<svg
|
||||||
@ -289,13 +286,13 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="td select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("expiry")}
|
on:click={() => sortData("expiry")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Expiry
|
Expiry
|
||||||
<svg
|
<svg
|
||||||
@ -317,7 +314,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("dte")}
|
on:click={() => sortData("dte")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
DTE
|
DTE
|
||||||
<svg
|
<svg
|
||||||
@ -339,7 +336,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("strike")}
|
on:click={() => sortData("strike")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Strike
|
Strike
|
||||||
<svg
|
<svg
|
||||||
@ -361,7 +358,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("callPut")}
|
on:click={() => sortData("callPut")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
C/P
|
C/P
|
||||||
<svg
|
<svg
|
||||||
@ -383,7 +380,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("sentiment")}
|
on:click={() => sortData("sentiment")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Sent.
|
Sent.
|
||||||
<svg
|
<svg
|
||||||
@ -406,7 +403,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("spot")}
|
on:click={() => sortData("spot")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Spot
|
Spot
|
||||||
<svg
|
<svg
|
||||||
@ -428,7 +425,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("price")}
|
on:click={() => sortData("price")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Price
|
Price
|
||||||
<svg
|
<svg
|
||||||
@ -450,7 +447,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("premium")}
|
on:click={() => sortData("premium")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Prem
|
Prem
|
||||||
<svg
|
<svg
|
||||||
@ -472,7 +469,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("type")}
|
on:click={() => sortData("type")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Type
|
Type
|
||||||
<svg
|
<svg
|
||||||
@ -494,7 +491,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("exec")}
|
on:click={() => sortData("exec")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Exec
|
Exec
|
||||||
<svg
|
<svg
|
||||||
@ -516,7 +513,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("size")}
|
on:click={() => sortData("size")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Size
|
Size
|
||||||
<svg
|
<svg
|
||||||
@ -538,7 +535,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("vol")}
|
on:click={() => sortData("vol")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
Vol
|
Vol
|
||||||
<svg
|
<svg
|
||||||
@ -560,7 +557,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
on:click={() => sortData("oi")}
|
on:click={() => sortData("oi")}
|
||||||
class="td cursor-pointer select-none bg-[#17171D] text-slate-300 font-bold text-xs text-start uppercase"
|
class="td cursor-pointer select-none bg-default text-white font-bold text-xs text-start uppercase"
|
||||||
>
|
>
|
||||||
OI
|
OI
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@ -761,7 +761,7 @@
|
|||||||
: nyseDate} (NYSE Time)
|
: nyseDate} (NYSE Time)
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="rounded-md border border-gray-700 bg-[#121217] p-2">
|
<div class="rounded-md border border-gray-700 bg-primary p-2">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
|
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
|
||||||
>
|
>
|
||||||
@ -842,7 +842,7 @@
|
|||||||
<div class="sm:ml-auto w-full sm:w-fit pt-5">
|
<div class="sm:ml-auto w-full sm:w-fit pt-5">
|
||||||
<div class="relative flex flex-col sm:flex-row items-center">
|
<div class="relative flex flex-col sm:flex-row items-center">
|
||||||
<div
|
<div
|
||||||
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#19191F] rounded-md border border-gray-600"
|
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600"
|
||||||
>
|
>
|
||||||
<label class="flex flex-row items-center">
|
<label class="flex flex-row items-center">
|
||||||
<input
|
<input
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user