ui fixes
This commit is contained in:
MuslemRahimi
parent
cb31accd05
commit
eb15bca8c6
@ -73,7 +73,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1M >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1M?.toFixed(2) ?? "-"}%
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1Y >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1Y?.toFixed(2) ?? "-"}%
|
||||
|
||||
@ -118,19 +118,10 @@
|
||||
$page.url.pathname.startsWith("/options-flow") ||
|
||||
$page.url.pathname.startsWith("/options-zero-dte") ||
|
||||
$page.url.pathname.startsWith("/login") ||
|
||||
$page.url.pathname.startsWith("/register") ||
|
||||
$page.url.pathname.startsWith("/etf") ||
|
||||
$page.url.pathname.startsWith("/stock-splits-calendar") ||
|
||||
$page.url.pathname.startsWith("/dividends-calendar") ||
|
||||
$page.url.pathname.startsWith("/earnings-calendar") ||
|
||||
$page.url.pathname.startsWith("/market-mover") ||
|
||||
$page.url.pathname.startsWith("/market-news") ||
|
||||
$page.url.pathname.startsWith("/portfolio") ||
|
||||
$page.url.pathname.startsWith("/hedge-funds") ||
|
||||
$page.url.pathname.startsWith("/watchlist") ||
|
||||
$page.url.pathname.startsWith("/community") ||
|
||||
$page.url.pathname.startsWith("/stock-screener") ||
|
||||
$page.url.pathname.startsWith("/price-alert");
|
||||
$page.url.pathname.startsWith("/community");
|
||||
|
||||
//$: hideSidebar = $page.url.pathname.startsWith('/contact') || $page.url.pathname.startsWith('/imprint') || $page.url.pathname.startsWith('/privacy-policy') || $page.url.pathname.startsWith('/terms-of-use') || $page.url.pathname.startsWith('/about') || $page.url.pathname.startsWith('/community/create-post') || $page.url.pathname.startsWith('/login') || $page.url.pathname.startsWith('/register')
|
||||
|
||||
@ -539,6 +530,8 @@ const handleTwitchMessage = (event) => {
|
||||
>Economic Calendar</a
|
||||
>
|
||||
</Button>
|
||||
<!--
|
||||
|
||||
<Button
|
||||
builders={[builder]}
|
||||
type="submit"
|
||||
@ -549,7 +542,9 @@ const handleTwitchMessage = (event) => {
|
||||
class="text-start w-full text-[1rem] text-white ml-4 mt-4"
|
||||
>Stock Splits Calendar</a
|
||||
>
|
||||
|
||||
</Button>
|
||||
-->
|
||||
</div>
|
||||
</Sheet.Close>
|
||||
</Accordion.Content>
|
||||
@ -1045,11 +1040,13 @@ const handleTwitchMessage = (event) => {
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Economic Calendar</a
|
||||
>
|
||||
<!--
|
||||
<a
|
||||
href="/stock-splits-calendar"
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Stock Splits Calendar</a
|
||||
>
|
||||
-->
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
|
||||
@ -214,10 +214,9 @@
|
||||
</div>
|
||||
|
||||
<h1
|
||||
class="hidden sm:block text-3xl lg:text-5xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
|
||||
class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
|
||||
>
|
||||
Stock Analysis for
|
||||
<span class="italic text-[#FBCE3C]">Data Freaks</span>
|
||||
Clear & <span class="italic text-[#FBCE3C]">Simple</span> Market Insight.
|
||||
</h1>
|
||||
|
||||
<h1
|
||||
|
||||
@ -197,9 +197,9 @@
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Economic Calendar</li>
|
||||
@ -212,62 +212,12 @@
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
<div
|
||||
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||
>
|
||||
<div class="mb-6 border-b-[2px]">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
Economic Calendar
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||
>
|
||||
Stay updated on upcoming Economic Events worldwide.
|
||||
</span>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div
|
||||
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||
>
|
||||
<svg
|
||||
class="w-36 -my-5"
|
||||
viewBox="0 0 200 200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||
<feMerge>
|
||||
<feMergeNode in="glow" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
fill="#1E40AF"
|
||||
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||
transform="translate(100 100)"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="z-1 absolute top-0">
|
||||
<img class="w-24 ml-5" src={logo} alt="logo" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
@ -370,7 +320,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3"
|
||||
class="flex flex-row items-center w-full sm:w-fit m-auto sm:m-0 pt-6 pb-3"
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3"
|
||||
@ -379,7 +329,7 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white">Filter Country</span>
|
||||
<svg
|
||||
@ -444,7 +394,7 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<span class="truncate text-white"
|
||||
>Filter Importance</span
|
||||
@ -529,7 +479,7 @@
|
||||
{#if filterList?.length !== 0}
|
||||
<Button
|
||||
on:click={() => handleReset()}
|
||||
class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-md truncate"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -556,6 +506,11 @@
|
||||
{#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
|
||||
{#if index === selectedWeekday}
|
||||
{#if day?.length !== 0}
|
||||
<h2 class="font-semibold text-white text-xl mt-5">
|
||||
{formattedWeekday[index]?.split(", ")[1]} · {day?.length}
|
||||
Events
|
||||
</h2>
|
||||
|
||||
<div class="w-full overflow-x-scroll no-scrollbar">
|
||||
<table
|
||||
class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||
@ -602,7 +557,7 @@
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
|
||||
>
|
||||
<label class="p-1.5 rounded-lg">
|
||||
<label class="p-1.5 rounded-md">
|
||||
{item?.time}
|
||||
</label>
|
||||
</td>
|
||||
@ -745,7 +700,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
|
||||
class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||
@ -777,7 +732,7 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription 🔥
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
@ -797,7 +752,7 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Earnings Calendar 🌟
|
||||
Earnings Calendar
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
@ -816,7 +771,7 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Dividend Calendar 💸
|
||||
Dividend Calendar
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
<script lang='ts'>
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
import { page } from '$app/stores';
|
||||
<script lang="ts">
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
|
||||
|
||||
|
||||
function handleMode(i) {
|
||||
activeIdx = i;
|
||||
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
@ -24,105 +20,91 @@
|
||||
},
|
||||
];
|
||||
|
||||
let activeIdx = 0;
|
||||
let activeIdx = 0;
|
||||
|
||||
// Subscribe to the $page store to reactively update the activeIdx based on the URL
|
||||
$: if ($page.url.pathname === '/industry') {
|
||||
$: if ($page.url.pathname === "/industry") {
|
||||
activeIdx = 0;
|
||||
} else if ($page.url.pathname.startsWith('/industry/sectors')) {
|
||||
} else if ($page.url.pathname.startsWith("/industry/sectors")) {
|
||||
activeIdx = 1;
|
||||
} else if ($page.url.pathname.startsWith('/industry/all')) {
|
||||
} else if ($page.url.pathname.startsWith("/industry/all")) {
|
||||
activeIdx = 2;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Industry · stocknear</title>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Industry
|
||||
· stocknear</title
|
||||
>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<meta name="description" content="Lists of stocks industry and sectors.">
|
||||
<meta name="description" content="Lists of stocks industry and sectors." />
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="Industry · stocknear"/>
|
||||
<meta property="og:description" content="Lists of stocks industry and sectors.">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:title" content="Industry · stocknear" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Lists of stocks industry and sectors."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content="Industry · stocknear"/>
|
||||
<meta name="twitter:description" content="Lists of stocks industry and sectors.">
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Industry · stocknear" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Lists of stocks industry and sectors."
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><span class="text-gray-300">Industry</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] lg:px-10 overflow-hidden">
|
||||
|
||||
|
||||
<!--Start Top Winners/Losers-->
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
<div class="ml-4 sm:ml-2 text-start w-full text-white mb-1 text-2xl sm:text-3xl font-semibold">
|
||||
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||
<div class="mb-6">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
Stock Sectors & Industries
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
|
||||
<div class="ml-4 sm:ml-0 w-full mb-4">
|
||||
<div class="bg-[#313131] w-fit relative mr-auto flex flex-wrap items-center justify-center rounded sm:rounded-lg p-1 -mt-3">
|
||||
{#each tabs as item, i}
|
||||
<a href={i === 0 ? '/industry' : i === 1 ? '/industry/sectors' : '/industry/all'}
|
||||
on:click={() => handleMode(i)}
|
||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
<nav class="border-b-[2px] overflow-x-scroll whitespace-nowrap mb-5">
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<a
|
||||
href={i === 0
|
||||
? "/industry"
|
||||
: i === 1
|
||||
? "/industry/sectors"
|
||||
: "/industry/all"}
|
||||
on:click={() => handleMode(i)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === i
|
||||
? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
{/if}
|
||||
<span class="relative text-[1rem] block font-semibold duration-200 text-white">
|
||||
{item.title}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
|
||||
<main class="w-full">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,106 +1,114 @@
|
||||
<script lang='ts'>
|
||||
import { screenWidth } from '$lib/store';
|
||||
import IndustryTable from '$lib/components/IndustryTable.svelte';
|
||||
import { industryList, sectorList } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
<script lang="ts">
|
||||
import { screenWidth } from "$lib/store";
|
||||
import IndustryTable from "$lib/components/IndustryTable.svelte";
|
||||
import { industryList, sectorList } from "$lib/utils";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getSectorIndustryOverview;
|
||||
export let data;
|
||||
let rawData = data?.getSectorIndustryOverview;
|
||||
|
||||
const sectorNavigation = [
|
||||
const sectorNavigation = [
|
||||
{
|
||||
title: 'Financial Services',
|
||||
link: '/list/financial-sector'
|
||||
title: "Financial Services",
|
||||
link: "/list/financial-sector",
|
||||
},
|
||||
{
|
||||
title: 'Finance',
|
||||
link: '/list/financial-sector'
|
||||
title: "Finance",
|
||||
link: "/list/financial-sector",
|
||||
},
|
||||
{
|
||||
title: 'Healthcare',
|
||||
link: '/list/healthcare-sector'
|
||||
title: "Healthcare",
|
||||
link: "/list/healthcare-sector",
|
||||
},
|
||||
{
|
||||
title: 'Technology',
|
||||
link: '/list/technology-sector'
|
||||
title: "Technology",
|
||||
link: "/list/technology-sector",
|
||||
},
|
||||
{
|
||||
title: 'Industrials',
|
||||
link: '/list/industrials-sector'
|
||||
title: "Industrials",
|
||||
link: "/list/industrials-sector",
|
||||
},
|
||||
{
|
||||
title: 'Energy',
|
||||
link: '/list/energy-sector'
|
||||
title: "Energy",
|
||||
link: "/list/energy-sector",
|
||||
},
|
||||
{
|
||||
title: 'Utilities',
|
||||
link: '/list/utilities-sector'
|
||||
title: "Utilities",
|
||||
link: "/list/utilities-sector",
|
||||
},
|
||||
{
|
||||
title: 'Consumer Cyclical',
|
||||
link: '/list/consumer-cyclical-sector'
|
||||
title: "Consumer Cyclical",
|
||||
link: "/list/consumer-cyclical-sector",
|
||||
},
|
||||
{
|
||||
title: 'Real Estate',
|
||||
link: '/list/real-estate-sector'
|
||||
title: "Real Estate",
|
||||
link: "/list/real-estate-sector",
|
||||
},
|
||||
{
|
||||
title: 'Basic Materials',
|
||||
link: '/list/basic-materials-sector'
|
||||
title: "Basic Materials",
|
||||
link: "/list/basic-materials-sector",
|
||||
},
|
||||
{
|
||||
title: 'Communication Services',
|
||||
link: '/list/communication-services-sector'
|
||||
title: "Communication Services",
|
||||
link: "/list/communication-services-sector",
|
||||
},
|
||||
{
|
||||
title: 'Consumer Defensive',
|
||||
link: '/list/consumer-defensive-sector'
|
||||
title: "Consumer Defensive",
|
||||
link: "/list/consumer-defensive-sector",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
];
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
|
||||
|
||||
|
||||
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||
We categorize stocks into {sectorList?.length} sectors and {industryList?.length} industries, based on the company's primary business activity.
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
We categorize stocks into {sectorList?.length} sectors and {industryList?.length}
|
||||
industries, based on the company's primary business activity.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
|
||||
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="w-full">
|
||||
{#each sectorList as sector}
|
||||
<div class="mt-4">
|
||||
<a href={sectorNavigation?.find(item => item?.title === sector)?.link} class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl ">
|
||||
Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<a
|
||||
href={sectorNavigation?.find((item) => item?.title === sector)
|
||||
?.link}
|
||||
class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl"
|
||||
>
|
||||
Sector: {sector}
|
||||
<svg
|
||||
class="inline-block h-6 w-6 -mt-1"
|
||||
viewBox="0 0 20 20"
|
||||
fill="white"
|
||||
style="max-width:40px"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-600 mt-5 "/>
|
||||
<div class="border-t border-gray-600 mt-5" />
|
||||
|
||||
<IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
|
||||
<div class="border-t border-gray-600 mt-5"/>
|
||||
<IndustryTable {charNumber} industryList={rawData[sector]} />
|
||||
<div class="border-t border-gray-600 mt-5" />
|
||||
{/each}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -5,21 +5,10 @@
|
||||
export let data;
|
||||
let rawData = data?.getIndustryOverview;
|
||||
|
||||
function formatFilename(industryName) {
|
||||
// Replace spaces with hyphens
|
||||
let formattedName = industryName?.replace(/ /g, "-");
|
||||
// Replace "&" with "and"
|
||||
formattedName = formattedName?.replace(/&/g, "and");
|
||||
// Remove any extra hyphens (e.g., from consecutive spaces)
|
||||
formattedName = formattedName?.replace(/-{2,}/g, "-");
|
||||
// Convert to lowercase for consistency
|
||||
return "/list/industry/" + formattedName?.toLowerCase();
|
||||
}
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
@ -101,7 +90,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1M >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1M?.toFixed(2) ?? "-"}%
|
||||
@ -109,7 +98,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1Y >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1Y?.toFixed(2) ?? "-"}%
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
@ -144,7 +144,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1M >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1M?.toFixed(2) ?? "-"}%
|
||||
@ -152,7 +152,7 @@
|
||||
|
||||
<td
|
||||
class="{item?.avgChange1Y >= 0
|
||||
? 'text-[#00FC50]'
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgChange1Y?.toFixed(2) ?? "-"}%
|
||||
|
||||
@ -85,10 +85,9 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each ipoList as item, index}
|
||||
{#each ipoList as item}
|
||||
<tr
|
||||
on:click={() => goto("/stocks/" + item?.symbol)}
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-start border-b-[#09090B] whitespace-nowrap"
|
||||
@ -102,9 +101,14 @@
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="whitespace-nowrap text-blue-400 text-sm sm:text-[1rem] text-start border-b-[#09090B]"
|
||||
class="whitespace-nowrap text-sm sm:text-[1rem] text-start border-b-[#09090B]"
|
||||
>
|
||||
<a
|
||||
href={"/stocks/" + item?.symbol}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td
|
||||
@ -118,7 +122,7 @@
|
||||
<td
|
||||
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.ipoPrice !== null ? "$" + item?.ipoPrice : "-"}
|
||||
{item?.ipoPrice !== null ? item?.ipoPrice : "-"}
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
@ -218,9 +218,9 @@
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5"
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
{#if $page.url.pathname.startsWith("/list/industry")}
|
||||
@ -240,9 +240,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"
|
||||
>
|
||||
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||
<!--Start Top Winners/Losers-->
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<div class="ml-2 text-start w-full text-white mb-2">
|
||||
@ -255,7 +253,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
|
||||
<div class="border-b-[2px] mt-2 w-full mb-7" />
|
||||
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
<main class="w-full lg:w-3/4 lg:pr-10">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user