From 5223aef1cafa1eacce3619579a9588457e788ef0 Mon Sep 17 00:00:00 2001 From: Tine Date: Thu, 29 Feb 2024 15:12:20 +0100 Subject: [PATCH] feat: small design changes --- pkg/server/server.go | 1 + web/static/css/main.css | 12 ++----- web/static/css/tailwind.css | 35 ++++++++++--------- web/templates/components/base.tmpl | 2 +- web/templates/pages/index.tmpl | 14 ++++++-- web/templates/pages/settings_monitors.tmpl | 4 +-- .../pages/settings_worker_groups.tmpl | 4 +-- web/templates/tempaltes.go | 2 ++ 8 files changed, 40 insertions(+), 34 deletions(-) diff --git a/pkg/server/server.go b/pkg/server/server.go index f3081fa..d4d4f6a 100644 --- a/pkg/server/server.go +++ b/pkg/server/server.go @@ -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() { diff --git a/web/static/css/main.css b/web/static/css/main.css index 5d1d201..1beb704 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -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 { diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index 52895c0..a643897 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -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; } diff --git a/web/templates/components/base.tmpl b/web/templates/components/base.tmpl index 5de1b97..dc67c27 100644 --- a/web/templates/components/base.tmpl +++ b/web/templates/components/base.tmpl @@ -32,7 +32,7 @@ {{ template "main" . }}
{{ else }} @@ -87,7 +88,8 @@

Degraded performance

- Last updated on Feb 10 at 10:55am UTC + Last updated on + {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}

{{ end }} @@ -97,7 +99,7 @@ Monitors

48 Hours + 90 Minutes
{{ range .HealthChecks }} diff --git a/web/templates/pages/settings_monitors.tmpl b/web/templates/pages/settings_monitors.tmpl index 6397e78..9f80ff5 100644 --- a/web/templates/pages/settings_monitors.tmpl +++ b/web/templates/pages/settings_monitors.tmpl @@ -32,13 +32,13 @@
List of Monitors -