From 73b6344fa75650cc77282512d2e78f6f372edb05 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sun, 2 Jun 2024 12:47:57 +0200 Subject: [PATCH] ui fixes --- src/routes/+page.svelte | 20 +--- src/routes/politicians/[slug]/+page.svelte | 120 ++++++++++++--------- 2 files changed, 69 insertions(+), 71 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 63c0b954..1e5b8123 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -86,22 +86,6 @@ onMount( async() => { - -let charNumber = 30; - - - - -$: { - if($screenWidth < 640) - { - charNumber = 10; - } - else { - charNumber =30; - } -} - @@ -431,7 +415,7 @@ $: { - {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} + {item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name} @@ -577,7 +561,7 @@ $: { - {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} + {item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name} diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte index ab8fbda7..65849387 100644 --- a/src/routes/politicians/[slug]/+page.svelte +++ b/src/routes/politicians/[slug]/+page.svelte @@ -171,7 +171,7 @@ async function getPlotOptions() { itemStyle: { color: '#69B3A2' // Change bar color to white }, - barWidth: '10%', + barWidth: '25%', }, { @@ -180,7 +180,7 @@ async function getPlotOptions() { itemStyle: { color: '#E8864D' // Change bar color to white }, - barWidth: '10%', + barWidth: '25%', }, ] }; @@ -431,41 +431,57 @@ onMount(async () => { {numOfAssets} Assets - +
- - - {#each displayList as item} goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#202020] border-b-[#202020] cursor-pointer"> - + + + - - - {/each} @@ -504,51 +507,62 @@ onMount(async () => {
-
Name - Transaction Date + + Transaction - Disclosure Date + Traded - Amount + + Filed Type
-
- stock logo +
+ stock logo
-
+
{item?.ticker?.replace('_',' ')} - {item?.name} + {item?.name?.length > 20 ? item?.name?.slice(0,20)+'...' : item?.name}
+
+ + {#if item?.type === 'Bought'} + Purchase + {:else if item?.type === 'Sold'} + Sale + {:else if item?.type === 'Exchange'} + Exchange + {/if} + + + {item?.amount} + +
+ 		{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} @@ -474,19 +490,6 @@ onMount(async () => { {new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} - {item?.amount} - - {#if item?.type === 'Bought'} - Bought - {:else if item?.type === 'Sold'} - Sold - {:else if item?.type === 'Exchange'} - Exchange - {/if} -
+
- - - - - + + + + {#each displayList as item,index} - goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer"> + goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="w-screen [#0F0F0F] border-b-[#0F0F0F]"> - - + + - - - - +
NameTransaction DateDisclosure DateAmountType + Name + + Transaction + + Traded + + Filed +
-
+
+
{item?.ticker?.replace('_',' ')} - {item?.name?.length < charNumber ? item?.name : item?.name?.slice(0,charNumber)+'...'} + {item?.name?.length > 15 ? item?.name?.slice(0,15)+'...' : item?.name}
+ +
+ + {#if item?.type === 'Bought'} + Purchase + {:else if item?.type === 'Sold'} + Sale + {:else if item?.type === 'Exchange'} + Exchange + {/if} + + + {item?.amount} + +
+ 		{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} + {new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} - - {item?.amount} - - {#if item?.type === 'Bought'} - Bought - {:else if item?.type === 'Sold'} - Sold - {:else if item?.type === 'Exchange'} - Exchange - {/if} -