lucasvbr/own-workspace
1
0
Fork 0
mirror of https://github.com/LucasVbr/own-workspace.git synced 2026-05-13 17:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

addButton better UX

Browse Source
This commit is contained in:
RemiSaurel
2022-08-25 15:02:32 +02:00
parent cf15f99b28
commit 26f83d0bc1
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ToDoList.vue
+10 -5
View File
@@ -4,7 +4,7 @@
<div id="input"> <div id="input">
<input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item" <input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
placeholder="Ex: Finir exos maths"> placeholder="Ex: Finir exos maths">
<button @click="addItem(item)" id="add_button">+</button> <button @click="addItem(item)" id="add_button" :disabled="this.item === ''">+</button>
</div> </div>
<div id="liste"> <div id="liste">
<div v-for="item in items" :key="item" class="item"> <div v-for="item in items" :key="item" class="item">
@@ -79,11 +79,11 @@ export default {
margin: 8px 16px 0px 0px; margin: 8px 16px 0px 0px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 16px; border-radius: 16px;
border: 3px solid #a59182; border: 3px solid #87725f;
} }
#todo_input:hover { #todo_input:hover {
border: 3px solid #87725f; border: 3px solid #5b4b3e;
} }
#todo_input:focus { #todo_input:focus {
@@ -108,18 +108,23 @@ export default {
border: 3px solid #504746; border: 3px solid #504746;
background-color: #504746; background-color: #504746;
color: white; color: white;
user-select: none;
}
#add_button:disabled {
border: 3px solid #928585;
background-color: #928585;
pointer-events: none;
} }
#add_button:hover { #add_button:hover {
border: 3px solid #413838; border: 3px solid #413838;
background-color: #413838; background-color: #413838;
color: white;
} }
#add_button:active { #add_button:active {
border: 3px solid #2f2828; border: 3px solid #2f2828;
background-color: #2f2828; background-color: #2f2828;
color: white;
} }
#liste { #liste {