ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve calendar view on mobile

pull/1/head
Made Baruna 2022-09-06 03:04:33 +07:00
parent 2ed521a03c
commit b29cfd3a8e
1 changed files with 124 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/calendar/index.svelte
View File

@ -349,7 +349,8 @@
/> />
</svelte:head> </svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl"> <div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
<div class="px-4 2xl:px-8 mb-4 flex flex-col"> <div class="w-full overflow-x-auto pt-1">
<div class="px-4 2xl:px-8 mb-4 flex flex-col min-w-[768px]">
<div class="mb-1 flex gap-1"> <div class="mb-1 flex gap-1">
<button <button
class="ring-primary hover:ring-2 bg-background rounded-xl px-3 text-white" class="ring-primary hover:ring-2 bg-background rounded-xl px-3 text-white"
@ -465,12 +466,13 @@
</div> </div>
{/each} {/each}
</div> </div>
</div>
<h1 class="font-display px-4 md:px-8 font-black text-3xl text-white mt-8">{$t('calendar.lastAppearance')}</h1> <h1 class="font-display px-4 md:px-8 font-black text-3xl text-white mt-8">{$t('calendar.lastAppearance')}</h1>
<p class="text-gray-400 px-4 md:px-8 font-medium pb-4 -mt-2"> <p class="text-gray-400 px-4 md:px-8 font-medium pb-4 -mt-2">
※ {$t('calendar.lastAppearanceDesc')} ※ {$t('calendar.lastAppearanceDesc')}
</p> </p>
<div class="flex gap-4 px-8"> <div class="flex gap-4 md:px-8 px-4 md:flex-row flex-col">
<div class="p-4 bg-background rounded-xl"> <div class="p-4 bg-background rounded-xl">
<table class="text-white"> <table class="text-white">
<tr> <tr>
@ -484,11 +486,13 @@
{#each sortedLegendary as [char, val]} {#each sortedLegendary as [char, val]}
<tr on:click={() => goToBannerTime(lastBannerStart[char])}> <tr on:click={() => goToBannerTime(lastBannerStart[char])}>
<td class="cursor-pointer text-white py-1 border-t border-gray-700"> <td class="cursor-pointer text-white py-1 border-t border-gray-700">
<img class="w-8 h-8" src="/images/characters/{char}.png" alt={char} /> <img class="w-8 h-8 min-w-[2rem]" src="/images/characters/{char}.png" alt={char} />
</td> </td>
<td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700">{characters[char].name}</td> <td class="cursor-pointer text-xs md:text-base text-white px-4 py-1 border-t border-gray-700"
>{characters[char].name}</td
>
<td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700 text-center">{val}</td> <td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700 text-center">{val}</td>
<td class="cursor-pointer text-white py-1 border-t border-gray-700"> <td class="cursor-pointer text-xs md:text-base text-white py-1 border-t border-gray-700">
{lastBannerDate[char].humanize(true)} {lastBannerDate[char].humanize(true)}
</td> </td>
</tr> </tr>
@ -508,11 +512,13 @@
{#each sortedRare as [char, val]} {#each sortedRare as [char, val]}
<tr on:click={() => goToBannerTime(lastBannerStart[char])}> <tr on:click={() => goToBannerTime(lastBannerStart[char])}>
<td class="cursor-pointer text-white py-1 border-t border-gray-700"> <td class="cursor-pointer text-white py-1 border-t border-gray-700">
<img class="w-8 h-8" src="/images/characters/{char}.png" alt={char} /> <img class="w-8 h-8 min-w-[2rem]" src="/images/characters/{char}.png" alt={char} />
</td> </td>
<td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700">{characters[char].name}</td> <td class="cursor-pointer text-xs md:text-base text-white px-4 py-1 border-t border-gray-700"
>{characters[char].name}</td
>
<td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700 text-center">{val}</td> <td class="cursor-pointer text-white px-4 py-1 border-t border-gray-700 text-center">{val}</td>
<td class="cursor-pointer text-white py-1 border-t border-gray-700"> <td class="cursor-pointer text-xs md:text-base text-white py-1 border-t border-gray-700">
{lastBannerDate[char].humanize(true)} {lastBannerDate[char].humanize(true)}
</td> </td>
</tr> </tr>