ui fixes
This commit is contained in:
MuslemRahimi
parent
571e958073
commit
4a65bb75a0
@ -135,6 +135,7 @@ const handleMessage = async (event) => {
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
const dateParts = value.split('-');
|
||||
@ -148,6 +149,7 @@ const handleMessage = async (event) => {
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '${value}',
|
||||
},
|
||||
splitLine: {
|
||||
@ -499,14 +501,14 @@ onMount(async() => {
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="hidden sm:flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4">
|
||||
<div class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll no-scrollbar">
|
||||
<table class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#09090B] shadow-md">
|
||||
<th class="text-start bg-[#09090B] text-white text-sm sm:font-medium">
|
||||
Person
|
||||
</th>
|
||||
<th class="text-end bg-[#09090B] hidden sm:table-cell text-white text-sm sm:font-medium">
|
||||
<th class="text-end bg-[#09090B] text-white text-sm sm:font-medium">
|
||||
Transaction Date
|
||||
</th>
|
||||
<th class="text-end bg-[#09090B] text-white text-sm sm:font-medium">
|
||||
@ -520,26 +522,26 @@ onMount(async() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
|
||||
<tr class="text-gray-200 odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
<tr class="text-white odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
|
||||
<td class="text-gray-200 border-b border-[#09090B]">
|
||||
<td class="text-white text-sm sm:text-[1rem] border-b border-[#09090B] whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white">{formatString(item?.reportingName)?.replace('/de/','')}</span>
|
||||
<span class="text-white text-xs">{extractOfficeInfo(item?.typeOfOwner)}</span>
|
||||
<span class="">{formatString(item?.reportingName)?.replace('/de/','')}</span>
|
||||
<span class="text-sm sm:text-[1rem]">{extractOfficeInfo(item?.typeOfOwner)}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-end hidden sm:table-cell text-xs sm:text-sm text-white border-b border-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
|
||||
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
|
||||
{abbreviateNumber(item?.securitiesTransacted)}
|
||||
</td>
|
||||
<td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
|
||||
${item?.price?.toFixed(2)}
|
||||
</td>
|
||||
<td class="font-medium text-end sm:text-sm text-white border-b border-[#09090B]">
|
||||
<td class="font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
|
||||
{#if item?.transactionType === 'Bought'}
|
||||
<span class="text-[#10DB06]">Bought</span>
|
||||
{:else if item?.transactionType === 'Grant'}
|
||||
@ -558,73 +560,7 @@ onMount(async() => {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="relative sm:hidden w-full">
|
||||
{#each insiderTradingList as item}
|
||||
<div class="bg-[#09090B] border border-slate-800 shadow-lg rounded-lg h-auto pb-4 pl-2 pr-4 pt-4 mb-7">
|
||||
<div class="flex flex-row items-center">
|
||||
<label class="flex flex-col ml-2 w-40">
|
||||
<span class="text-white fónt-medium">Name</span>
|
||||
<span class="text-slate-300 text-sm">{formatString(item?.reportingName)?.replace('/de/','')}</span>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-end">Position</span>
|
||||
<span class="text-white text-opacity-[0.8] text-sm text-end">
|
||||
{extractOfficeInfo(item?.typeOfOwner)}
|
||||
</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">Transaction Date</span>
|
||||
<span class="text-slate-300 text-sm">
|
||||
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">Price</span>
|
||||
<span class="text-white text-sm text-end">
|
||||
${item?.price?.toFixed(2)}
|
||||
</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">Shares</span>
|
||||
<span class="text-slate-300 text-sm font-medium">
|
||||
{abbreviateNumber(item?.securitiesTransacted)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">Type</span>
|
||||
<span class="text-white text-end font-medium">
|
||||
{#if item?.transactionType === 'Bought'}
|
||||
<span class="text-[#10DB06]">Bought</span>
|
||||
{:else if item?.transactionType === 'Grant'}
|
||||
<span class="text-[#8f95a1]">Grant</span>
|
||||
{:else if item?.transactionType === 'Sold'}
|
||||
<span class="text-[#FF2F1F]">Sold</span>
|
||||
{:else if item?.transactionType === 'Exercise'}
|
||||
<span class="text-[#F8901E]">Exercise</span>
|
||||
{:else if item?.transactionType === 'n/a'}
|
||||
<span class="text-gray-300">n/a</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{#if rawData?.length >= 20 && data?.user?.tier === 'Pro'}
|
||||
<label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
|
||||
|
||||
@ -215,7 +215,7 @@ isLoaded = true;
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Buy/Sell</span>
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
{buySellRatio?.toFixed(3)}
|
||||
</span>
|
||||
@ -232,7 +232,7 @@ isLoaded = true;
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
||||
<span class="text-center text-white text-sm">{buySellRatio?.toFixed(2)}</span>
|
||||
<span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
@ -242,7 +242,7 @@ isLoaded = true;
|
||||
<!--Start Dem/Rep-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[rem] ">Dem/Rep</span>
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
{partyRatio?.toFixed(3)}
|
||||
</span>
|
||||
@ -259,7 +259,7 @@ isLoaded = true;
|
||||
</svg>
|
||||
<!-- Percentage Text -->
|
||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
||||
<span class="text-center text-white text-sm">{partyRatio?.toFixed(2)}</span>
|
||||
<span class="text-center text-white text-sm sm:text-[1rem]">{partyRatio?.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
@ -271,7 +271,7 @@ isLoaded = true;
|
||||
<!--End Widget-->
|
||||
|
||||
|
||||
<label on:click={changeStructure} class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duration-100 transition ease-in-out px-4 py-2 rounded-lg shadow-md">
|
||||
<label on:click={changeStructure} class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#27272A] px-4 py-2 rounded-lg shadow-md">
|
||||
<span class="m-auto mr-0.5 text-white text-sm">
|
||||
Switch To: {displayStructure}
|
||||
</span>
|
||||
@ -279,17 +279,17 @@ isLoaded = true;
|
||||
|
||||
|
||||
{#if displayStructure === 'Card'}
|
||||
<div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4">
|
||||
<div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#09090B]">
|
||||
<th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
|
||||
Person
|
||||
</th>
|
||||
<th class="shadow-md text-end bg-[#09090B] hidden sm:table-cell text-white text-sm font-semibold">
|
||||
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
Transaction Date
|
||||
</th>
|
||||
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
|
||||
Amount
|
||||
</th>
|
||||
<th class="shadow-md text-white font-semibold text-end text-sm">Type</th>
|
||||
@ -299,27 +299,27 @@ isLoaded = true;
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
|
||||
|
||||
<td class="text-gray-200 pb-3 border-b border-b-[#09090B]">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
|
||||
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={item?.image} loading="lazy"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<span class="text-white">{item?.representative?.replace('_',' ')}</span>
|
||||
<span class="text-white text-opacity-60">{item?.party}</span>
|
||||
<span class="">{item?.representative?.replace('_',' ')}</span>
|
||||
<span class="">{item?.party}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--{item?.firstName} {item?.lastName}-->
|
||||
</td>
|
||||
|
||||
<td class="text-end hidden sm:table-cell text-xs sm:text-sm text-white border-b border-b-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
||||
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-xs sm:text-sm text-white border-b border-b-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
||||
{item?.amount}
|
||||
</td>
|
||||
<td class="text-start text-end text-sm text-white border-b border-b-[#09090B]">
|
||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
||||
{#if item?.type === 'Bought'}
|
||||
<span class="text-[#10DB06]">Bought</span>
|
||||
{:else if item?.type === 'Sold'}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user