From 5b60b018c585a11f23022744eaef205bfe54fb39 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Tue, 20 Sep 2022 13:59:26 +0700
Subject: [PATCH] Adjust banner number on frontpage

---
 src/routes/_index/banner.svelte | 20 +++++++++++++-------
 src/routes/index.svelte         |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/routes/_index/banner.svelte b/src/routes/_index/banner.svelte
index 1af42c5f..c21c35fa 100644
--- a/src/routes/_index/banner.svelte
+++ b/src/routes/_index/banner.svelte
@@ -76,21 +76,27 @@
 <div class="bg-item rounded-xl p-4 flex flex-col">
   <div class="relative">
     <img src="/images/home/{image}" alt="banner" style="min-height: 150px;" {width} {height} />
-    <div class="flex flex-wrap text-white justify-end items-center absolute bottom-0 w-full">
+    <div class="flex flex-wrap text-white justify-between items-center absolute bottom-0 w-full">
       {#each Object.entries(featured) as [_, item], i}
         <div
-          class="flex flex-col pt-2"
-          style="background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 17%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%); 
-          {i === 0 ? 'margin-right: 10%;' : ''}"
+          class="flex flex-col pt-2 max-w-[60%]"
+          style="background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 17%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%);"
         >
-          <h3 class="text-3xl mr-4 font-black leading-6 text-right">
+          <h3 class="text-3xl font-black leading-6 text-right {i === 0 ? 'ml-4' : ''}">
             {#if loading}
               <Icon path={mdiLoading} spin size={0.8} />
             {:else}
-              {item.count}
+              {(item.count / 1000).toFixed(1)}K
             {/if}
           </h3>
-          <p class="mr-4 font-sm leading-2 text-right">{$t(item.name)}</p>
+          <p
+            class="font-sm leading-2 whitespace-nowrap overflow-hidden text-ellipsis {i === 0
+              ? 'ml-4 text-left'
+              : 'text-right'}"
+            style="direction: rtl;"
+          >
+            {$t(item.name)}
+          </p>
         </div>
       {/each}
     </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 0b0412d3..1b2a960b 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script context="module">
   export async function load({ fetch }) {
-    const promoted = ['xingqiu', 'sucrose'];
+    const promoted = ['ganyu', 'sangonomiya_kokomi'];
     const builds = {};
     for (const p of promoted) {
       const response = await fetch(`/characters/build/${p}.json`);