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

Adjust mobile layout on wish tally

pull/1/head
Made Baruna 2021-03-31 05:02:42 +08:00
parent fc14e98e28
commit 42419dabdc
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/routes/wish/tally/_item.svelte
View File

@ -20,6 +20,11 @@
minimumFractionDigits: 0, minimumFractionDigits: 0,
}); });
const numberFormatSecondary = Intl.NumberFormat('en', {
maximumFractionDigits: 1,
minimumFractionDigits: 0,
});
// prettier-ignore // prettier-ignore
const legendaryMapping = { const legendaryMapping = {
character: [ character: [
@ -319,26 +324,26 @@
{numberFormat.format(legendary.percentage)}% {numberFormat.format(legendary.percentage)}%
</p> </p>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<p class="font-semibold"> <p class="font-semibold whitespace-no-wrap">
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
</p> </p>
<p>Total {numberFormat.format(legendary.total)}</p> <p>Total {numberFormat.format(legendary.total)}</p>
</div> </div>
</div> </div>
<div class="flex items-center justify-center bg-background rounded-xl px-4 py-2 relative flex-1 text-rare-from"> <div class="flex items-center justify-center bg-background rounded-xl px-4 py-2 relative flex-1 text-rare-from">
<p class="font-black mr-2 text-5xl leading-10" style="margin-top: 4px;"> <p class="font-black mr-2 text-5xl leading-10" style="margin-top: 4px;">
{numberFormat.format(rare.percentage)}% {numberFormatSecondary.format(rare.percentage)}%
</p> </p>
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<p class="font-semibold"> <p class="font-semibold whitespace-no-wrap">
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
<Icon path={mdiStar} /> <Icon path={mdiStar} size={0.8} />
</p> </p>
<p>Total {numberFormat.format(rare.total)}</p> <p>Total {numberFormat.format(rare.total)}</p>
</div> </div>