AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-27 15:52:47 +01:00
parent 2b59440abe
commit a0bfbb8fbd
4 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/IndustryTable.svelte
View File

@ -89,7 +89,9 @@
</script> </script>
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4"> <table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
>
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
</thead> </thead>
@ -97,11 +99,9 @@
{#each displayList as item} {#each displayList as item}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
> >
<td <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
<a <a
href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`} href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
class="sm:hover:underline sm:hover:underline-offset-4 text-white" class="sm:hover:underline sm:hover:underline-offset-4 text-white"
@ -113,25 +113,25 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.numStocks} {item?.numStocks}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{abbreviateNumber(item?.totalMarketCap) ?? "-"} {abbreviateNumber(item?.totalMarketCap) ?? "-"}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgDividendYield?.toFixed(2) ?? "-"}% {item?.avgDividendYield?.toFixed(2) ?? "-"}%
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.pe?.toFixed(2) ?? "-"} {item?.pe?.toFixed(2) ?? "-"}
</td> </td>
@ -139,7 +139,7 @@
<td <td
class="{item?.profitMargin >= 0 class="{item?.profitMargin >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]" : 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
{abbreviateNumber(item?.profitMargin)}% {abbreviateNumber(item?.profitMargin)}%
</td> </td>
@ -147,7 +147,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
</td> </td>
@ -155,7 +155,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%
</td> </td>

24
src/routes/industry/all/+page.svelte
View File

@ -96,7 +96,9 @@
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4"> <table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
>
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
</thead> </thead>
@ -104,11 +106,9 @@
{#each displayList as item} {#each displayList as item}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
> >
<td <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
<a <a
href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`} href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
class="sm:hover:underline sm:hover:underline-offset-4 text-white" class="sm:hover:underline sm:hover:underline-offset-4 text-white"
@ -120,25 +120,25 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.numStocks} {item?.numStocks}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{abbreviateNumber(item?.totalMarketCap) ?? "-"} {abbreviateNumber(item?.totalMarketCap) ?? "-"}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgDividendYield?.toFixed(2) ?? "-"}% {item?.avgDividendYield?.toFixed(2) ?? "-"}%
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.pe?.toFixed(2) ?? "-"} {item?.pe?.toFixed(2) ?? "-"}
</td> </td>
@ -146,7 +146,7 @@
<td <td
class=" {item?.profitMargin >= 0 class=" {item?.profitMargin >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]" : 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
{abbreviateNumber(item?.profitMargin)}% {abbreviateNumber(item?.profitMargin)}%
</td> </td>
@ -154,7 +154,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
</td> </td>
@ -162,7 +162,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%
</td> </td>

24
src/routes/industry/sectors/+page.svelte
View File

@ -95,7 +95,9 @@
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4"> <table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
>
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
</thead> </thead>
@ -103,11 +105,9 @@
{#each displayList as item} {#each displayList as item}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
> >
<td <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap">
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
<a <a
href={sectorNavigation?.find( href={sectorNavigation?.find(
(listItem) => listItem?.title === item?.sector, (listItem) => listItem?.title === item?.sector,
@ -121,25 +121,25 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.numStocks} {item?.numStocks}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{abbreviateNumber(item?.totalMarketCap) ?? "-"} {abbreviateNumber(item?.totalMarketCap) ?? "-"}
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgDividendYield?.toFixed(2) ?? "-"}% {item?.avgDividendYield?.toFixed(2) ?? "-"}%
</td> </td>
<td <td
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.pe?.toFixed(2) ?? "-"} {item?.pe?.toFixed(2) ?? "-"}
</td> </td>
@ -147,7 +147,7 @@
<td <td
class=" {item?.profitMargin >= 0 class=" {item?.profitMargin >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]" : 'text-[#FF2F1F]'} font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end"
> >
{abbreviateNumber(item?.profitMargin)}% {abbreviateNumber(item?.profitMargin)}%
</td> </td>
@ -155,7 +155,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
</td> </td>
@ -163,7 +163,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%
</td> </td>

29
src/routes/sector-flow/+page.svelte
View File

@ -1,10 +1,9 @@
<script lang="ts"> <script lang="ts">
import { numberOfUnreadNotification } from "$lib/store"; import { numberOfUnreadNotification } from "$lib/store";
import { onMount } from "svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte"; import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumberWithColor, sectorNavigation } from "$lib/utils";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js"; import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
export let data; export let data;
@ -112,19 +111,21 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Jim {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Live
Carmer Tracker · Stocknear Sector Flow · Stocknear
</title> </title>
<meta <meta
name="description" name="description"
content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} content={`Track and compare historical and current options activity
performances of sectors`}
/> />
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Jim Carmer Tracker · Stocknear`} /> <meta property="og:title" content={`Jim Carmer Tracker · Stocknear`} />
<meta <meta
property="og:description" property="og:description"
content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} content={`Track and compare historical and current options activity
performances of sectors`}
/> />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
@ -134,7 +135,8 @@
<meta name="twitter:title" content={`Jim Carmer Tracker · Stocknear`} /> <meta name="twitter:title" content={`Jim Carmer Tracker · Stocknear`} />
<meta <meta
name="twitter:description" name="twitter:description"
content={`Track the stock recommendations and performance of CNBC's Jim Cramer`} content={`Track and compare historical and current options activity
performances of sectors`}
/> />
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -196,9 +198,14 @@
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
> >
{item?.name?.length > charNumber <a
? item?.name?.slice(0, charNumber) + "..." href={sectorNavigation?.find(
: item?.name} (listItem) => listItem?.title === item?.name,
)?.link}
class="sm:hover:underline sm:hover:underline-offset-4 text-white"
>
{item?.name}
</a>
</td> </td>
<td <td
@ -270,7 +277,7 @@
<!-- Neutral --> <!-- Neutral -->
<div <div
class="bg-gray-100 h-full" class="bg-gray-300 h-full"
style="width: calc(({item style="width: calc(({item
?.premium_ratio[1]} / ({item ?.premium_ratio[1]} / ({item
?.premium_ratio[0]} + {item ?.premium_ratio[0]} + {item