Skip to content

Commit

Permalink
Merge pull request #31 from ya-erm/26-confirmation-modals-ui-bug
Browse files Browse the repository at this point in the history 
Fix modals width
  • Loading branch information
@ya-erm
ya-erm authored Mar 12, 2023
2 parents 98c79e2 + 8af3027 commit 629a932
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 38 deletions.
6 changes: 3 additions & 3 deletions src/lib/ui/FormContainer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { applyAction, enhance } from '$app/forms';
import type { ActionResult } from '@sveltejs/kit';
export let width: number = 18;
export let width: string | number | null = 15;
export let action: string | undefined = undefined;
export let testId: string = 'Form';
export let onSubmit: (e: SubmitEvent) => void | Promise<void> = () => {};
Expand All @@ -14,7 +14,7 @@
{action}
method="POST"
class="form-container"
style:width={`${width}rem`}
style:width={typeof width === 'number' ? `${width}rem` : width}
data-testId={testId}
on:submit={onSubmit}
use:enhance={() =>
Expand Down Expand Up @@ -42,7 +42,7 @@
gap: 0.5rem;
}
.form-container {
max-width: calc(100vw - 4rem);
max-width: min(100%, calc(100vw - 4rem));
margin: 0 auto;
display: flex;
flex-direction: column;
Expand Down
3 changes: 2 additions & 1 deletion src/lib/ui/Input.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
export let label: string | null = null;
export let type: 'text' | 'password' | 'date' | 'time' | 'number' = 'text';
export let placeholder: string | null = null;
export let step: string | number | null = 0.01;
export let required: boolean = false;
export let optional: boolean = false;
export let autocomplete: boolean = false;
Expand Down Expand Up @@ -44,7 +45,7 @@
bind:this={ref}
on:input={handleChange}
autocomplete={autocomplete ? 'on' : undefined}
step={type === 'number' ? '0.01' : undefined}
step={type === 'number' ? step : undefined}
data-testId={testId}
class:error={!!error}
class:clearable
Expand Down
4 changes: 2 additions & 2 deletions src/routes/accounts/[id]/DeleteAccountModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
};
</script>

<Modal header={$translate('accounts.delete_account_confirm')} bind:opened>
<FormContainer width={20} action="?/delete" onResult={onDelete}>
<Modal width={22} header={$translate('accounts.delete_account_confirm')} bind:opened>
<FormContainer width="100%" action="?/delete" onResult={onDelete}>
<span>{$translate('accounts.delete_account_confirm_description')}</span>
<div class="actions gap-1">
<Button text={$translate('accounts.delete_account')} color="danger" type="submit" />
Expand Down
2 changes: 1 addition & 1 deletion src/routes/categories/[id]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
};
</script>

<FormContainer action={'?/update'} onResult={onUpdate}>
<FormContainer action="?/update" onResult={onUpdate}>
<Input label={$translate('categories.name')} name="name" value={category?.name} required />
<Input label={$translate('categories.icon')} name="icon" value={category?.icon} optional />
<Button text={$translate('common.save')} type="submit" />
Expand Down
52 changes: 25 additions & 27 deletions src/routes/settings/currency-rates/CurrencyRateModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,34 +44,32 @@
bind:opened
width={20}
>
<div class="flex-col gap-1">
<FormContainer action={!item ? '?/create' : '?/update'} onResult={onSave}>
<input name="id" value={item?.id} readonly class="hidden" />
<Input name="cur1" label={$translate('currency_rates.currency1')} bind:value={cur1} />
<Input name="cur2" label={$translate('currency_rates.currency2')} bind:value={cur2} />
<Input name="rate" label={$translate('currency_rates.rate')} type="number" bind:value={rate} />
<FormContainer width="100%" action={!item ? '?/create' : '?/update'} onResult={onSave}>
<input name="id" value={item?.id} readonly class="hidden" />
<Input name="cur1" label={$translate('currency_rates.currency1')} bind:value={cur1} />
<Input name="cur2" label={$translate('currency_rates.currency2')} bind:value={cur2} />
<Input name="rate" label={$translate('currency_rates.rate')} type="number" step="any" bind:value={rate} />

{#if cur1 && cur2}
<div>1 {cur1} = {rate} {cur2}</div>
<div>1 {cur2} = {(1 / Number(rate)).toFixed(4)} {cur1}</div>
{/if}
{#if cur1 && cur2}
<div>1 {cur1} = {rate} {cur2}</div>
<div>1 {cur2} = {(1 / Number(rate)).toFixed(4)} {cur1}</div>
{/if}

{#if !!item}
<FormContainer action="?/delete" onResult={onDelete}>
<input name="id" value={item?.id} readonly class="hidden" />
<Button
text={$translate('currency_rates.delete_currency_rate')}
appearance="transparent"
color="danger"
type="submit"
/>
</FormContainer>
{/if}
{#if !!item}
<FormContainer action="?/delete" onResult={onDelete}>
<input name="id" value={item?.id} readonly class="hidden" />
<Button
text={$translate('currency_rates.delete_currency_rate')}
appearance="transparent"
color="danger"
type="submit"
/>
</FormContainer>
{/if}

<div class="grid-col-2 gap-1">
<Button text={$translate('common.cancel')} color="secondary" on:click={() => (opened = false)} />
<Button text={$translate('common.save')} color="primary" type="submit" />
</div>
</FormContainer>
</div>
<div class="grid-col-2 gap-1">
<Button text={$translate('common.cancel')} color="secondary" on:click={() => (opened = false)} />
<Button text={$translate('common.save')} color="primary" type="submit" />
</div>
</FormContainer>
</Modal>
4 changes: 2 additions & 2 deletions src/routes/settings/groups/[id]/DeleteGroupModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
};
</script>

<Modal header={$translate('groups.delete_group_confirm')} bind:opened>
<FormContainer width={20} action="?/deleteGroup" onResult={handleResult}>
<Modal width={22} header={$translate('groups.delete_group_confirm')} bind:opened>
<FormContainer width="100%" action="?/deleteGroup" onResult={handleResult}>
<span>{$translate('groups.delete_group_confirm_description')}</span>
<input value={groupId} name="groupId" class="hidden" type="number" required readonly />
<div class="actions gap-1">
Expand Down
4 changes: 2 additions & 2 deletions src/routes/settings/groups/[id]/DeleteUserFromGroupModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
};
</script>

<Modal header={$translate('groups.delete_user_confirm')} bind:opened>
<FormContainer width={20} action="?/deleteUser" onResult={handleResult}>
<Modal width={22} header={$translate('groups.delete_user_confirm')} bind:opened>
<FormContainer width="100%" action="?/deleteUser" onResult={handleResult}>
<span>{$translate('groups.delete_user_confirm_description')}</span>
<input value={userId} name="userId" class="hidden" type="number" required readonly />
<div class="actions gap-1">
Expand Down

1 comment on commit 629a932

@vercel
Copy link

@vercel vercel bot commented on 629a932 Mar 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

money-keeper – ./

my-money-keeper.vercel.app
money-keeper-git-master-ya-erm.vercel.app
money-keeper-ya-erm.vercel.app
money.ya-erm.ru

Please sign in to comment.