Adjust character page style

src/locales/en.json

@@ -106,7 +106,10 @@
     "anemoDamageBonus": "Anemo DMG Bonus",
     "physicalDamageBonus": "Physical DMG Bonus",
     "geoDamageBonus": "Geo DMG Bonus",
-    "sortBy": "Sort by..."
+    "sortBy": "Sort by...",
+    "talentBook": "Talent Book",
+    "ascensionMaterial": "Ascension Materials",
+    "talentStats": "Talent Stats"
   },
   "wish": {
     "title": "Wish Counter",

src/routes/characters/[id].svelte

@@ -149,7 +149,7 @@
     content="Genshin Impact {character.name} build guide, constellation, and skill information"
   />
 </svelte:head>
-<div class="lg:ml-64 pt-20 lg:pt-8">
+<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
   <div class="flex flex-col xl:flex-row items-start">
     <img
       class="character-image object-cover md:pl-8 self-center xl:self-auto"
@@ -164,7 +164,11 @@
           src="/images/elements/{character.element.id}.png"
           alt={character.element.name}
         />
-        <div class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstallation ? 'flex-col' : ''} md:flex-row items-center">
+        <div
+          class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstallation
+            ? 'flex-col'
+            : ''} md:flex-row items-center"
+        >
           {#if constellationCountTotal > -1}
             <p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
               C{constellationCountTotal}
@@ -212,7 +216,7 @@
       <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
       <div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
         <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
-          <p>Talent Book</p>
+          <p>{$t('characters.talentBook')}</p>
           <div class="flex items-center mt-2">
             <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
               <img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
@@ -221,7 +225,7 @@
           </div>
         </div>
         <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
-          <p>Ascension Materials</p>
+          <p>{$t('characters.ascensionMaterial')}</p>
           <div class="flex items-center mt-2">
             {#each materials as material}
               {#if material.item.id !== 'none'}
@@ -326,9 +330,9 @@
     {/each}
   </div>
   <div class="flex flex-col text-white px-4 md:px-8" id="constellations" bind:this={constellationDiv}>
-    <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4"
-      >{$t('characters.constellations')}</a
-    >
+    <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
+      {$t('characters.constellations')}
+    </a>
     {#each data.constellations as constellation, i}
       <PassiveSkillCard
         {id}

src/routes/characters/_skillCard.svelte

@@ -1,11 +1,16 @@
 <script>
+  import { slide } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import Icon from '../../components/Icon.svelte';
+  import { mdiChevronDown } from '@mdi/js';
 
   export let id;
   export let image;
   export let data;
   export let withQuote;
 
+  let showStat = false;
+
   let iter = [...new Array(13)];
 
   const lastIndex = withQuote ? data.description.indexOf('<i>') : data.description.length;
@@ -66,30 +71,40 @@
   {#if withQuote}
     <p class="text-sm text-gray-400 italic mt-2 px-4">{@html quote}</p>
   {/if}
-  <div class="mt-4 block overflow-x-auto">
-    <div class="px-4" style="width: fit-content;">
-      <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
-        <table class="text-gray-200 text-sm">
-          <tr>
-            <td class="border-gray-700 px-2">{$t('characters.lvl')}</td>
-            {#each iter as _, i}
-              <td class="text-center border-gray-700 px-2">{i + 1}</td>
-            {/each}
-          </tr>
-          {#each data.skillLabels as label, i}
+  <button
+    class="inline-flex px-4 mt-4 cursor-pointer focus:outline-none"
+    on:click={() => {
+      showStat = !showStat;
+    }}
+  >
+    Talent Stat <Icon path={mdiChevronDown} className="transform duration-100 {showStat ? 'rotate-180' : ''}" />
+  </button>
+  {#if showStat}
+    <div transition:slide class="mt-4 block overflow-x-auto">
+      <div class="px-4" style="width: fit-content;">
+        <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
+          <table class="text-gray-200 text-sm">
             <tr>
-              <td class="border-t border-gray-700 px-2" style="min-width: 150px;">{label}</td>
-              {#each data.skillStats[i].slice(0, 13) as stat}
-                <td class="text-center border-t border-gray-700 px-2">
-                  {@html format(data.skillStatsLabels[i], stat)}
-                </td>
+              <td class="border-gray-700 px-2">{$t('characters.lvl')}</td>
+              {#each iter as _, i}
+                <td class="text-center border-gray-700 px-2">{i + 1}</td>
               {/each}
             </tr>
-          {/each}
-        </table>
+            {#each data.skillLabels as label, i}
+              <tr>
+                <td class="border-t border-gray-700 px-2" style="min-width: 150px;">{label}</td>
+                {#each data.skillStats[i].slice(0, 13) as stat}
+                  <td class="text-center border-t border-gray-700 px-2">
+                    {@html format(data.skillStatsLabels[i], stat)}
+                  </td>
+                {/each}
+              </tr>
+            {/each}
+          </table>
+        </div>
       </div>
     </div>
-  </div>
+  {/if}
 </div>
 
 <style>

src/routes/characters/index.svelte

@@ -384,8 +384,12 @@
             {/if}
             <img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
           </div>
-          <div class="w-full bg-item rounded-b-xl overflow-hidden">
-            <p class="text-white text-sm p-1 text-center whitespace-no-wrap">{char.name}</p>
+          <div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
+            <div class="w-full  overflow-hidden absolute bottom-0">
+              <p class="text-white p-1 text-center text-sm">
+                {char.name}
+              </p>
+            </div>
           </div>
         </a>
       {/each}