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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-20 18:33:38 +01:00
parent 28858235c1
commit fb612f4b3f
6 changed files with 109 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
View File

@ -23,16 +23,16 @@
<div
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
<h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white">
<thead class="text-white"
><tr
><th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
>Company</th
>
<th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
>FTD / Avg Volume</th
></tr
></thead
@ -45,14 +45,14 @@
similarStocks?.slice(0, 8).length - 1
? 'border-b'
: ''}"
><td class="text-left text-[1rem]"
><td class="text-left text-[1rem] px-2"
><a
href={`/stocks/${item?.symbol}`}
class="sm:hover:text-white text-blue-400"
>{item?.symbol}</a
></td
>
<td class="text-right cursor-normal text-[1rem]"
<td class="text-right cursor-normal text-[1rem] px-2"
>{item?.relativeFTD > 0.01
? abbreviateNumber(item?.relativeFTD) + "%"
: "< 0.01%"}</td
@ -62,12 +62,14 @@
{/each}
</tbody>
</table>
<a
href="/list/most-ftd-shares"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Fail-to-Deliver Ranks
</a>
<div class="px-2">
<a
href="/list/most-ftd-shares"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Fail-to-Deliver Ranks
</a>
</div>
</div>
{/if}
</aside>

4
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
View File

@ -66,9 +66,7 @@
description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`}
/>
<section
class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
>
<section class="bg-default w-full overflow-hidden text-white h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"

36
src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
View File

@ -117,12 +117,14 @@
<br />
Formula: Market Cap = Stock Price * Shares Outstanding
</div>
<a
href="/blog/article/market-capitalization"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-2 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Full Definition
</a>
<div class="px-2">
<a
href="/blog/article/market-capitalization"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-2 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Full Definition
</a>
</div>
</div>
{#if similarStocks?.length > 0}
@ -134,11 +136,11 @@
<thead class="text-white"
><tr
><th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
>Company</th
>
<th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
>Market Cap</th
></tr
></thead
@ -151,14 +153,14 @@
similarStocks?.slice(0, 8).length - 1
? 'border-b'
: ''}"
><td class="text-left text-[1rem]"
><td class="text-left text-[1rem] px-2"
><a
href={`/stocks/${item?.symbol}`}
class="sm:hover:text-white text-blue-400"
>{item?.name}</a
></td
>
<td class="text-right cursor-normal text-[1rem]"
<td class="text-right cursor-normal text-[1rem] px-2"
>{abbreviateNumber(item?.marketCap)}</td
>
</tr>
@ -167,12 +169,14 @@
</tbody>
</table>
{#if capCategory}
<a
href={capCategory?.link}
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
{capCategory?.name} Rankings
</a>
<div class="px-2">
<a
href={capCategory?.link}
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
{capCategory?.name} Rankings
</a>
</div>
{/if}
</div>
{/if}

4
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -396,9 +396,7 @@
description={`Historical Market Cap of ${$displayCompanyName}.`}
/>
<section
class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
>
<section class="bg-default w-full overflow-hidden text-white h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"

101
src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
View File

@ -3,71 +3,6 @@
export let data;
const similarStocks = data?.getSimilarStocks;
function getMarketCapCategory(marketCap) {
const BILLION = 1_000_000_000;
const MILLION = 1_000_000;
const marketCapNavigation = [
{
threshold: 200 * BILLION,
name: "Mega-Cap",
link: "/list/market-cap/mega-cap-stocks",
},
{
minThreshold: 10 * BILLION,
maxThreshold: 200 * BILLION,
name: "Large-Cap",
link: "/list/market-cap/large-cap-stocks",
},
{
minThreshold: 2 * BILLION,
maxThreshold: 10 * BILLION,
name: "Mid-Cap",
link: "/list/market-cap/mid-cap-stocks",
},
{
minThreshold: 300 * MILLION,
maxThreshold: 2 * BILLION,
name: "Small-Cap",
link: "/list/market-cap/small-cap-stocks",
},
{
minThreshold: 50 * MILLION,
maxThreshold: 300 * MILLION,
name: "Micro-Cap",
link: "/list/market-cap/micro-cap-stocks",
},
{
maxThreshold: 50 * MILLION,
name: "Nano-Cap",
link: "/list/market-cap/nano-cap-stocks",
},
];
if (!marketCap) return null;
// Convert string to number if needed
const capValue =
typeof marketCap === "string" ? parseFloat(marketCap) : marketCap;
return marketCapNavigation.find((category) => {
if (category.threshold) {
return capValue >= category.threshold;
}
if (category.minThreshold && category.maxThreshold) {
return (
capValue >= category.minThreshold && capValue < category.maxThreshold
);
}
if (category.maxThreshold) {
return capValue < category.maxThreshold;
}
return false;
});
}
let capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
</script>
<section class="w-full overflow-hidden">
@ -113,12 +48,14 @@
or services. Revenue does not take any expenses into account and
is therefore different from profits.
</div>
<a
href="/blog/article/revenue"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Full Definition
</a>
<div class="px-2">
<a
href="/blog/article/revenue"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Full Definition
</a>
</div>
</div>
{#if similarStocks?.length > 0}
@ -130,11 +67,11 @@
<thead class="text-white"
><tr
><th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
>Company</th
>
<th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
>Revenue</th
></tr
></thead
@ -147,14 +84,14 @@
similarStocks?.slice(0, 8).length - 1
? 'border-b'
: ''}"
><td class="text-left text-[1rem]"
><td class="text-left text-[1rem] px-2"
><a
href={`/stocks/${item?.symbol}/statistics/revenue`}
class="sm:hover:text-white text-blue-400"
>{item?.name}</a
></td
>
<td class="text-right cursor-normal text-[1rem]"
<td class="text-right cursor-normal text-[1rem] px-2"
>{abbreviateNumber(item?.revenue)}</td
>
</tr>
@ -162,12 +99,14 @@
{/each}
</tbody>
</table>
<a
href="/list/highest-revenue"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Revenue Rankings
</a>
<div class="px-2">
<a
href="/list/highest-revenue"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
>
Revenue Rankings
</a>
</div>
</div>
{/if}
</aside>

106
src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
View File

@ -396,9 +396,7 @@
description={`Historical Market Cap of ${$displayCompanyName}.`}
/>
<section
class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
>
<section class="bg-default w-full overflow-hidden text-white h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"
@ -410,7 +408,7 @@
</div>
{#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2">
<div class="grid grid-cols-1 gap-2 mt-3 mb-3 sm:mt-0 sm:mb-0">
<Infobox
text={`${$displayCompanyName} has a market cap or net worth of ${abbreviateNumber(
data?.getStockQuote?.marketCap,
@ -615,59 +613,63 @@
<Chart {init} options={optionsData} class="chart" />
</div>
<h2 class="mt-10 text-xl text-white font-bold">
Market Cap History
</h2>
<div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
>
<h3 class="text-xl sm:text-2xl text-white font-bold">
Market Cap History
</h3>
<div
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
>
{#each tabs as item, i}
{#if data?.user?.tier !== "Pro" && i > 0}
<button
on:click={() => goto("/pricing")}
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
>
<span class="relative text-sm block font-semibold">
{item.title}
<svg
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#A3A3A3"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg
>
</span>
</button>
{:else}
<button
on:click={() => changeTablePeriod(i)}
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if}
<span
class="relative text-sm block font-semibold {activeIdx ===
i
? 'text-black'
: 'text-white'}"
<div
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
>
{#each tabs as item, i}
{#if data?.user?.tier !== "Pro" && i > 0}
<button
on:click={() => goto("/pricing")}
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
>
{item.title}
</span>
</button>
{/if}
{/each}
<span class="relative text-sm block font-semibold">
{item.title}
<svg
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#A3A3A3"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg
>
</span>
</button>
{:else}
<button
on:click={() => changeTablePeriod(i)}
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if}
<span
class="relative text-sm block font-semibold {activeIdx ===
i
? 'text-black'
: 'text-white'}"
>
{item.title}
</span>
</button>
{/if}
{/each}
</div>
</div>
</div>