From d9f0768657a1ed257d6008cc0f3c1cf238b8e713 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 7 Aug 2024 13:08:56 +0200
Subject: [PATCH] make etf page bigger

---
 src/lib/components/CountrySegmentation.svelte |  2 +-
 src/lib/components/OptionsData.svelte         |  2 +-
 src/lib/components/PriceAnalysis.svelte       |  2 +-
 src/lib/components/SectorSegmentation.svelte  |  9 +-
 src/lib/components/TrendAnalysis.svelte       |  2 +-
 src/routes/etf/[tickerID]/+layout.svelte      | 24 ++---
 src/routes/etf/[tickerID]/+page.svelte        |  6 +-
 .../[tickerID]/congress-trading/+page.svelte  |  4 +-
 src/routes/etf/[tickerID]/news/+page.svelte   | 97 ++++++++-----------
 .../stocks/[tickerID]/news/+page.svelte       |  2 +-
 10 files changed, 67 insertions(+), 83 deletions(-)

diff --git a/src/lib/components/CountrySegmentation.svelte b/src/lib/components/CountrySegmentation.svelte
index a09e5811..89cfb075 100644
--- a/src/lib/components/CountrySegmentation.svelte
+++ b/src/lib/components/CountrySegmentation.svelte
@@ -50,7 +50,7 @@ $: {
 <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="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">
                         <label for="countryWeightingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index e7ba5262..55f3c96f 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -187,7 +187,7 @@ $: {
 
 
                     
-                <div class="sm:mt-5">
+                <div class="sm:mt-10">
                     The Options activity signals a
                     {#if signal === 'Bullish' }
                       <span class="text-[#10DB06]">
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 90204a4f..cd94c6ea 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -220,7 +220,7 @@ $: {
             </div>
 
             <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-->  
                   <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">
diff --git a/src/lib/components/SectorSegmentation.svelte b/src/lib/components/SectorSegmentation.svelte
index b3e588eb..4ba5a063 100644
--- a/src/lib/components/SectorSegmentation.svelte
+++ b/src/lib/components/SectorSegmentation.svelte
@@ -85,11 +85,10 @@ $: {
 </script>
     
     
-    
-    <section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0 w-full">
-        <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="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-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="relative flex justify-center items-center overflow-hidden w-full">
+                <div class="w-full">
                         
                     <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">
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 6f3877f9..f67b96b0 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -114,7 +114,7 @@ $: {
            
 
             <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-->  
                   <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">
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 913f2576..00677f71 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -478,14 +478,14 @@ $: {
 
   
       
-      <body class="bg-[#09090B] pb-40">
-      
-          <!-- 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">
-              <main class="grow">
-                  <section>
-                      <div class="w-full">
-                          <div class="sm:flex sm:justify-start w-full">
+
+<body class="bg-[#09090B] pb-40">    
+  <!-- Page wrapper -->
+  <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">
+          <section>
+              <div class="w-full">
+                  <div class="sm:flex sm:justify-start w-full">
       
              <!--Start Mobile Navbar-->
              <div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden">
@@ -569,17 +569,17 @@ $: {
             <!--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">
                   <!-- 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">
                                    
                                    
                   
                                       <!-----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">
   
@@ -756,7 +756,7 @@ $: {
                               </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">
                         
                                 <!--Start Company Info -->
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index d1f62e9b..53c754b1 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -744,12 +744,12 @@ async function initializePrice() {
   
 <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">
             <!-- 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">
     
         
@@ -888,7 +888,7 @@ async function initializePrice() {
                                   <!-- Start Graph -->
     
                                   {#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}
                                       <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
diff --git a/src/routes/etf/[tickerID]/congress-trading/+page.svelte b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
index ce1e4257..2216af69 100644
--- a/src/routes/etf/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
@@ -182,7 +182,7 @@ isLoaded = true;
     <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="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">
                         <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
                             Congress Trading
@@ -208,7 +208,7 @@ isLoaded = true;
                       </h3>
                        <!--Start Widget-->
                        <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-->  
                           <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
diff --git a/src/routes/etf/[tickerID]/news/+page.svelte b/src/routes/etf/[tickerID]/news/+page.svelte
index 47373a03..02e18e0f 100644
--- a/src/routes/etf/[tickerID]/news/+page.svelte
+++ b/src/routes/etf/[tickerID]/news/+page.svelte
@@ -1,14 +1,14 @@
 <script lang='ts'>
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
   import { formatDate } from '$lib/utils';
-  import { etfTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
+  
   export let data;
   
   
   
   
   let rawNews = data?.getStockNews;
-  let newsList = rawNews?.slice(0,5) ?? [];
+  let newsList = rawNews?.slice(0,20) ?? [];
   
   
   let videoId = null;
@@ -29,27 +29,15 @@
       }
   }
   
-  
-  
-  
-  
-    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();
-      }
+  function loadMoreData() {
+    const nextIndex = newsList?.length;
+    const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
+    newsList = [...newsList, ...newArticles];
   }
   
   
   
+  
   </script>
   
   
@@ -58,22 +46,20 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <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>
-    <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 -->
-    <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) 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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
+    <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} (${$stockTicker}).`} />
     <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={`${$displayCompanyName} (${$etfTicker}) 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:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
+    <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} (${$stockTicker}).`} />
     <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -81,33 +67,32 @@
   
   
   
-  
-  <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">
-              <main>
-                  <div class="sm:p-7 m-auto mt-5 sm:mt-0">
+  <section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+      <div class="m-auto h-full overflow-hidden ">
+              <main class="">
+                  <div class="sm:p-7 m-auto mt-2 sm:mt-0">
                       <div class="mb-6">
                           <h1 class="text-2xl sm:text-3xl text-white font-bold">
                             News
                           </h1>
                         </div>
   
-                        <div class="grid grid-cols-1 gap-2">
                             {#if newsList.length !== 0}
+                            <div class="grid grid-cols-1 gap-2 pb-5">
                             {#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)}
                                           <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}`}
                                               frameborder="0"
                                               allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                               allowfullscreen
                                           ></iframe>
                                       {: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 ">
-                                              <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>
                                           </a>
                                       {/if}
@@ -116,32 +101,32 @@
                                             {item?.site} · {formatDate(item?.publishedDate)} ago
                                           </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}
-                                          
-                                          <p class="text-white text-sm mt-2 font-normal">
-                                            {item?.text}
-                                          </p>
+                                            <p class="text-white text-sm mt-2 font-normal">
+                                              {item?.text}
+                                            </p>
                                           </a>
                                       </div>
                                   </div>
                             
                                   <hr class="border-blue-400 w-full m-auto mt-5 mb-5">
-  
-                                  
                               {/each}
-  
-                              <InfiniteLoading on:infinite={infiniteHandler} />
-  
-  
-                                
-                            {:else}
-                            <h2 class="mt-20 text-3xl font-bold text-slate-700 mb-20 m-auto">
-                              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>
+                              
+                            </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
+                            </label>
+                            {/if}
+  
+  
+                            {: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}
-                        </div>
   
                       
                   </div>
diff --git a/src/routes/stocks/[tickerID]/news/+page.svelte b/src/routes/stocks/[tickerID]/news/+page.svelte
index 80757157..22b2f76d 100644
--- a/src/routes/stocks/[tickerID]/news/+page.svelte
+++ b/src/routes/stocks/[tickerID]/news/+page.svelte
@@ -77,7 +77,7 @@ function loadMoreData() {
                         </h1>
                       </div>
 
-                          {#if newsList.length !== 0}
+                          {#if newsList?.length !== 0}
                           <div class="grid grid-cols-1 gap-2 pb-5">
                           {#each newsList as item}
                                 <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">