todo restyling

main
Giulio Alessandrini 2021-08-03 09:43:26 +02:00
parent e3cac784c5
commit 396b865b05
2 changed files with 83 additions and 39 deletions

View File

@ -10,6 +10,7 @@
date: Date.now, date: Date.now,
done: false done: false
} }
todo_text = "";
if (todo_type == "done") todo_type = "all"; if (todo_type == "done") todo_type = "all";
$todos = [todo, ...$todos]; $todos = [todo, ...$todos];
} }
@ -46,8 +47,10 @@
<div class = "panel"> <div class = "panel">
<h2 class= "title">TODO</h2> <h2 class= "title">TODO</h2>
<hr/> <hr/>
<input bind:value="{todo_text}" placeholder="title"/> <div class="todo-input">
<button on:click="{addTodo}" disabled = {todo_text.length == 0} class = {todo_text.length == 0 ? 'disabled' : ''}>add</button> <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
<button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>
</div>
<div class="todo-filter"> <div class="todo-filter">
<button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button> <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
<button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button> <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
@ -65,49 +68,86 @@
<style> <style>
input { * {
padding: 5px; --cream: #FEF9EF;
margin: 0px; --blue: #227c9d;
border: solid var(--gray) 1px; --green: #17C3B2;
border-radius: 5px; --yellow: #FFCB77;
--red: #FE6D73;
}
.panel {
padding: 10px;
background-color: var(--cream);
}
@media only screen and (min-width: 500px) {
.panel {
margin-left: auto;
margin-right: auto;
width: 500px;
border: solid var(--cream) 1px;
border-radius: 5px;
}
}
hr {
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid var(--yellow);
} }
button { button {
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
background-color: var(--lightgray); background-color: var(--blue);
border: solid var(--gray) 1px; border: solid var(--blue) 1px;
border-radius: 5px; border-radius: 5px;
color: var(--cream);
}
.todo-input {
font-size: 0px;
}
.todo-text {
padding: 8px;
margin: 0px;
border: solid white 1px;
border-right: 0px;
border-radius: 0px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.todo-text:focus {
outline: none;
}
.todo-add {
padding: 8px;
border-radius: 0px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
} }
.disabled { .disabled {
background-color: var(--gray); background-color: var(--yellow);
border-color: var(--yellow);
color: black;
} }
button:active { button:active {
background-color: var(--gray); background-color: var(--yellow);
} color: black;
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid var(--gray);
}
.panel {
background-color: rgb(245, 253, 255);
padding: 10px;
border: solid var(--gray) 1px;
border-radius: 5px;
} }
.title { .title {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
margin-left: 5px; margin-left: 5px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 400; font-weight: 400;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--yellow);
} }
.todo-filter { .todo-filter {
@ -131,25 +171,35 @@ hr {
.todo { .todo {
padding: 10px; padding: 10px;
margin: 5px 0px 5px 0px; margin: 5px 0px 5px 0px;
background-color: rgb(255, 255, 255); background-color: var(--yellow);
border: solid var(--gray) 1px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
font-size: 1.2rem;
}
.todo.done {
/* background-color: #FEF9EF; */
} }
.done p { .done p {
text-decoration: line-through /* text-decoration: line-through; */
} color: var(--cream);
.todo p {
padding: 0px;
margin: 0px 10px 0px 0px;
} }
.todo button { .todo button {
margin-left: auto; margin-left: auto;
background-color: var(--green);
border-color: var(--green);
font-size: 1rem;
color: var(--cream)
}
.todo.done button {
background-color: var(--red);
border-color: var(--red);
color:var(--cream);
} }
</style> </style>

View File

@ -21,13 +21,7 @@
} }
.site { .site {
padding: 2em;
margin-left: auto;
margin-right: auto;
max-width: 50em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
} }
</style> </style>