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>
<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">
<button
class="ring-primary hover:ring-2 bg-background rounded-xl px-3 text-white"
@ -465,12 +466,13 @@
</div>
{/each}
</div>
</div>
<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">
※ {$t('calendar.lastAppearanceDesc')}
</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">
<table class="text-white">
<tr>
@ -484,11 +486,13 @@
{#each sortedLegendary as [char, val]}
<tr on:click={() => goToBannerTime(lastBannerStart[char])}>
<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 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 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)}
</td>
</tr>
@ -508,11 +512,13 @@
{#each sortedRare as [char, val]}
<tr on:click={() => goToBannerTime(lastBannerStart[char])}>
<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 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 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)}
</td>
</tr>