Moved placement to Todos

CarlosGDCJ · May 22, 2023 · 331691e · 331691e
1 parent 4fc9fee
commit 331691e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 46 deletions.
diff --git a/src/components/FilterButton.svelte b/src/components/FilterButton.svelte
@@ -5,30 +5,28 @@
 </script>
 
 <!-- Filter -->
-<div class="place-self-center">
- <RadioGroup
- active="variant-filled-primary"
- hover="hover:variant-soft-primary"
- display="flex"
- spacing="space-x-6"
- >
- <RadioItem bind:group={filter} name="all" value={Filter.ALL}>
- <span class="visually-hidden">Show</span>
- <span>All</span>
- <span class="visually-hidden">tasks</span>
- </RadioItem>
- <RadioItem bind:group={filter} name="completed" value={Filter.COMPLETED}>
- <span class="visually-hidden">Show</span>
- <span>Completed</span>
- <span class="visually-hidden">tasks</span>
- </RadioItem>
- <RadioItem bind:group={filter} name="active" value={Filter.ACTIVE}>
- <span class="visually-hidden">Show</span>
- <span>Active</span>
- <span class="visually-hidden">tasks</span>
- </RadioItem>
- </RadioGroup>
-</div>
+<RadioGroup
+ active="variant-filled-primary"
+ hover="hover:variant-soft-primary"
+ display="flex"
+ spacing="space-x-10 px-2"
+>
+ <RadioItem bind:group={filter} name="all" value={Filter.ALL}>
+ <span class="visually-hidden">Show</span>
+ <span>All</span>
+ <span class="visually-hidden">tasks</span>
+ </RadioItem>
+ <RadioItem bind:group={filter} name="completed" value={Filter.COMPLETED}>
+ <span class="visually-hidden">Show</span>
+ <span>Completed</span>
+ <span class="visually-hidden">tasks</span>
+ </RadioItem>
+ <RadioItem bind:group={filter} name="active" value={Filter.ACTIVE}>
+ <span class="visually-hidden">Show</span>
+ <span>Active</span>
+ <span class="visually-hidden">tasks</span>
+ </RadioItem>
+</RadioGroup>
 
 <style>
  .visually-hidden {

diff --git a/src/components/NewTodo.svelte b/src/components/NewTodo.svelte
@@ -20,23 +20,21 @@
 </script>
 
 <!-- NewTodo -->
-<div class="card p-4 w-full text-token">
- <form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>
- <h2 class="m-0 text-center">
- <label for="todo-0" class="text-2xl font-normal leading-tight mb-4">
- What needs to be done?
- </label>
- </h2>
- <input
- bind:value={name}
- bind:this={nameEl}
- use:selectOnFocus
- use:focusOnInit
- type="text"
- id="todo-0"
- autocomplete="off"
- class="input text-2xl font-normal p-4 mb-4"
- />
- <button type="submit" disabled={!name} class="btn variant-filled w-full"> Add </button>
- </form>
-</div>
+<form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>
+ <h2 class="m-0 text-center">
+ <label for="todo-0" class="text-2xl font-normal leading-tight mb-4">
+ What needs to be done?
+ </label>
+ </h2>
+ <input
+ bind:value={name}
+ bind:this={nameEl}
+ use:selectOnFocus
+ use:focusOnInit
+ type="text"
+ id="todo-0"
+ autocomplete="off"
+ class="input text-2xl font-normal p-4 mb-4"
+ />
+ <button type="submit" disabled={!name} class="btn variant-filled w-full"> Add </button>
+</form>
diff --git a/src/components/Todos.svelte b/src/components/Todos.svelte
@@ -77,8 +77,12 @@
 <!-- Todos.svelte -->
 <div class="flex justify-center">
  <div class="grid grid-cols-1 gap-4 min-w-full md:min-w-[750px] mt-4">
- <NewTodo on:addTodo={(e) => addTodo(e.detail.name)} />
- <FilterButton bind:filter />
+ <div class="card p-4 w-full text-token">
+ <NewTodo on:addTodo={(e) => addTodo(e.detail.name)} />
+ </div>
+ <div class="place-self-center">
+ <FilterButton bind:filter />
+ </div>
 
  <TodosStatus {todos} bind:this={todosStatus} />