From f9662226be16a4067fe4163ad1ed19c7062a999b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 25 Dec 2024 17:12:30 +0100
Subject: [PATCH] update layout of stock page

---
 src/routes/+layout.svelte                   | 12 ++++-----
 src/routes/stocks/[tickerID]/+layout.svelte | 30 +++++++++++++--------
 src/routes/stocks/[tickerID]/+page.svelte   | 17 ++++++------
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4f4a7796..cc4efe1e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -824,7 +824,7 @@
 
         <a href="/" class="-ml-2 flex flex-shrink-0">
           <img
-            class="avatar w-9 xl:w-10 rounded-full"
+            class="avatar w-9 3xl:w-10 rounded-full"
             src={stocknear_logo}
             alt="Stocknear Logo"
           />
@@ -834,7 +834,7 @@
         <div
           class="relative w-full flex flex-row justify-end sm:justify-between items-center"
         >
-          <div class="sm:w-full sm:ml-2 xl:ml-[75px]">
+          <div class="sm:w-full sm:ml-2 3xl:ml-[75px]">
             <Searchbar />
           </div>
           <NotificationBell {data} {hasUnreadElement} />
@@ -912,19 +912,19 @@
       </div>
       <div>
         <div class="flex w-full">
-          <div class="hidden xl:block xl:w-[300px]">
+          <div class="hidden 3xl:block 3xl:w-[300px]">
             <aside
-              class="fixed overflow-y-auto scroller overflow-hidden inset-y-0 left-0 z-50 xl:flex w-64 flex-col xl:border-r xl:border-gray-800 bg-[#141417]"
+              class="fixed overflow-y-auto scroller overflow-hidden inset-y-0 left-0 z-50 3xl:flex w-64 flex-col 3xl:border-r 3xl:border-gray-800 bg-[#141417]"
             >
               <nav
-                class="flex flex-col items-center mr-auto gap-y-4 xl:py-5 w-full"
+                class="flex flex-col items-center mr-auto gap-y-4 3xl:py-5 w-full"
               >
                 <a
                   href="/"
                   class="ml-3 mb-5 flex justify-end items-center h-9 w-9 shrink-0 gap-2 rounded-full text-lg font-semibold text-primary-foreground md:h-10 md:w-10 md:text-base"
                 >
                   <img
-                    class="avatar w-9 xl:w-12 rounded-full"
+                    class="avatar w-9 3xl:w-12 rounded-full"
                     src={stocknear_logo}
                     alt="Stocknear Logo"
                   />
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 374157e1..7dfb0172 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -579,12 +579,10 @@
               >
                 <!-- Main content -->
                 <div class="pb-12 md:pb-20 w-full">
-                  <div class="md:pr-6 lg:pr-10">
+                  <div class="">
                     <!-----Start-Header-CandleChart-Indicators------>
 
-                    <div
-                      class="m-auto pl-0 sm:pl-4 overflow-hidden mb-3 xl:pr-7"
-                    >
+                    <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-3">
                       <div
                         class="hidden sm:flex flex-row w-full justify-between items-center"
                       >
@@ -709,20 +707,30 @@
                           </label>
                         </div>
                         <!--End Price Alert -->
+
+                        <div
+                          class="hidden sm:flex items-end justify-end absolute right-0 top-12 {$scoreComponent ===
+                          false
+                            ? 'invisible'
+                            : ''}"
+                        >
+                          <AIScore
+                            score={data?.getStockDeck?.score}
+                            tier={data?.user?.tier}
+                          />
+                        </div>
                       </div>
 
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <!-- svelte-ignore a11y-label-has-associated-control -->
 
-                      <div class="flex items-center w-full mt-3">
+                      <div class="flex items-center w-full mt-5">
                         <div
                           class="flex flex-row justify-start w-full items-center"
                         >
-                          <div
-                            class="flex flex-col items-start ml-2 sm:ml-3 w-full"
-                          >
+                          <div class="flex flex-col items-start w-full">
                             <div
-                              class="flex flex-row justify-between items-center w-full"
+                              class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
                             >
                               <span
                                 class="text-2xl lg:text-3xl font-bold text-white"
@@ -734,9 +742,9 @@
                                 ({$stockTicker?.toUpperCase()})
                               </span>
                               <div
-                                class="items-end justify-end {$scoreComponent ===
+                                class="sm:hidden items-end justify-end absolute right-3 top-14 {$scoreComponent ===
                                 false
-                                  ? '-mt-8 invisible'
+                                  ? 'invisible'
                                   : ''}"
                               >
                                 <AIScore
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index aef1414f..9e5842f5 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -491,7 +491,6 @@
     }
   }
 
-
   $: options = {
     width: width,
     height: height,
@@ -769,7 +768,7 @@
     >
       <!-- Main content -->
       <div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
-        <div class="xl:pr-10">
+        <div class="">
           <div
             class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4"
           >
@@ -1115,7 +1114,7 @@
               class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
             >
               <table
-                class="w-[50%] text-sm text-white sm:text-[1rem] lg:w-full lg:min-w-[210px]"
+                class="w-[50%] text-sm text-white sm:text-[1rem] xl:min-w-[300px]"
               >
                 <tbody
                   ><tr
@@ -1137,7 +1136,11 @@
                     class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-                      ><a href={`/stocks/${$stockTicker}/statistics/market-cap`} class="sm:hover:text-blue-400 text-white underline underline-offset-4">Market Cap</a></td
+                      ><a
+                        href={`/stocks/${$stockTicker}/statistics/market-cap`}
+                        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+                        >Market Cap</a
+                      ></td
                     >
                     <td
                       class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
@@ -1235,9 +1238,7 @@
                   >
                 </tbody>
               </table>
-              <table
-                class="w-[50%] text-sm text-white lg:w-auto lg:min-w-[210px]"
-              >
+              <table class="w-[50%] text-sm text-white xl:min-w-[300px]">
                 <tbody
                   ><tr
                     class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
@@ -1381,7 +1382,7 @@
               </div>
 
               <div
-                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
+                class="w-full m-auto sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getNextEarnings || {},
                 )?.length !== 0
                   ? ''