tweak import page input layout

This commit is contained in:
Justin Edmund 2025-12-16 21:18:35 -08:00
parent 83bcecebb5
commit 0f68e0d2e8
3 changed files with 60 additions and 43 deletions

View file

@ -381,7 +381,19 @@
<!-- Input phase -->
{#if entities.size === 0}
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
<p class="hint">Enter up to 10 wiki page names to import data</p>
<div class="input-header">
<p class="hint">Enter up to 10 wiki page names to import data</p>
<Button
variant="ghost"
class="add-input-button"
leftIcon="plus"
size="small"
type="button"
onclick={addInput}
>
Add another
</Button>
</div>
<div class="wiki-inputs">
{#each wikiPagesInputs as _, index}
<div class="input-row">
@ -403,16 +415,6 @@
{/if}
</div>
{/each}
<Button
variant="ghost"
class="add-input-button"
leftIcon="plus"
size="small"
type="button"
onclick={addInput}
>
Add another
</Button>
</div>
{#if fetchError}
<p class="error">{fetchError}</p>
@ -659,6 +661,13 @@
padding: spacing.$unit-2x;
}
.input-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: spacing.$unit-2x;
}
.wiki-inputs {
display: flex;
flex-direction: column;
@ -671,10 +680,6 @@
align-items: center;
}
:global(.wiki-inputs .add-input-button) {
width: fit-content;
}
.remove-button {
display: flex;
align-items: center;

View file

@ -365,7 +365,19 @@
<!-- Input phase -->
{#if entities.size === 0}
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
<p class="hint">Enter up to 10 wiki page names to import data</p>
<div class="input-header">
<p class="hint">Enter up to 10 wiki page names to import data</p>
<Button
variant="ghost"
type="button"
onclick={addInput}
class="add-input-button"
leftIcon="plus"
size="small"
>
Add another
</Button>
</div>
<div class="wiki-inputs">
{#each wikiPagesInputs as _, index}
<div class="input-row">
@ -382,14 +394,6 @@
{/if}
</div>
{/each}
<Button
variant="ghost"
type="button"
onclick={addInput}
class="add-input-button"
leftIcon="plus"
size="small">Add another</Button
>
</div>
{#if fetchError}
<p class="error">{fetchError}</p>
@ -633,6 +637,13 @@
padding: spacing.$unit-2x;
}
.input-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: spacing.$unit-2x;
}
.wiki-inputs {
display: flex;
flex-direction: column;
@ -645,10 +656,6 @@
align-items: center;
}
:global(.wiki-inputs .add-input-button) {
width: fit-content;
}
.remove-button {
display: flex;
align-items: center;

View file

@ -370,7 +370,19 @@
<!-- Input phase -->
{#if entities.size === 0}
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
<p class="hint">Enter up to 10 wiki page names to import data</p>
<div class="input-header">
<p class="hint">Enter up to 10 wiki page names to import data</p>
<Button
variant="ghost"
class="add-input-button"
leftIcon="plus"
size="small"
type="button"
onclick={addInput}
>
Add another
</Button>
</div>
<div class="wiki-inputs">
{#each wikiPagesInputs as _, index}
<div class="input-row">
@ -387,16 +399,6 @@
{/if}
</div>
{/each}
<Button
variant="ghost"
class="add-input-button"
leftIcon="plus"
size="small"
type="button"
onclick={addInput}
>
Add another
</Button>
</div>
{#if fetchError}
<p class="error">{fetchError}</p>
@ -642,6 +644,13 @@
padding: spacing.$unit-2x;
}
.input-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: spacing.$unit-2x;
}
.wiki-inputs {
display: flex;
flex-direction: column;
@ -654,10 +663,6 @@
align-items: center;
}
:global(.wiki-inputs .add-input-button) {
width: fit-content;
}
.remove-button {
display: flex;
align-items: center;