add makefile and tweak CSS

This commit is contained in:
Peter Tillemans 2023-09-04 16:29:16 +02:00
parent 06d90941b7
commit 0e4e131bc8
3 changed files with 74 additions and 9 deletions

8
Makefile Normal file
View file

@ -0,0 +1,8 @@
todo:
go build main.go
air:
air
tailwind:
npx tailwindcss -i input.css -o static/output.css --watch

View file

@ -534,6 +534,20 @@ video {
--tw-backdrop-sepia: ;
}
.m-2 {
margin: 0.5rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.flex {
display: flex;
}
@ -546,10 +560,22 @@ video {
flex-grow: 1;
}
.basis-1\/2 {
flex-basis: 50%;
}
.basis-1\/4 {
flex-basis: 25%;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.gap-2 {
gap: 0.5rem;
}
@ -564,6 +590,10 @@ video {
border-radius: 0.75rem;
}
.rounded {
border-radius: 0.25rem;
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@ -592,6 +622,25 @@ video {
padding: 2rem;
}
.p-2 {
padding: 0.5rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -615,3 +664,9 @@ video {
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

View file

@ -1,19 +1,21 @@
<ul id="todos" class="shadow-lg grid grid-cols-1 gap-2">
<ul id="todos" class="grid grid-cols-1 gap-2">
{{range $index, $task := . }}
<li id={{$task.Id}} class="p-4 rounded-xl bg-slate-100">
<input type="checkbox" {{if $task.Completed}}checked{{end}}
hx-post="/toggle-todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">
{{$task.Title}}
<button class="bg-red-500"
hx-delete="/todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">X</button>
<li id={{$task.Id}} class="p-4 shadow rounded-xl bg-slate-100">
<div class="flex flex-row">
<input class="px-2" type="checkbox" {{if $task.Completed}}checked{{end}}
hx-post="/toggle-todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">
<p class="mx-3">{{$task.Title}}</p>
<button class="px-4 rounded-xl bg-red-500"
hx-delete="/todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">X</button>
</div>
</li>
{{end}}
<li>
<form class="p-4 rounded-xl bg-slate-100" hx-post="/todos" hx-swap="outerHTML" hx-target="#todos">
<label class="flex p-4">
Title:
<input type="text" name="title" class="grow" ></input>
<button name="submit" class="bg-sky-500">Add</button>
<input type="text" name="title" class="grow mx-2 px-2 bg-slate-200" ></input>
<button name="submit" class="px-4 rounded-xl bg-sky-500">Add</button>
</label>
</form>