OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2024-12-22 22:46:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

Increase parity between character and weapon edit modals

Browse source
This commit is contained in:
ehnba 2024-05-15 18:02:36 +03:00
parent 882177fb82
commit e9c83cff55
2 changed files with 112 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/TodoEditCharacterModal.svelte
View file

@ -1,7 +1,6 @@
<script>
import { t } from 'svelte-i18n';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js';
@ -14,7 +13,6 @@
import { characterExp } from '../data/characterExp';
import { characters, isTravelerId, minCharacterLevel, maxCharacterLevel } from '../data/characters';
import { talent } from '../data/talent';
import { updateTodo } from '../stores/todo';
import { itemList } from '../data/itemList';
import * as calculator from '../functions/resourceCalculator';

19
src/components/TodoEditWeaponModal.svelte
View file

@ -4,10 +4,8 @@
import { fade } from 'svelte/transition';
import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
import Select from './Select.svelte';
import Input from './Input.svelte';
import AscensionSelector from './AscensionSelector.svelte';
import WeaponSelect from './WeaponSelect.svelte';
import Checkbox from './Checkbox.svelte';
import Check from './Check.svelte';
import Button from './Button.svelte';
@ -200,8 +198,7 @@
}
</script>
<div class="modal 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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 bg-item rounded-xl px-4 py-8">
<div>
<!-- Todo item banner -->
<div class="flex items-center mb-4 p-3 rounded-md text-white bg-item">
@ -294,8 +291,10 @@
{/each}
</div>
{/if}
{/if}
<div transition:fade={{ duration: 100 }} class="wrap-table bg-background rounded-xl p-4 mt-2 block md:inline-block">
<table>
{#if calculated}
<tr>
<td class="text-right border-b border-gray-700 py-1">
<span class="text-white mr-2 whitespace-nowrap">
@ -358,12 +357,9 @@
<td class="text-red-400 py-1">{expWasted} {$t('calculator.weapon.expWasted')}</td>
</tr>
{/if}
{/if}
</table>
</div>
{:else}
<!-- Placeholder for calculation results. Also fills space so confirm and cancel buttons will always be at the bottom. -->
<div class="bg-background-secondary grow mt-2 rounded-xl"></div>
{/if}
<div class="flex gap-2">
<Button className="mt-2 w-min grow" on:click={cancel}>
{$t('todo.edit.cancel')}
@ -381,16 +377,9 @@
</Button>
</div>
</div>
</div>
</div>
<style lang="postcss">
.modal {
@apply bg-item;
@apply px-4;
@apply py-8;
}
.wrap-table {
overflow: hidden scroll;
flex-basis: 20vh;