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

Fix layout on safari

pull/1/head
Made Baruna 2021-04-24 04:05:54 +08:00
parent 16b1a45517
commit 7d27f74da5
No known key found for this signature in database
GPG Key ID: 5AA5DA16AA5DCEAD
13 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/DonateModal.svelte
View File

@ -22,8 +22,8 @@
>Github</a
>
</p>
<div class="flex flex-col mt-2 gap-1">
<div class="flex flex-col md:flex-row gap-1">
<div class="flex flex-col mt-2 space-y-1">
<div class="flex flex-col md:flex-row md:space-x-1 md:space-y-0 space-y-1">
<a class="flex-1" href="https://ko-fi.com/baruna" target="_blank">
<Button className="w-full flex-1 flex flex-col items-center">
<div class="flex h-8 mb-1 items-center">

2
src/components/TodoAddModal.svelte
View File

@ -76,7 +76,7 @@
</div>
<span>{amount}</span>
</div>
<div class="flex justify-end gap-2">
<div class="flex justify-end space-x-2">
<Button on:click={cancel}>{$t('items.add.cancel')}</Button>
<Button on:click={() => addTodo(selectedItem, amount)} color="green">{$t('items.add.add')}</Button>
</div>

2
src/components/TodoDeleteModal.svelte
View File

@ -31,7 +31,7 @@
</div>
{/if}
</div>
<div class="flex justify-end gap-2">
<div class="flex justify-end space-x-2">
<Button on:click={cancel}>{$t('todo.delete.cancel')}</Button>
<Button on:click={deleteTodo} color="red">{$t('todo.delete.delete')}</Button>
</div>

10
src/routes/achievement/index.svelte
View File

@ -155,9 +155,9 @@
</svelte:head>
<div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
<div class="flex flex-col md:flex-row items-center gap-2 mb-2 md:mb-0">
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
<div class="flex gap-2">
<div class="flex space-x-2">
<p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
{finishedAchievement}
{$t('achievement.of')}
@ -169,8 +169,8 @@
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-3">
<div class="flex flex-col gap-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
<div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
<div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
{#each categories as category, index}
<div
class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
@ -191,7 +191,7 @@
</div>
{/each}
</div>
<div class="flex flex-col gap-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
<div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
{#each list as el, index}
{#if Array.isArray(el)}
<div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">

6
src/routes/characters/[id].svelte
View File

@ -164,14 +164,14 @@
src="/images/elements/{character.element.id}.png"
alt={character.element.name}
/>
<div class="flex gap-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}
</p>
{/if}
{#if editConstallation}
<div class="flex flex-wrap gap-1">
<div class="flex flex-wrap space-x-1">
<Button size="sm" on:click={() => editConstellationCount(1)}>
<Icon path={mdiPlus} />
</Button>
@ -210,7 +210,7 @@
<p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
</div>
<p class="text-gray-200 px-4 md:px-8">{data.description}</p>
<div class="flex flex-col md:flex-row mt-4 gap-4 px-4 md:px-8">
<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>
<div class="flex items-center mt-2">

2
src/routes/index.svelte
View File

@ -55,7 +55,7 @@
<Event on:done={onDone} />
<Item on:done={onDone} />
<Discord on:done={onDone} />
<div class="flex flex-col gap-4">
<div class="flex flex-col space-y-4">
<Calculator on:done={onDone} />
<Achievement on:done={onDone} />
</div>

2
src/routes/settings/_deleteAccount.svelte
View File

@ -12,7 +12,7 @@
<p class="text-white font-bold mb-4 text-lg">{$t('settings.modal.delete')} {account.label}?</p>
<p class="text-white mb-4">{$t('settings.modal.notice')}</p>
<p class="text-white mb-4 italic">{$t('settings.modal.backup')}</p>
<div class="flex justify-end gap-2">
<div class="flex justify-end space-x-2">
<Button on:click={cancel}>{$t('settings.modal.cancel')}</Button>
<Button on:click={deleteAccount} color="red">{$t('settings.modal.delete')}</Button>
</div>

2
src/routes/settings/_resetAccount.svelte
View File

@ -12,7 +12,7 @@
<p class="text-white font-bold mb-4 text-lg">{$t('settings.modal.reset')} {account.label}?</p>
<p class="text-white mb-4">{$t('settings.modal.notice')}</p>
<p class="text-white mb-4 italic">{$t('settings.modal.backup')}</p>
<div class="flex justify-end gap-2">
<div class="flex justify-end space-x-2">
<Button on:click={cancel}>{$t('settings.modal.cancel')}</Button>
<Button on:click={resetAccount} color="red">{$t('settings.modal.reset')}</Button>
</div>

4
src/routes/wish/_counter.svelte
View File

@ -326,7 +326,7 @@
{#if isEdit}
<Button on:click={saveEdit} className="mt-4">Save</Button>
{:else if manualInput}
<div class="flex gap-2 mt-2">
<div class="grid grid-cols-2 gap-2 mt-2">
<Button on:click={getLegendary} className="flex-1">
Get 5
<Icon path={mdiStar} size={0.75} className="mb-1" />
@ -336,7 +336,7 @@
<Icon path={mdiStar} size={0.75} className="mb-1" />
</Button>
</div>
<div class="flex gap-2 mt-2">
<div class="grid grid-cols-3 gap-2 mt-2">
<Button on:click={() => add(1)} className="flex-1">+1</Button>
<Button on:click={() => add(10)} className="flex-1">+10</Button>
<Button on:click={() => add(-1)} className="flex-1">-1</Button>

2
src/routes/wish/_firstTime.svelte
View File

@ -18,7 +18,7 @@
}
</script>
<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start">
<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start max-w-screen-xl">
<div class="flex-1">
<p>
{$t('wish.welcome')}

12
src/routes/wish/_summary.svelte
View File

@ -177,28 +177,28 @@
</script>
{#if !loading}
<div class="flex flex-col">
<div class="flex flex-col space-y-4">
{#if avg[types[0].id]}
<SummaryItem avg={avg[types[0].id]} type={types[0]} withBottomSpace />
<SummaryItem avg={avg[types[0].id]} type={types[0]} />
{/if}
{#if avg[types[1].id]}
<SummaryItem avg={avg[types[1].id]} type={types[1]} />
{/if}
</div>
<div class="flex flex-col">
<div class="flex flex-col space-y-4">
{#if avg[types[2].id]}
<SummaryItem avg={avg[types[2].id]} type={types[2]} withBottomSpace />
<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 mt-4" style="height: min-content;">
<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(totalWish * 160)}
</div>
<a
href="/wish/tally"
class="bg-item rounded-xl p-4 flex items-center w-full text-white mt-4 hover:text-primary"
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" />

3
src/routes/wish/_summaryItem.svelte
View File

@ -3,7 +3,6 @@
import Icon from '../../components/Icon.svelte';
export let withBottomSpace;
export let avg;
export let type;
@ -19,7 +18,7 @@
</script>
<div
class={`bg-item rounded-xl p-4 flex flex-col w-full ${withBottomSpace ? 'mb-4' : ''}`}
class="bg-item rounded-xl p-4 flex flex-col w-full"
style="height: min-content;"
>
<table>

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

@ -245,7 +245,7 @@
});
</script>
<div class="flex flex-col bg-item rounded-xl p-4 mb-4 gap-4">
<div class="flex flex-col bg-item rounded-xl px-4 pt-4 pb-2 mb-4 space-y-4">
<div class="flex flex-col xl:flex-row">
<img src="/images/banners/{banner.name} {banner.image}.png" alt={banner.name} class="rounded-xl xl:h-64 xl:mr-4" />
<div class="h-4 xl:h-0" />
@ -460,7 +460,7 @@
</table>
</div>
<div class="border border-background rounded-xl hidden xl:block">
<table class="text-white w-full table-fixed">
<table class="text-white w-full table-fixed text-sm">
<tr>
<td
class="font-display text-gray-200 font-semibold px-2 py-1 whitespace-no-wrap text-right border-b border-background"
@ -508,9 +508,9 @@
</tr>
</table>
</div>
<div class="flex flex-wrap gap-4">
<div class="border border-background rounded-xl hidden xl:block overflow-hidden" style="width: fit-content;">
<table class="text-white">
<div class="flex flex-wrap">
<div class="border border-background rounded-xl hidden xl:block overflow-hidden mr-4 mb-2" style="width: fit-content;">
<table class="text-white text-sm">
<tr>
<td
class="font-display text-gray-200 font-semibold px-2 py-1 whitespace-no-wrap text-right border-b border-background"
@ -550,8 +550,8 @@
</tr>
</table>
</div>
<div class="flex flex-wrap gap-2 text-white">
<div class="gap-2 flex flex-col flex-wrap">
<div class="flex flex-wrap text-white -mt-2 mb-2">
<div class="space-y-2 flex flex-col flex-wrap mr-2 mt-2">
<div class="bg-background rounded-xl px-4 py-2 flex-1 flex items-center whitespace-no-wrap">
{$t('wish.tally.wishTotal')} <span class="font-semibold ml-2">{numberFormat.format(data.total.all)}</span>
</div>
@ -560,7 +560,7 @@
<span class="font-semibold">{numberFormat.format(data.total.all * 160)}</span>
</div>
</div>
<div class="gap-2 flex flex-col flex-wrap">
<div class="space-y-2 flex flex-col flex-wrap mt-2">
<div class="bg-background rounded-xl px-4 py-2 flex-1 flex items-center whitespace-no-wrap">
{$t('wish.tally.median')}
<span class="font-semibold ml-2">{numberFormat.format(data.median.legendary)}</span>