From e50dcc7debc4220858ef55a3759ce712dd8736d0 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 12 Jul 2024 21:38:20 +0200
Subject: [PATCH] resize etf page

---
 src/app.css                              | 10 +++++++---
 src/lib/components/OptionsNetFlow.svelte |  4 ++--
 src/routes/etf/[tickerID]/+layout.svelte | 21 +++++++++++----------
 src/routes/etf/[tickerID]/+page.svelte   | 20 ++++++++++----------
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8d3c2720..189400a4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -53,10 +53,14 @@
     }
 
     .no-scrollbar {
-      -ms-overflow-style: none; /* IE and Edge */
-      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+      overflow: -moz-scrollbars-none; /* Legacy support for older Firefox versions */
+    }
+    
+    .no-scrollbar::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, and other WebKit-based browsers */
     }
-
 
 
     .shake-ticker:hover img {
diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte
index c5c05aa2..e655f86e 100644
--- a/src/lib/components/OptionsNetFlow.svelte
+++ b/src/lib/components/OptionsNetFlow.svelte
@@ -74,8 +74,8 @@
     },
     animation: $screenWidth < 640 ? false: true,
     grid: {
-        left: '2%',
-        right: '4%',
+        left: '1%',
+        right: $screenWidth < 640 ? '2%' : '0%',
         bottom: '0%',
         top: '10%',
         containLabel: true
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 66ceff32..d4065893 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -586,19 +586,20 @@ $: {
             <!--End Mobile Navbar-->
            
         
-            <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3 sm:px-6">      
-                      
-                          <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 lg:max-w-2xl">
-                                  <div class="md:pr-6 lg:pr-10">
+            <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl 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="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="hidden sm:flex flex-row w-full justify-between items-center pb-10">
+  
                                             <Markethour />
   
                                             <!--Start Watchlist-->
@@ -713,7 +714,7 @@ $: {
                                         
                                         <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#0F0F0F]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
                                           <div class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
-                                            <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F] overflow-x-scroll space-x-3 rtl:space-x-reverse py-2">
+                                            <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F]  space-x-3 rtl:space-x-reverse py-2">
                                               <li class="cursor-pointer flex flex-col items-center">
                                                 <a href={`/etf/${$etfTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
                                                   Overview
@@ -750,7 +751,7 @@ $: {
                                                 </a>
                                                 <div class="{displaySection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#0F0F0F]'} mt-1 h-[3px] rounded-full w-[3rem]" />
                                               </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
+                                              <li class="cursor-pointer flex flex-col items-center pr-6">
                                                 <a href={`/etf/${$etfTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'news' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
                                                   News
                                                 </a>
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 37d40a00..1527b6b1 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -756,7 +756,6 @@ async function initializePrice() {
 <!-- Other meta tags -->
 <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
 <meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -764,19 +763,20 @@ async function initializePrice() {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
 <meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
 
   
-    
-    <section class="bg-[#0F0F0F] min-h-screen pb-40">
-      <div class="w-full xl:w-fit max-w-4xl m-auto ">
-            <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
-                <!-- Main content -->
-                <div class="md:grow pb-12 md:pb-20 w-full max-w-2xl sm:pr-6">
-                  <div class="xl:pr-10">
+<section class="bg-[#0F0F0F] min-h-screen pb-40">
+  
+  <div class="w-full max-w-4xl 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="xl:pr-10">
     
         
                                     <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -914,7 +914,7 @@ async function initializePrice() {
                                   <!-- Start Graph -->
     
                                   {#if output !== null}
-                                    <div class ="w-full max-w-[540px] md:max-w-[620px] lg:max-w-[570px] xl:max-w-[540px] ml-auto mb-4">
+                                  <div class ="w-full sm:pl-7 ml-auto max-w-3xl 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