mentos1386/zdravko
1
0
Fork 0
mirror of https://github.com/mentos1386/zdravko.git synced 2024-11-21 23:33:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: ui improvements

Browse source
This commit is contained in:
Tine 2024-03-04 09:36:12 +01:00
parent 24e8414e03
commit d2c22b5403
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
5 changed files with 38 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
internal/services/monitor.go
View file

@ -3,6 +3,7 @@ package services
import (
"context"
"log"
"sort"
"time"
"code.tjo.space/mentos1386/zdravko/database/models"
@ -136,6 +137,7 @@ FROM monitors
LEFT OUTER JOIN monitor_worker_groups ON monitors.id = monitor_worker_groups.monitor_id
LEFT OUTER JOIN worker_groups ON monitor_worker_groups.worker_group_id = worker_groups.id
WHERE monitors.id=$1
ORDER BY monitors.name
`,
id,
)
@ -228,7 +230,12 @@ ORDER BY monitors.name
monitors[monitor.Id] = monitor
}
return maps.Values(monitors), err
monitorsWithWorkerGroups := maps.Values(monitors)
sort.SliceStable(monitorsWithWorkerGroups, func(i, j int) bool {
return monitorsWithWorkerGroups[i].Name < monitorsWithWorkerGroups[j].Name
})
return monitorsWithWorkerGroups, err
}
func DeleteMonitorSchedule(ctx context.Context, t client.Client, id string) error {

5
web/static/css/main.css
View file

@ -57,10 +57,7 @@ code {
}
.monitors .monitors-list {
@apply grid justify-items-stretch justify-stretch items-center bg-white shadow-md p-5 py-2 rounded-lg;
}
.monitors .monitors-list > div:not(:last-child) {
@apply mb-3;
@apply grid justify-items-stretch justify-stretch items-center bg-white shadow-md rounded-lg;
}
.monitors .time-range > a {
@apply font-medium text-sm px-2.5 py-1 rounded-lg;

45
web/static/css/tailwind.css
View file

@ -870,10 +870,6 @@ video {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border {
border-width: 1px;
}
@ -882,6 +878,10 @@ video {
border-width: 4px;
}
.border-b {
border-bottom-width: 1px;
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
@ -983,11 +983,6 @@ video {
padding: 1.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1003,11 +998,6 @@ video {
padding-right: 1.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@ -1023,6 +1013,11 @@ video {
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
@ -1051,11 +1046,6 @@ video {
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
@ -1111,6 +1101,10 @@ video {
letter-spacing: -0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@ -1191,12 +1185,6 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -1352,18 +1340,11 @@ code {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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 .monitors-list > div:not(:last-child) {
margin-bottom: 0.75rem;
}
.monitors .time-range > a {
border-radius: 0.5rem;
padding-left: 0.625rem;

24
web/templates/pages/index.tmpl
View file

@ -66,7 +66,7 @@
Monitors
</h2>
<div
class="inline-flex gap-1 rounded-md shadow-sm justify-self-center sm:justify-self-end time-range py-1 px-1 bg-white"
class="inline-flex gap-1 justify-self-center sm:justify-self-end time-range"
role="group"
>
<a
@ -90,18 +90,18 @@
</div>
</div>
{{ range $group, $monitors := .Monitors }}
<div class="monitors-list">
<h3 class="text-lg font-semibold flex flex-row gap-2">
<!--<span
<div class="monitors-list gap-2">
<h3 class="flex flex-row gap-2 p-5 py-4 border-b border-gray-200">
<span
class="flex w-3 h-3 bg-green-400 rounded-full self-center"
></span>-->
<span class="flex-1">{{ $group }}</span>
></span>
<span class="flex-1 font-semibold uppercase ">{{ $group }}</span>
<svg class="feather h-6 w-6 overflow-visible self-center">
<use href="/static/icons/feather-sprite.svg#chevron-down" />
</svg>
</h3>
{{ range $monitors }}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 p-5 py-2">
<div class="flex items-center gap-2">
{{ if eq .Status "SUCCESS" }}
<span class="flex w-3 h-3 bg-green-400 rounded-full"></span>
@ -132,7 +132,9 @@
{{ end }}
{{ end }}
</div>
<div class="text-slate-500 justify-self-start text-sm">
<div
class="text-slate-500 justify-self-start text-xs tracking-wider"
>
{{ if eq $.TimeRange "90days" }}
90 days ago
{{ else if eq $.TimeRange "48hours" }}
@ -141,7 +143,11 @@
90 minutes ago
{{ end }}
</div>
<div class="text-slate-500 justify-self-end text-sm">Now</div>
<div
class="text-slate-500 justify-self-end text-xs tracking-wider"
>
Now
</div>
</div>
{{ end }}
</div>

2
web/templates/pages/settings_monitors.tmpl
View file

@ -75,7 +75,7 @@
{{ if eq $group $currentGroup }}
{{ range $monitors }}
<tr>
<th scope="row"></th>
<th scope="row">└─</th>
<th scope="row">
{{ .Name }}
</th>