Merge branch 'develop' of github.com:earthpulse/eotdl into develop

ui/src/app.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
   <meta name="viewport" content="width=device-width" />
-  <title>EO-TDL</title>
+  <title>EOTDL</title>
   %sveltekit.head%
   <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="1c333f40-58bf-4d3b-9a10-d57b72c9176a"
     data-blockingmode="manual" type="text/javascript"></script>

ui/src/components/Leaderboard.svelte

@@ -23,7 +23,7 @@
                 <p>{msgText}</p>
             </div>
         {/if}
-        <table class="w-full sm:max-w-2xl max-w-40 max-h-64 max-w">
+        <table class="w-full sm:max-w-2xl max-h-64 max-w">
             <thead>
                 <tr class="bg-[rgb(0,50,71)] text-white h-12">
                     <th class="px-4" />

ui/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+  import HeroBackground from "./HeroBackground.svelte";
   import Hero from "./Hero.svelte";
   import Consortium from "./Consortium.svelte";
   import RecentDatasets from "./RecentDatasets.svelte";
@@ -21,13 +22,24 @@
 </svelte:head>
 
 <div class="w-full flex flex-col items-center">
+  <!-- <HeroBackground /> -->
   <Hero />
-  <RecentDatasets />
-  <PopularDatasets />
-  <DatasetsLeaderboard />
-  <RecentModels />
-  <PopularModels />
-  <ModelsLeaderboard />
+  <div
+    class="w-full"
+    style="background: url('backgrounds/Group-1170.png') center center/cover"
+  >
+    <RecentDatasets />
+    <PopularDatasets />
+    <DatasetsLeaderboard />
+  </div>
+  <div
+    class="w-full"
+    style="background: url('backgrounds/Group-1170.png') center center/cover"
+  >
+    <RecentModels />
+    <PopularModels />
+    <ModelsLeaderboard />
+  </div>
   <Posts posts={data.posts} />
   <Consortium />
 </div>

ui/src/routes/Consortium.svelte

@@ -1,5 +1,5 @@
 <div
-  class="grid sm:grid-rows-[100px,100px] grid-cols-1 max-w-5xl px-5 py-28 w-full"
+  class="grid grid-rows-[200px,300px] sm:grid-rows-[200px,100px] grid-cols-1 max-w-5xl px-5 py-18 sm:py-28 w-full"
 >
   <div class="flex sm:flex-row flex-col h-full sm:gap-12">
     <h2 class="mb-10 text-md font-bold pt-10">Initiated By</h2>

ui/src/routes/HeroBackground.svelte

@@ -0,0 +1,3 @@
+<img src="backgrounds/Group-1190.png" class=" absolute w-[100%] h-[10%] md:h-[14%] object-cover -z-10" alt="">
+<img src="backgrounds/Group-1170.png" class=" md:top-[14%] top-[10%] absolute w-[100%] md:h-[29%] h-[30%] object-cover -z-10 opacity-30 bg-gradient-to-tl from-[rgb(134,204,190)] to-white" alt="">
+<img src="backgrounds/Group-1170.png" class=" md:top-[43%] top-[40%] absolute w-[100%] h-[32%] object-cover -z-10 opacity-30 bg-gradient-to-tl from-[rgb(134,204,190)] to-white" alt="">

ui/src/routes/Nav2.svelte

@@ -43,7 +43,7 @@
         {#each links as link}
             <li
                 class="{$page.url.pathname == '/'
-                    ? 'text-gray-300 hover:text-white'
+                    ? 'text-gray-100 hover:text-white'
                     : 'text-slate-600 hover:text-slate-800'}  
                 hidden lg:block text-slate-500 gap-2 text-sm"
             >
@@ -62,7 +62,7 @@
                     href={loading ? "" : "/api/auth/logout"}
                     class="border-2 rounded-md px-2 hover:border-gray-300 {$page
                         .url.pathname == '/'
-                        ? 'text-gray-300 hover:border-white border-slate-400'
+                        ? 'text-gray-100 hover:border-white border-slate-400'
                         : 'text-slate-600 border-slate-400 hover:border-slate-800'}"
                     >Sign Out</a
                 >

ui/src/routes/Popular.svelte

@@ -9,7 +9,9 @@
 <div class="flex flex-col items-center w-full pt-10">
     <div class="gap-3 w-full max-w-6xl text-center flex flex-col px-4">
         <h1 class="text-xl text-left font-bold">{title}</h1>
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
+        <div
+            class="grid grid-cols-1 sm:grid-cols-3 grid-rows-3 sm:grid-rows-1 gap-3 w-full mt-3"
+        >
             {#if data}
                 {#each data as item}
                     <Card data={item} />

ui/src/routes/Posts.svelte

@@ -3,7 +3,9 @@
     export let posts;
 </script>
 
-<div class="flex flex-col items-center w-full py-[100px] bg-gradient-to-tl from-gray-100 to-white">
+<div
+    class="flex flex-col items-center w-full sm:py-[100px] py-[20px] bg-gradient-to-tl from-gray-100 to-white"
+>
     <div class="gap-3 w-full max-w-4xl text-center flex flex-col px-4">
         <h1 class="text-xl text-left font-bold">Recent posts</h1>
         <div class="flex flex-col sm:flex-row gap-3 w-full mt-3 p-4">

ui/src/routes/Recent.svelte

@@ -9,12 +9,22 @@
 <div class="flex flex-col items-center w-full">
     <div class="gap-3 w-full max-w-6xl text-center flex flex-col px-4">
         {#if title.includes("datasets")}
-            <h1 class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)]">DATASETS</h1>
+            <h1
+                class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)]"
+            >
+                DATASETS
+            </h1>
         {:else if title.includes("models")}
-            <h1 class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)]">MODELS</h1>
+            <h1
+                class="font-bold text-3xl w-full text-left pb-6 text-[rgb(74,191,167)]"
+            >
+                MODELS
+            </h1>
         {/if}
         <h1 class="text-xl text-left font-bold">{title}</h1>
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
+        <div
+            class="grid grid-cols-1 sm:grid-cols-3 grid-rows-3 sm:grid-rows-1 gap-3 w-full mt-3"
+        >
             {#if data}
                 {#each data as item}
                     <Card data={item} />