feat: small design changes

This commit is contained in:
Tine 2024-02-29 15:12:20 +01:00
parent 7c8e130845
commit 5223aef1ca
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
8 changed files with 40 additions and 34 deletions

View file

@ -48,6 +48,7 @@ func (s *Server) Start() error {
s.echo.Renderer = templates.NewTemplates()
s.echo.Use(middleware.Logger())
s.echo.Use(middleware.Recover())
s.echo.Use(middleware.Secure())
Routes(s.echo, db, temporalClient, s.cfg, s.logger)
go func() {

View file

@ -63,17 +63,11 @@ code {
@apply mb-3;
}
.monitors .time-range > a {
@apply font-medium text-sm px-2.5 py-1;
@apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300;
@apply font-medium text-sm px-2.5 py-1 rounded-lg;
@apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400;
}
.monitors .time-range > a.active {
@apply text-white bg-blue-700 hover:bg-blue-800;
}
.monitors .time-range > a:first-child {
@apply rounded-s-lg;
}
.monitors .time-range > a:last-child {
@apply rounded-e-lg;
@apply bg-white hover:bg-gray-300 shadow;
}
.settings {

View file

@ -788,8 +788,8 @@ video {
justify-content: center;
}
.justify-between {
justify-content: space-between;
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
@ -971,6 +971,11 @@ video {
padding: 1.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1337,6 +1342,7 @@ code {
}
.monitors .time-range > a {
border-radius: 0.5rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-top: 0.25rem;
@ -1362,29 +1368,20 @@ code {
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
--tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
}
.monitors .time-range > a.active {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--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);
}
.monitors .time-range > a.active:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.monitors .time-range > a:first-child {
border-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
}
.monitors .time-range > a:last-child {
border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.settings {
@ -1725,6 +1722,10 @@ code {
}
@media (min-width: 768px) {
.md\:grid-cols-\[1fr\2c 20\%\] {
grid-template-columns: 1fr 20%;
}
.md\:flex-row {
flex-direction: row;
}

View file

@ -32,7 +32,7 @@
{{ template "main" . }}
<div class="container mx-auto">
<footer class="text-center text-gray-500 text-xs mt-8 mb-4">
&copy; 2024 Zdravko -
&copy; {{ Now.UTC.Year }} Zdravko -
<a
class="hover:underline"
href="https://github.com/mentos1386/zdravko"

View file

@ -75,7 +75,8 @@
</svg>
<h1 class="text-slate-500 mt-4">All services are online</h1>
<p class="text-slate-500 text-sm">
Last updated on Feb 10 at 10:55am UTC
Last updated on
{{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
</p>
</div>
{{ else }}
@ -87,7 +88,8 @@
</svg>
<h3 class="text-slate-500 mt-4">Degraded performance</h3>
<p class="text-slate-500 text-sm">
Last updated on Feb 10 at 10:55am UTC
Last updated on
{{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
</p>
</div>
{{ end }}
@ -97,7 +99,7 @@
Monitors
</p>
<div
class="inline-flex rounded-md shadow-sm justify-self-center sm:justify-self-end time-range"
class="inline-flex gap-1 rounded-md shadow-sm justify-self-center sm:justify-self-end time-range py-1 px-1 bg-gray-100"
role="group"
>
<a
@ -112,6 +114,12 @@
type="button"
>48 Hours</a
>
<a
href="/?time-range=90minutes"
class="{{ if eq .TimeRange "90minutes" }}active{{ end }}"
type="button"
>90 Minutes</a
>
</div>
</div>
{{ range .HealthChecks }}

View file

@ -32,13 +32,13 @@
<table>
<caption>
List of Monitors
<div class="mt-1 gap-4 flex justify-between">
<div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
<p>
{{ $description }}
</p>
<a
href="/settings/monitors/create"
class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
class="h-min inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create New
<svg class="feather h-5 w-5 overflow-visible">

View file

@ -32,13 +32,13 @@
<table>
<caption>
List of Worker Groups
<div class="mt-1 gap-4 flex justify-between">
<div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
<p>
{{ $description }}
</p>
<a
href="/settings/worker-groups/create"
class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
class="h-min inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create New
<svg class="feather h-5 w-5 overflow-visible">

View file

@ -6,6 +6,7 @@ import (
"log"
"strings"
"text/template"
"time"
"github.com/labstack/echo/v4"
)
@ -25,6 +26,7 @@ func load(files ...string) *template.Template {
t := template.New("default").Funcs(
template.FuncMap{
"StringsJoin": strings.Join,
"Now": time.Now,
})
return template.Must(t.ParseFS(templates, files...))