samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated button design of Forms

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 13:04:02 +02:00
parent 72d597efc8
commit 31ee2a507d
1 changed files with 37 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/lib/components/refactor/ComposerForm.svelte
View File

@ -167,13 +167,6 @@
<p class="text-2xl text-center text-white"> <p class="text-2xl text-center text-white">
{fields[$state.context.currentField].description} {fields[$state.context.currentField].description}
</p> </p>
<!-- <label
for={fields[$state.context.currentField].name}
class="block mb-2 font-semibold text-center text-white"
>
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
fields[$state.context.currentField].name.slice(1)}
</label> -->
{/if} {/if}
</div> </div>
{#if fields[$state.context.currentField].type === 'text'} {#if fields[$state.context.currentField].type === 'text'}
@ -205,43 +198,43 @@
submitted submitted
{/if} {/if}
<div class="flex justify-between mt-4"> <div class="flex justify-between mt-4">
{#each $possibleActions as action (action)} <div>
{#if action === 'PREV'} {#each $possibleActions as action (action)}
<button {#if action === 'PREV'}
type="button" <button
on:click={() => send(action)} type="button"
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" on:click={() => send(action)}
disabled={$state.context.currentField === 0} class="btn btn-xl variant-filled"
> disabled={$state.context.currentField === 0}
{action} >
</button> {action}
{/if} </button>
{/each} {/if}
{/each}
{#each $possibleActions as action (action)} </div>
{#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'} <div>
<button {#each $possibleActions as action (action)}
type="button" {#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'}
on:click={() => send(action)} <button type="button" on:click={() => send(action)} class="btn btn-xl variant-filled">
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" {action}
> </button>
{action} {/if}
</button> {/each}
{/if} </div>
{/each} <div>
{#each $possibleActions as action (action)}
{#each $possibleActions as action (action)} {#if action === 'NEXT' || action === 'SUBMIT'}
{#if action === 'NEXT' || action === 'SUBMIT'} <button
<button type="button"
type="button" on:click={() => handleNext()}
on:click={() => handleNext()} class="btn btn-xl variant-filled"
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={$errors[fields[$state.context.currentField].name]}
disabled={$errors[fields[$state.context.currentField].name]} >
> {action}
{action} </button>
</button> {/if}
{/if} {/each}
{/each} </div>
</div> </div>
</form> </form>
</div> </div>