From cd123ae1c1b202ac48a3bf6191ffb7bd22e61d6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Fri, 5 Jul 2024 14:52:02 +0200 Subject: [PATCH] Added button to apply timefilter --- page.go | 6 +- static/css/default_light/gruvbox.css | 1 - static/css/default_light/main.css | 2 +- static/css/default_light/notifications.css | 5 +- static/css/gruvbox/gruvbox.css | 1 - static/css/gruvbox/main.css | 2 +- static/css/gruvbox/notifications.css | 5 +- static/images/default_light/forward.svg | 69 +++++++++++++++++ static/images/gruvbox/forward.svg | 69 +++++++++++++++++ static/less/gruvbox.less | 1 - static/less/main.less | 2 +- static/less/notifications.less | 6 +- views/components/timefilter.gotmpl | 89 +++++++--------------- 13 files changed, 175 insertions(+), 83 deletions(-) create mode 100644 static/images/default_light/forward.svg create mode 100644 static/images/gruvbox/forward.svg diff --git a/page.go b/page.go index 38ff22c..a83ed12 100644 --- a/page.go +++ b/page.go @@ -2,7 +2,7 @@ package main import ( // External - we "git.gibonuddevalla.se/go/wrappederror" + werr "git.gibonuddevalla.se/go/wrappederror" // Standard "fmt" @@ -25,7 +25,7 @@ type Page struct { func (p *Page) Render(w http.ResponseWriter, r *http.Request) { tmpl, err := getPage(p.LAYOUT, p.PAGE) if err != nil { - httpError(w, we.Wrap(err).Log()) + httpError(w, werr.Wrap(err).Log()) return } @@ -58,6 +58,6 @@ func (p *Page) Render(w http.ResponseWriter, r *http.Request) { err = tmpl.Execute(w, data) if err != nil { - httpError(w, we.Wrap(err).Log()) + httpError(w, werr.Wrap(err).Log()) } } diff --git a/static/css/default_light/gruvbox.css b/static/css/default_light/gruvbox.css index f2b59e8..4420fef 100644 --- a/static/css/default_light/gruvbox.css +++ b/static/css/default_light/gruvbox.css @@ -20,5 +20,4 @@ input[type="datetime-local"] { background-color: #1b4e78; color: #ccc; border: 1px solid #535353; - padding: 6px; } diff --git a/static/css/default_light/main.css b/static/css/default_light/main.css index 37b0e9d..0a92050 100644 --- a/static/css/default_light/main.css +++ b/static/css/default_light/main.css @@ -262,7 +262,7 @@ label { top: 16px; right: 16px; display: grid; - grid-template-columns: 8px repeat(2, min-content) 8px 1px 8px repeat(3, min-content) 8px repeat(3, min-content) 8px 1px 8px repeat(2, min-content) 8px; + grid-template-columns: 8px repeat(2, min-content) 8px min-content 8px 1px 8px repeat(3, min-content) 8px repeat(3, min-content) 8px 1px 8px repeat(2, min-content) 8px; grid-gap: 6px 8px; align-items: center; width: min-content; diff --git a/static/css/default_light/notifications.css b/static/css/default_light/notifications.css index f294e27..e9f86ba 100644 --- a/static/css/default_light/notifications.css +++ b/static/css/default_light/notifications.css @@ -1,11 +1,8 @@ -input[type="datetime-local"] { - padding: 6px; -} #notifications { display: grid; grid-template-columns: repeat(5, min-content); grid-gap: 4px 16px; - margin-top: 32px; + margin-top: 96px; margin-bottom: 32px; background-color: #2979b8; padding: 16px 24px; diff --git a/static/css/gruvbox/gruvbox.css b/static/css/gruvbox/gruvbox.css index 400e861..6acdbc0 100644 --- a/static/css/gruvbox/gruvbox.css +++ b/static/css/gruvbox/gruvbox.css @@ -20,5 +20,4 @@ input[type="datetime-local"] { background-color: #202020; color: #ccc; border: 1px solid #535353; - padding: 6px; } diff --git a/static/css/gruvbox/main.css b/static/css/gruvbox/main.css index 4853b99..9a5edea 100644 --- a/static/css/gruvbox/main.css +++ b/static/css/gruvbox/main.css @@ -262,7 +262,7 @@ label { top: 16px; right: 16px; display: grid; - grid-template-columns: 8px repeat(2, min-content) 8px 1px 8px repeat(3, min-content) 8px repeat(3, min-content) 8px 1px 8px repeat(2, min-content) 8px; + grid-template-columns: 8px repeat(2, min-content) 8px min-content 8px 1px 8px repeat(3, min-content) 8px repeat(3, min-content) 8px 1px 8px repeat(2, min-content) 8px; grid-gap: 6px 8px; align-items: center; width: min-content; diff --git a/static/css/gruvbox/notifications.css b/static/css/gruvbox/notifications.css index 601d899..75d8d89 100644 --- a/static/css/gruvbox/notifications.css +++ b/static/css/gruvbox/notifications.css @@ -1,11 +1,8 @@ -input[type="datetime-local"] { - padding: 6px; -} #notifications { display: grid; grid-template-columns: repeat(5, min-content); grid-gap: 4px 16px; - margin-top: 32px; + margin-top: 96px; margin-bottom: 32px; background-color: #333; padding: 16px 24px; diff --git a/static/images/default_light/forward.svg b/static/images/default_light/forward.svg new file mode 100644 index 0000000..538498a --- /dev/null +++ b/static/images/default_light/forward.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + alert + arrow-right-bold-circle + + + diff --git a/static/images/gruvbox/forward.svg b/static/images/gruvbox/forward.svg new file mode 100644 index 0000000..538498a --- /dev/null +++ b/static/images/gruvbox/forward.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + alert + arrow-right-bold-circle + + + diff --git a/static/less/gruvbox.less b/static/less/gruvbox.less index 7fa24ef..25e8829 100644 --- a/static/less/gruvbox.less +++ b/static/less/gruvbox.less @@ -29,5 +29,4 @@ input[type="datetime-local"] { background-color: @bg2; color: #ccc; border: 1px solid #535353; - padding: 6px; } diff --git a/static/less/main.less b/static/less/main.less index 33d6845..dd38af3 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -297,7 +297,7 @@ label { right: 16px; display: grid; - grid-template-columns: 8px repeat(2,min-content) 8px 1px 8px repeat(3,min-content) 8px repeat(3,min-content) 8px 1px 8px repeat(2,min-content) 8px; + grid-template-columns: 8px repeat(2,min-content) 8px min-content 8px 1px 8px repeat(3,min-content) 8px repeat(3,min-content) 8px 1px 8px repeat(2,min-content) 8px; grid-gap: 6px 8px; align-items: center; diff --git a/static/less/notifications.less b/static/less/notifications.less index 6c9ee4e..d168327 100644 --- a/static/less/notifications.less +++ b/static/less/notifications.less @@ -1,14 +1,10 @@ @import "theme-@{THEME}.less"; -input[type="datetime-local"] { - padding: 6px; -} - #notifications { display: grid; grid-template-columns: repeat(5, min-content); grid-gap: 4px 16px; - margin-top: 32px; + margin-top: 96px; margin-bottom: 32px; background-color: @bg3; padding: 16px 24px; diff --git a/views/components/timefilter.gotmpl b/views/components/timefilter.gotmpl index df24df0..4c97cb8 100644 --- a/views/components/timefilter.gotmpl +++ b/views/components/timefilter.gotmpl @@ -11,6 +11,11 @@ el.value = seconds el.form.submit() } + + function enterHandler(evt) { + if (evt.key == 'Enter') + document.getElementById('form-time-selector').submit() + } @@ -19,29 +24,32 @@
- - {{/* Row 1 */}} + {{/* ====== Row 1 ====== */}}
-
Date and time
+
Date and time
-
 
+
 
-
Offsets
+
Offsets
-
+
-
Presets
+
Presets
- {{/* Row 2 */}} + + + {{/* ====== Row 2 ====== */}}
From
- + +
+
{{/* Vertical line */}} @@ -66,10 +74,14 @@
- {{/* Row 3 */}} + + + {{/* ====== Row 3 ====== */}}
To
- + +
+
{{/* Vertical line */}} @@ -95,57 +107,12 @@
- {{/* Row 4 */}} + + + {{/* ====== Row 4 ====== */}}
-
-
- - - {{/* -
From
-
To
- -
-
-
- - - - - -
-
Presets
-
Offsets
- -
Last hour
- -
◀
-
Hour
-
▶
- -
Last 24 hours
- -
◀
-
Day
-
▶
- -
Last 7 days
- -
◀
-
Week
-
▶
- -
Last 31 days
-
Last 24 hours
-
Last 24 hours
- -
◀
-
Month
-
▶
-
- - - */}} +
+
{{ end }}