tweak import page input layout
This commit is contained in:
parent
83bcecebb5
commit
0f68e0d2e8
3 changed files with 60 additions and 43 deletions
|
|
@ -381,7 +381,19 @@
|
||||||
<!-- Input phase -->
|
<!-- Input phase -->
|
||||||
{#if entities.size === 0}
|
{#if entities.size === 0}
|
||||||
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
|
<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">
|
<div class="wiki-inputs">
|
||||||
{#each wikiPagesInputs as _, index}
|
{#each wikiPagesInputs as _, index}
|
||||||
<div class="input-row">
|
<div class="input-row">
|
||||||
|
|
@ -403,16 +415,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="add-input-button"
|
|
||||||
leftIcon="plus"
|
|
||||||
size="small"
|
|
||||||
type="button"
|
|
||||||
onclick={addInput}
|
|
||||||
>
|
|
||||||
Add another
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{#if fetchError}
|
{#if fetchError}
|
||||||
<p class="error">{fetchError}</p>
|
<p class="error">{fetchError}</p>
|
||||||
|
|
@ -659,6 +661,13 @@
|
||||||
padding: spacing.$unit-2x;
|
padding: spacing.$unit-2x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: spacing.$unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
.wiki-inputs {
|
.wiki-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -671,10 +680,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.wiki-inputs .add-input-button) {
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-button {
|
.remove-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -365,7 +365,19 @@
|
||||||
<!-- Input phase -->
|
<!-- Input phase -->
|
||||||
{#if entities.size === 0}
|
{#if entities.size === 0}
|
||||||
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
|
<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">
|
<div class="wiki-inputs">
|
||||||
{#each wikiPagesInputs as _, index}
|
{#each wikiPagesInputs as _, index}
|
||||||
<div class="input-row">
|
<div class="input-row">
|
||||||
|
|
@ -382,14 +394,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
type="button"
|
|
||||||
onclick={addInput}
|
|
||||||
class="add-input-button"
|
|
||||||
leftIcon="plus"
|
|
||||||
size="small">Add another</Button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
{#if fetchError}
|
{#if fetchError}
|
||||||
<p class="error">{fetchError}</p>
|
<p class="error">{fetchError}</p>
|
||||||
|
|
@ -633,6 +637,13 @@
|
||||||
padding: spacing.$unit-2x;
|
padding: spacing.$unit-2x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: spacing.$unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
.wiki-inputs {
|
.wiki-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -645,10 +656,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.wiki-inputs .add-input-button) {
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-button {
|
.remove-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -370,7 +370,19 @@
|
||||||
<!-- Input phase -->
|
<!-- Input phase -->
|
||||||
{#if entities.size === 0}
|
{#if entities.size === 0}
|
||||||
<form class="input-phase" onsubmit={(e) => { e.preventDefault(); fetchWikiData(); }}>
|
<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">
|
<div class="wiki-inputs">
|
||||||
{#each wikiPagesInputs as _, index}
|
{#each wikiPagesInputs as _, index}
|
||||||
<div class="input-row">
|
<div class="input-row">
|
||||||
|
|
@ -387,16 +399,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="add-input-button"
|
|
||||||
leftIcon="plus"
|
|
||||||
size="small"
|
|
||||||
type="button"
|
|
||||||
onclick={addInput}
|
|
||||||
>
|
|
||||||
Add another
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{#if fetchError}
|
{#if fetchError}
|
||||||
<p class="error">{fetchError}</p>
|
<p class="error">{fetchError}</p>
|
||||||
|
|
@ -642,6 +644,13 @@
|
||||||
padding: spacing.$unit-2x;
|
padding: spacing.$unit-2x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: spacing.$unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
.wiki-inputs {
|
.wiki-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -654,10 +663,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.wiki-inputs .add-input-button) {
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-button {
|
.remove-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue