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

Update mobile style

pull/1/head
I Made Setia Baruna 2021-01-08 16:30:14 +08:00
parent 14f6a4ae06
commit 0c7ce753c4
12 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Check.svelte
View File

@ -1,6 +1,7 @@
<script>
export let checked = false;
export let disabled = false;
export let className = '';
</script>
<style>
@ -27,7 +28,7 @@
}
</style>
<label class="checkbox-wrapper flex flex-1 pl-4 items-center bg-background rounded-2xl h-14 cursor-pointer">
<label class={`checkbox-wrapper flex flex-1 pl-4 items-center bg-background rounded-2xl h-14 cursor-pointer ${className}`}>
<span class="flex-1 text-white"><slot /></span>
<input {disabled} class="w-0 h-0 opacity-0" on:change bind:checked type="checkbox" />
<svg class="checkbox border-4 border-item w-10 h-10 rounded-xl mr-2" viewBox="0 0 100 100">

4
src/components/Header.svelte
View File

@ -13,7 +13,7 @@
.header::after {
content: '';
top: -40px;
left: 120px;
left: 100px;
height: 198px;
width: 168px;
position: absolute;
@ -24,7 +24,7 @@
</style>
<div class="flex items-center lg:hidden fixed w-full h-16 header bg-background z-30 shadow-md overflow-hidden">
<h1 class="flex-1 pl-8 font-display text-3xl font-black text-white relative z-10 pt-2">
<h1 class="flex-1 pl-4 md:pl-8 font-display text-3xl font-black text-white relative z-10 pt-2">
Paimon<span class="text-xl text-primary">.moe</span>
</h1>
<div class="p-8 cursor-pointer" on:click={showMenu}>

3
src/components/Input.svelte
View File

@ -1,6 +1,7 @@
<script>
import Icon from './Icon.svelte';
export let className = '';
export let icon = null;
export let placeholder = '';
export let type = 'text';
@ -19,7 +20,7 @@
</script>
<div
class="flex flex-1 relative items-center bg-background rounded-2xl h-14 focus-within:border-primary border-2 border-transparent ease-in duration-100">
class={`flex flex-1 relative items-center bg-background rounded-2xl h-14 focus-within:border-primary border-2 border-transparent ease-in duration-100 ${className}`}>
{#if icon}
<Icon path={icon} color="white" className="absolute ml-4 w-6 h-6" />
{/if}

2
src/routes/_layout.svelte
View File

@ -40,7 +40,7 @@
</main>
</DataSync>
</Modal>
<p class="lg:ml-64 px-8 py-4 text-gray-600">
<p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
Paimon.moe is not affiliated with miHoYo.<br />
Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
</p>

15
src/routes/calculator/_character.svelte
View File

@ -397,15 +397,16 @@
<div class="bg-item rounded-xl p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
<div>
<div class="grid gap-2">
<Check on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
<div>
<Check className="mb-2" on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
{#if withAscension}
<CharacterSelect on:change={onChange} bind:selected={selectedCharacter} placeholder="Select character" />
{/if}
<div class="grid gap-2">
<p class="text-white text-center mt-3">Current Character Level, Exp, & Ascension</p>
<div>
<p class="text-white text-center mt-3 mb-2">Current Character Level, Exp, & Ascension</p>
<Input
className="mb-2"
on:change={onChange}
type="number"
min={1}
@ -413,6 +414,7 @@
bind:value={currentLevel}
placeholder="Input current character level..." />
<Input
className="mb-2"
on:change={onChange}
type="number"
min={0}
@ -422,9 +424,10 @@
<AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
{/if}
</div>
<div class="grid gap-2">
<p class="text-white text-center mt-3">Intended Character Level & Ascension</p>
<div>
<p class="text-white text-center mt-3 mb-2">Intended Character Level & Ascension</p>
<Input
className="mb-2"
on:change={onChange}
type="number"
min={currentLevel}

15
src/routes/calculator/_weapon.svelte
View File

@ -326,8 +326,8 @@
<div class="bg-item rounded-xl p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
<div>
<div class="grid gap-2">
<Check on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
<div>
<Check className="mb-2" on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
{#if !withAscension}
<Select
on:change={onChange}
@ -339,9 +339,10 @@
<WeaponSelect on:change={onChange} bind:selected={selectedWeapon} placeholder="Select weapon" />
{/if}
<div class="grid gap-2">
<p class="text-white text-center mt-3">Current Weapon Level, Exp, & Ascension</p>
<div>
<p class="text-white text-center mt-3 mb-2">Current Weapon Level, Exp, & Ascension</p>
<Input
className="mb-2"
on:change={onChange}
type="number"
min={1}
@ -349,6 +350,7 @@
bind:value={currentLevel}
placeholder="Input current weapon level..." />
<Input
className="mb-2"
on:change={onChange}
type="number"
min={0}
@ -358,9 +360,10 @@
<AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
{/if}
</div>
<div class="grid gap-2">
<p class="text-white text-center mt-3">Intended Weapon Level & Ascension</p>
<div>
<p class="text-white text-center mt-3 mb-2">Intended Weapon Level & Ascension</p>
<Input
className="mb-2"
on:change={onChange}
type="number"
min={currentLevel}

2
src/routes/calculator/index.svelte
View File

@ -25,7 +25,7 @@
<svelte:head>
<title>Calculator - Paimon.moe</title>
</svelte:head>
<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
<div class="pt-20 lg:ml-64 lg:pt-8 p-4 md:p-8">
<div
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
bind:this={weaponCalc}>

6
src/routes/characters.svelte
View File

@ -98,13 +98,13 @@
<title>Characters - Paimon.moe</title>
</svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8">
<h1 class="font-display px-8 font-black text-5xl text-white">Characters</h1>
<p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
<h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Characters</h1>
<p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
※ Stat numbers are at level 80 Ascension 6. You can also click the header to sort!
</p>
<div class="block overflow-x-auto whitespace-no-wrap pb-8">
<div class="px-8 table">
<div class="px-4 md:px-8 table">
<table class="w-full block p-4 bg-item rounded-xl">
<thead>
<th style="min-width: 4rem;" />

8
src/routes/items.svelte
View File

@ -94,12 +94,12 @@
<title>Item List - Paimon.moe</title>
</svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8">
<h1 class="font-display px-8 font-black text-5xl text-white">Item List</h1>
<p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
<h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Item List</h1>
<p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
※ Click the item image to add it to the todo list
</p>
<div class="block overflow-x-auto whitespace-no-wrap pb-8">
<div class="px-8 table max-w-full">
<div class="px-4 md:px-8 table max-w-full">
<table class="w-full block p-4 bg-item rounded-xl">
<thead>
<th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
@ -180,7 +180,7 @@
</div>
</div>
<div class="block overflow-x-auto whitespace-no-wrap pb-8">
<div class="px-8 table max-w-full">
<div class="px-4 md:px-8 table max-w-full">
<table class="w-full block p-4 bg-item rounded-xl">
<thead>
<th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">

2
src/routes/settings.svelte
View File

@ -46,7 +46,7 @@
<title>Settings - Paimon.moe</title>
</svelte:head>
<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
<div class="bg-item rounded-xl mb-4 p-4">
<p class="text-white">Data Version: <b>1.2</b></p>
</div>

2
src/routes/todo.svelte
View File

@ -101,7 +101,7 @@
<svelte:head>
<title>Todo List - Paimon.moe</title>
</svelte:head>
<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
<Masonry stretchFirst={true} bind:refreshLayout>
<h1 class="font-display font-black text-3xl lg:text-left lg:text-5xl text-white">Todo List</h1>
<div class="bg-item rounded-xl p-4 text-white">

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

@ -5,7 +5,7 @@
<svelte:head>
<title>Wish Counter - Paimon.moe</title>
</svelte:head>
<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
<div class="pt-20 lg:ml-64 lg:pt-8 p-4 md:p-8">
<h1 class="font-display font-black text-5xl text-white mb-2">Wish Counter</h1>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 max-w-screen-xl">
<Counter id="character-event" name="Character Event" />