mentos1386/zdravko
1
0
Fork 0
mirror of https://github.com/mentos1386/zdravko.git synced 2024-11-29 10:41:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: restructure and add settings page

Browse source
This commit is contained in:
Tine 2024-02-10 18:35:16 +01:00
parent d4647edfd2
commit e45fc81faa
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
6 changed files with 178 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
cmd/server/main.go
View file

@ -17,6 +17,7 @@ func main() {
r.PathPrefix("/static/").Handler(http.FileServer(http.FS(internal.Static))) r.PathPrefix("/static/").Handler(http.FileServer(http.FS(internal.Static)))
r.HandleFunc("/", pages.Index).Methods("GET") r.HandleFunc("/", pages.Index).Methods("GET")
r.HandleFunc("/settings", pages.Settings).Methods("GET")
log.Println("Server started on :8000") log.Println("Server started on :8000")
log.Fatal(http.ListenAndServe(":8000", r)) log.Fatal(http.ListenAndServe(":8000", r))

24
internal/pages/settings.go Normal file
View file

@ -0,0 +1,24 @@
package pages
import (
"net/http"
"text/template"
"code.tjo.space/mentos1386/zdravko/internal"
)
func Settings(w http.ResponseWriter, r *http.Request) {
ts, err := template.ParseFS(internal.Templates,
"ui/components/base.tmpl",
"ui/pages/settings.tmpl",
)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = ts.ExecuteTemplate(w, "base", nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}

33
internal/static/css/tailwind.css
View file

@ -599,12 +599,16 @@ video {
margin-right: auto; margin-right: auto;
} }
.mt-20 { .mr-1 {
margin-top: 5rem; margin-right: 0.25rem;
} }
.mt-6 { .mt-10 {
margin-top: 1.5rem; margin-top: 2.5rem;
}
.mt-20 {
margin-top: 5rem;
} }
.mt-8 { .mt-8 {
@ -623,6 +627,10 @@ video {
height: 5rem; height: 5rem;
} }
.h-5 {
height: 1.25rem;
}
.h-8 { .h-8 {
height: 2rem; height: 2rem;
} }
@ -631,6 +639,10 @@ video {
width: 5rem; width: 5rem;
} }
.w-5 {
width: 1.25rem;
}
.max-w-screen-md { .max-w-screen-md {
max-width: 768px; max-width: 768px;
} }
@ -724,6 +736,11 @@ video {
background-color: rgb(134 239 172 / var(--tw-bg-opacity)); background-color: rgb(134 239 172 / var(--tw-bg-opacity));
} }
.bg-green-400 {
--tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.bg-green-500 { .bg-green-500 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity)); background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@ -739,6 +756,14 @@ video {
background-color: rgb(239 68 68 / var(--tw-bg-opacity)); background-color: rgb(239 68 68 / var(--tw-bg-opacity));
} }
.stroke-\[3\] {
stroke-width: 3;
}
.p-1 {
padding: 0.25rem;
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }

7
internal/ui/components/base.tmpl
View file

@ -9,7 +9,14 @@
<link rel="stylesheet" href="/static/css/tailwind.css"> <link rel="stylesheet" href="/static/css/tailwind.css">
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
<nav class="justify-center flex space-x-2 mt-10">
<a href="/" class="btn btn-active">Status</a>
<a href="/incidents" class="btn">Incidents</a>
<a href="/settings" class="btn">Settings</a>
</nav>
<div class="container max-w-screen-md flex flex-col mt-20">
{{template "main" .}} {{template "main" .}}
</div>
<div class="container mx-auto"> <div class="container mx-auto">
<footer class="text-center text-gray-500 text-xs mt-8"> <footer class="text-center text-gray-500 text-xs mt-8">
&copy; 2024 Zdravko - <a href="https://github.com/mentos1386/zdravko">Source</a> &copy; 2024 Zdravko - <a href="https://github.com/mentos1386/zdravko">Source</a>

16
internal/ui/pages/index.tmpl
View file

@ -1,13 +1,7 @@
{{define "title"}}Home{{end}} {{define "title"}}Status{{end}}
{{define "main"}} {{define "main"}}
<div class="container max-w-screen-md mt-6 flex flex-col"> <div class="flex flex-col items-center">
<nav class="justify-center flex space-x-2">
<a href="/" class="btn btn-active">Status</a>
<a href="/incidents" class="btn">Incidents</a>
<a href="/about" class="btn">About</a>
</nav>
<div class="flex flex-col items-center mt-20">
<svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg> <svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<h1 class="text-slate-500">All services are online</h1> <h1 class="text-slate-500">All services are online</h1>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p> <p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
@ -19,7 +13,10 @@
</div> </div>
<div class="grid justify-items-stretch justify-stretch items-center mt-20 bg-gray-200 shadow-inner p-5 rounded-lg"> <div class="grid justify-items-stretch justify-stretch items-center mt-20 bg-gray-200 shadow-inner p-5 rounded-lg">
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<div class="">foo.bar</div> <div class="flex items-center">
<svg class="feather h-5 w-5 stroke-[3] rounded-full bg-green-400 p-1 mr-1"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<p>foo.bar</p>
</div>
<div class="justify-self-end text-sm">69.420% uptime</div> <div class="justify-self-end text-sm">69.420% uptime</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"> <div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div> <div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
@ -117,5 +114,4 @@
<div class="text-slate-500 justify-self-end text-sm">Today</div> <div class="text-slate-500 justify-self-end text-sm">Today</div>
</div> </div>
</div> </div>
</div>
{{end}} {{end}}

5
internal/ui/pages/settings.tmpl Normal file
View file

@ -0,0 +1,5 @@
{{define "title"}}Settings{{end}}
{{define "main"}}
<h1>The settings!</h1>
{{end}}