mirror of
https://github.com/MadeBaruna/paimon-moe.git
synced 2025-01-11 12:31:12 +01:00
Hide beginner wish if empty
This commit is contained in:
parent
5a241551ec
commit
04fc4da226
4 changed files with 67 additions and 29 deletions
|
@ -292,9 +292,14 @@
|
|||
rare = 0;
|
||||
saveData();
|
||||
}
|
||||
|
||||
$: hidden = id === 'beginners' && total === 0 && !manualInput;
|
||||
</script>
|
||||
|
||||
<div class="bg-item rounded-xl p-4 inline-flex flex-col w-full" style="height: min-content;">
|
||||
<div
|
||||
class="bg-item rounded-xl p-4 inline-flex flex-col w-full {id === 'beginners' ? 'mb-4' : ''} {hidden ? 'hidden' : ''}"
|
||||
style="height: min-content;"
|
||||
>
|
||||
<div class="flex mb-2">
|
||||
<h2 class="font-display font-bold text-2xl text-white flex-1">{name}</h2>
|
||||
{#if manualInput}
|
||||
|
|
|
@ -83,6 +83,6 @@
|
|||
$: data, createGraph();
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col bg-item rounded-xl p-4 w-full mt-4" style="height: 200px;">
|
||||
<div class="flex flex-col bg-item rounded-xl p-4 w-full" style="height: 200px;">
|
||||
<canvas width="500" height="200" bind:this={chart} />
|
||||
</div>
|
||||
|
|
|
@ -234,32 +234,51 @@
|
|||
</script>
|
||||
|
||||
{#if !loading}
|
||||
<div class="flex flex-col space-y-4">
|
||||
{#if avg[types[0].id]}
|
||||
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
|
||||
{/if}
|
||||
{#if avg[types[1].id]}
|
||||
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4">
|
||||
{#if avg[types[2].id]}
|
||||
<SummaryItem avg={avg[types[2].id]} type={types[2]} />
|
||||
{/if}
|
||||
{#if avg[types[3].id]}
|
||||
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
|
||||
{/if}
|
||||
<div class="bg-item rounded-xl p-4 flex items-center w-full text-white" style="height: min-content;">
|
||||
{$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
|
||||
{numberFormat.format(wishCount * 160)}
|
||||
<div class="col-span-1 md:col-span-2 w-full">
|
||||
<div class="container">
|
||||
{#if avg[types[0].id]}
|
||||
<SummaryItem avg={avg[types[0].id]} type={types[0]} order={1} />
|
||||
{/if}
|
||||
{#if avg[types[2].id]}
|
||||
<SummaryItem avg={avg[types[2].id]} type={types[2]} order={3} />
|
||||
{/if}
|
||||
{#if avg[types[1].id]}
|
||||
<SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} order={2} />
|
||||
{/if}
|
||||
<div class="order-4">
|
||||
{#if avg[types[3].id]}
|
||||
<SummaryItem avg={avg[types[3].id]} type={types[3]} />
|
||||
<div class="h-4 md:h-0" />
|
||||
{/if}
|
||||
<div class="flex flex-col">
|
||||
<div class="bg-item rounded-xl p-4 flex items-center w-full text-white mb-4" style="height: min-content;">
|
||||
{$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
|
||||
{numberFormat.format(wishCount * 160)}
|
||||
</div>
|
||||
<a
|
||||
href="/wish/tally"
|
||||
class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
|
||||
style="height: min-content;"
|
||||
>
|
||||
<Icon path={mdiEarth} className="mr-2" />
|
||||
{$t('wish.globalWishTally')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="/wish/tally"
|
||||
class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
|
||||
style="height: min-content;"
|
||||
>
|
||||
<Icon path={mdiEarth} className="mr-2" />
|
||||
{$t('wish.globalWishTally')}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
@apply flex flex-col gap-4;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.container {
|
||||
@apply block gap-0;
|
||||
column-count: 2;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
export let avg;
|
||||
export let type;
|
||||
export let order = 0;
|
||||
export let legendaryPity = 90;
|
||||
export let colorMultiplier = 120;
|
||||
|
||||
|
@ -22,7 +23,10 @@
|
|||
$: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
|
||||
</script>
|
||||
|
||||
<div class="bg-item rounded-xl p-4 flex flex-col w-full" style="height: min-content;">
|
||||
<div
|
||||
class="bg-item rounded-xl p-4 flex flex-col w-full half-width summary-item"
|
||||
style="height: min-content; order: {order};"
|
||||
>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{$t(`wish.types.${type.id}`)}</td>
|
||||
|
@ -124,4 +128,14 @@
|
|||
background: rgba(0, 0, 0, 0.35);
|
||||
@apply rounded-xl;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.summary-item {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
margin-bottom: 1rem;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue