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

make etf page bigger

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-07 13:08:56 +02:00
parent 1542a0dba7
commit d9f0768657
10 changed files with 67 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/CountrySegmentation.svelte
View File

@ -50,7 +50,7 @@ $: {
<section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0"> <section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0">
<div class="flex justify-center m-auto h-full overflow-hidden"> <div class="flex justify-center m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full"> <div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="w-full max-w-2xl"> <div class="w-full">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<label for="countryWeightingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"> <label for="countryWeightingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">

2
src/lib/components/OptionsData.svelte
View File

@ -187,7 +187,7 @@ $: {
<div class="sm:mt-5"> <div class="sm:mt-10">
The Options activity signals a The Options activity signals a
{#if signal === 'Bullish' } {#if signal === 'Bullish' }
<span class="text-[#10DB06]"> <span class="text-[#10DB06]">

2
src/lib/components/PriceAnalysis.svelte
View File

@ -220,7 +220,7 @@ $: {
</div> </div>
<div class="w-full mt-5 mb-5 flex justify-start items-center"> <div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">

9
src/lib/components/SectorSegmentation.svelte
View File

@ -85,11 +85,10 @@ $: {
</script> </script>
<section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0">
<section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0 w-full"> <div class="flex justify-center m-auto h-full overflow-hidden">
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden w-full"> <div class="w-full">
<div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<label for="sectorWeightingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"> <label for="sectorWeightingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">

2
src/lib/components/TrendAnalysis.svelte
View File

@ -114,7 +114,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center"> <div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20"> <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">

24
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -478,14 +478,14 @@ $: {
<body class="bg-[#09090B] pb-40">
<body class="bg-[#09090B] pb-40">
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full max-w-8xl mt-5 supports-[overflow:clip]:overflow-clip pb-40"> <div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
<main class="grow"> <main class="grow">
<section> <section>
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full"> <div class="sm:flex sm:justify-start w-full">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden"> <div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden">
@ -569,17 +569,17 @@ $: {
<!--End Mobile Navbar--> <!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3"> <div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800"> <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content --> <!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl"> <div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-5xl">
<div class="md:pr-6 lg:pr-10"> <div class="md:pr-6 lg:pr-10">
<!-----Start-Header-CandleChart-Indicators------> <!-----Start-Header-CandleChart-Indicators------>
<div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10"> <div class="m-auto pl-0 sm:pl-4 max-w-5xl overflow-hidden mb-5 md:mt-10">
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10"> <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
@ -756,7 +756,7 @@ $: {
</div> </div>
</div> </div>
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20"> <aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10"> <div class="sm:pl-10">
<!--Start Company Info --> <!--Start Company Info -->

6
src/routes/etf/[tickerID]/+page.svelte
View File

@ -744,12 +744,12 @@ async function initializePrice() {
<section class="bg-[#09090B] min-h-screen pb-40"> <section class="bg-[#09090B] min-h-screen pb-40">
<div class="w-full max-w-4xl m-auto "> <div class="w-full max-w-5xl m-auto ">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800"> <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content --> <!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0"> <div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
<div class="xl:pr-10"> <div class="xl:pr-10">
@ -888,7 +888,7 @@ async function initializePrice() {
<!-- Start Graph --> <!-- Start Graph -->
{#if output !== null} {#if output !== null}
<div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10"> <div class ="w-full sm:pl-7 ml-auto mb-10">
{#if displayData === '1D' && oneDayPrice?.length === 0} {#if displayData === '1D' && oneDayPrice?.length === 0}
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto"> <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
No data available No data available

4
src/routes/etf/[tickerID]/congress-trading/+page.svelte
View File

@ -182,7 +182,7 @@ isLoaded = true;
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"> <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="flex justify-center w-fit m-auto h-full overflow-hidden"> <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden"> <div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0"> <div class="sm:p-7 w-full m-auto mt-5 sm:mt-0">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4"> <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading Congress Trading
@ -208,7 +208,7 @@ isLoaded = true;
</h3> </h3>
<!--Start Widget--> <!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center "> <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 "> <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Buy/Sell--> <!--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-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">

97
src/routes/etf/[tickerID]/news/+page.svelte
View File

@ -1,14 +1,14 @@
<script lang='ts'> <script lang='ts'>
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import { formatDate } from '$lib/utils'; import { formatDate } from '$lib/utils';
import { etfTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
export let data; export let data;
let rawNews = data?.getStockNews; let rawNews = data?.getStockNews;
let newsList = rawNews?.slice(0,5) ?? []; let newsList = rawNews?.slice(0,20) ?? [];
let videoId = null; let videoId = null;
@ -29,27 +29,15 @@
} }
} }
function loadMoreData() {
const nextIndex = newsList?.length;
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
newsList = [...newsList, ...newArticles];
async function infiniteHandler({ detail: { loaded, complete } })
{
if (newsList?.length === rawNews?.length) {
complete();
} else {
const nextIndex = newsList?.length;
const newArticles = rawNews?.slice(nextIndex, nextIndex + 5);
newsList = [...newsList, ...newArticles];
loaded();
}
} }
</script> </script>
@ -58,22 +46,20 @@
<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})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
</title> </title>
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} /> <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/> <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} /> <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<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 -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/> <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} /> <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -81,33 +67,32 @@
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40"> <div class="m-auto h-full overflow-hidden ">
<div class="m-auto h-full overflow-hidden"> <main class="">
<main> <div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="sm:p-7 m-auto mt-5 sm:mt-0">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold"> <h1 class="text-2xl sm:text-3xl text-white font-bold">
News News
</h1> </h1>
</div> </div>
<div class="grid grid-cols-1 gap-2">
{#if newsList.length !== 0} {#if newsList.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item} {#each newsList as item}
<div class="flex flex-col bg-[#09090B] rounded-lg m-auto"> <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)} {#if videoId = checkIfYoutubeVideo(item.url)}
<iframe <iframe
class="w-full h-96 rounded-lg" class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`} src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0" frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen allowfullscreen
></iframe> ></iframe>
{:else} {:else}
<a href={item.url} rel="noopener noreferrer" target="_blank"> <a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
<div class="flex-shrink-0 m-auto "> <div class="flex-shrink-0 m-auto ">
<img src={item.image} class=" w-full rounded-lg" alt="news image" loading="lazy"> <img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
</div> </div>
</a> </a>
{/if} {/if}
@ -116,32 +101,32 @@
{item?.site} · {formatDate(item?.publishedDate)} ago {item?.site} · {formatDate(item?.publishedDate)} ago
</h3> </h3>
<a href={item.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white"> <a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
{item?.title} {item?.title}
<p class="text-white text-sm mt-2 font-normal">
<p class="text-white text-sm mt-2 font-normal"> {item?.text}
{item?.text} </p>
</p>
</a> </a>
</div> </div>
</div> </div>
<hr class="border-blue-400 w-full m-auto mt-5 mb-5"> <hr class="border-blue-400 w-full m-auto mt-5 mb-5">
{/each} {/each}
<InfiniteLoading on:infinite={infiniteHandler} /> </div>
{#if newsList?.length !== rawNews?.length}
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
Load More News
{:else} </label>
<h2 class="mt-20 text-3xl font-bold text-slate-700 mb-20 m-auto"> {/if}
No data available
<svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
</h2> {:else}
<div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium 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>
No news article published yet!
</div>
{/if} {/if}
</div>
</div> </div>

2
src/routes/stocks/[tickerID]/news/+page.svelte
View File

@ -77,7 +77,7 @@ function loadMoreData() {
</h1> </h1>
</div> </div>
{#if newsList.length !== 0} {#if newsList?.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5"> <div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item} {#each newsList as item}
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto"> <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">