diff --git a/internal/server/handlers/index.go b/internal/server/handlers/index.go index 45e68ec..434cd04 100644 --- a/internal/server/handlers/index.go +++ b/internal/server/handlers/index.go @@ -193,26 +193,26 @@ func (h *BaseHandler) Index(c echo.Context) error { } timeRangeQuery := c.QueryParam("time-range") - if timeRangeQuery != "48hours" && timeRangeQuery != "90days" && timeRangeQuery != "90minutes" { - timeRangeQuery = "90days" + if timeRangeQuery != "48hours" && timeRangeQuery != "60days" && timeRangeQuery != "60minutes" { + timeRangeQuery = "60days" } var timeBuckets int var timeInterval time.Duration var timeRange services.TargetHistoryDateRange switch timeRangeQuery { - case "90days": - timeRange = services.TargetHistoryDateRange90Days + case "60days": + timeRange = services.TargetHistoryDateRange60Days timeInterval = time.Hour * 24 - timeBuckets = 90 + timeBuckets = 60 case "48hours": timeRange = services.TargetHistoryDateRange48Hours timeInterval = time.Hour timeBuckets = 48 - case "90minutes": - timeRange = services.TargetHistoryDateRange90Minutes + case "60minutes": + timeRange = services.TargetHistoryDateRange60Minutes timeInterval = time.Minute - timeBuckets = 90 + timeBuckets = 60 } overallOutcome := HistoryOutcomeUnknown diff --git a/internal/server/handlers/settings_targets.go b/internal/server/handlers/settings_targets.go index 453639e..734e77d 100644 --- a/internal/server/handlers/settings_targets.go +++ b/internal/server/handlers/settings_targets.go @@ -83,7 +83,7 @@ func (h *BaseHandler) SettingsTargetsDescribeGET(c echo.Context) error { return err } - history, err := services.GetTargetHistoryForTarget(context.Background(), h.db, slug, services.TargetHistoryDateRange90Minutes) + history, err := services.GetTargetHistoryForTarget(context.Background(), h.db, slug, services.TargetHistoryDateRange60Minutes) if err != nil { return err } diff --git a/internal/server/services/targets_history.go b/internal/server/services/targets_history.go index 4ecf9b4..8970437 100644 --- a/internal/server/services/targets_history.go +++ b/internal/server/services/targets_history.go @@ -18,20 +18,20 @@ type TargetHistory struct { type TargetHistoryDateRange string const ( - TargetHistoryDateRange90Days TargetHistoryDateRange = "90_DAYS" + TargetHistoryDateRange60Days TargetHistoryDateRange = "60_DAYS" TargetHistoryDateRange48Hours TargetHistoryDateRange = "48_HOURS" - TargetHistoryDateRange90Minutes TargetHistoryDateRange = "90_MINUTES" + TargetHistoryDateRange60Minutes TargetHistoryDateRange = "60_MINUTES" ) func GetTargetHistoryForTarget(ctx context.Context, db *sqlx.DB, targetId string, dateRange TargetHistoryDateRange) ([]*TargetHistory, error) { dateRangeFilter := "" switch dateRange { - case TargetHistoryDateRange90Days: - dateRangeFilter = "AND strftime('%Y-%m-%dT%H:%M:%fZ', th.created_at) >= datetime('now', 'localtime', '-90 days')" + case TargetHistoryDateRange60Days: + dateRangeFilter = "AND strftime('%Y-%m-%dT%H:%M:%fZ', th.created_at) >= datetime('now', 'localtime', '-60 days')" case TargetHistoryDateRange48Hours: dateRangeFilter = "AND strftime('%Y-%m-%dT%H:%M:%fZ', th.created_at) >= datetime('now', 'localtime', '-48 hours')" - case TargetHistoryDateRange90Minutes: - dateRangeFilter = "AND strftime('%Y-%m-%dT%H:%M:%fZ', th.created_at) >= datetime('now', 'localtime', '-90 minutes')" + case TargetHistoryDateRange60Minutes: + dateRangeFilter = "AND strftime('%Y-%m-%dT%H:%M:%fZ', th.created_at) >= datetime('now', 'localtime', '-60 minutes')" } var targetHistory []*TargetHistory diff --git a/web/static/css/main.css b/web/static/css/main.css index 52102cc..55cc37e 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -32,23 +32,12 @@ code { @apply font-mono text-sm bg-gray-100 rounded-lg p-1; } -.navbar { - @apply justify-center flex flex-wrap space-x-2 gap-2 mt-10; -} .navbar a { - @apply font-bold py-2 px-4 rounded-lg; -} -.navbar a:hover { - @apply bg-gray-200 shadow-inner; -} -.navbar a:focus { - @apply outline-none ring-2 ring-blue-700 text-blue-700; + @apply font-medium px-5 py-2 rounded-lg; + @apply text-center text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400; } .navbar a.active { - @apply bg-gray-300 text-black shadow; -} -.navbar a.active:hover { - @apply shadow; + @apply bg-white hover:bg-gray-300 shadow; } #page-index .targets .time-range > a { @@ -75,36 +64,36 @@ code { background: repeating-linear-gradient( 45deg, var(--color-red-300), - var(--color-red-300) 20%, - var(--color-red-400) 20%, - var(--color-red-400) 40% + var(--color-red-300) 10%, + var(--color-red-400) 10%, + var(--color-red-400) 20% ); } #page-index .history.down:hover > .bar { background: repeating-linear-gradient( 45deg, var(--color-red-400), - var(--color-red-400) 20%, - var(--color-red-500) 20%, - var(--color-red-500) 40% + var(--color-red-400) 10%, + var(--color-red-500) 10%, + var(--color-red-500) 20% ); } #page-index .history.degraded > .bar { background: repeating-linear-gradient( 0deg, var(--color-orange-300), - var(--color-orange-300) 20%, - var(--color-orange-400) 20%, - var(--color-orange-400) 40% + var(--color-orange-300) 10%, + var(--color-orange-400) 10%, + var(--color-orange-400) 20% ); } #page-index .history.degraded:hover > .bar { background: repeating-linear-gradient( 0deg, var(--color-orange-400), - var(--color-orange-400) 20%, - var(--color-orange-500) 20%, - var(--color-orange-500) 40% + var(--color-orange-400) 10%, + var(--color-orange-500) 10%, + var(--color-orange-500) 20% ); } diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index 1d92658..d73695c 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -1020,6 +1020,10 @@ video { height: min-content; } +.w-12 { + width: 3rem; +} + .w-20 { width: 5rem; } @@ -1133,6 +1137,12 @@ video { gap: 1px; } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .self-center { align-self: center; } @@ -1225,6 +1235,11 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); @@ -1371,6 +1386,11 @@ 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; @@ -1587,63 +1607,46 @@ code { line-height: 1.25rem; } -.navbar { - margin-top: 2.5rem; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.5rem; -} - -.navbar > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - .navbar a { border-radius: 0.5rem; + padding-left: 1.25rem; + padding-right: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - font-weight: 700; + font-weight: 500; + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + text-align: center; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); } .navbar a:hover { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); - --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: inset 0 2px 4px 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); + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } .navbar a:focus { - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --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(29 78 216 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity)); } .navbar a.active { --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(0 0 0 / 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); } .navbar a.active:hover { - --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); + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } #page-index .targets .time-range > a { @@ -1720,9 +1723,9 @@ code { background: repeating-linear-gradient( 45deg, var(--color-red-300), - var(--color-red-300) 20%, - var(--color-red-400) 20%, - var(--color-red-400) 40% + var(--color-red-300) 10%, + var(--color-red-400) 10%, + var(--color-red-400) 20% ); } @@ -1730,9 +1733,9 @@ code { background: repeating-linear-gradient( 45deg, var(--color-red-400), - var(--color-red-400) 20%, - var(--color-red-500) 20%, - var(--color-red-500) 40% + var(--color-red-400) 10%, + var(--color-red-500) 10%, + var(--color-red-500) 20% ); } @@ -1740,9 +1743,9 @@ code { background: repeating-linear-gradient( 0deg, var(--color-orange-300), - var(--color-orange-300) 20%, - var(--color-orange-400) 20%, - var(--color-orange-400) 40% + var(--color-orange-300) 10%, + var(--color-orange-400) 10%, + var(--color-orange-400) 20% ); } @@ -1750,9 +1753,9 @@ code { background: repeating-linear-gradient( 0deg, var(--color-orange-400), - var(--color-orange-400) 20%, - var(--color-orange-500) 20%, - var(--color-orange-500) 40% + var(--color-orange-400) 10%, + var(--color-orange-500) 10%, + var(--color-orange-500) 20% ); } @@ -2130,6 +2133,10 @@ code { justify-content: center; } + .sm\:justify-evenly { + justify-content: space-evenly; + } + .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; diff --git a/web/templates/components/base.tmpl b/web/templates/components/base.tmpl index a6838df..89e888d 100644 --- a/web/templates/components/base.tmpl +++ b/web/templates/components/base.tmpl @@ -17,21 +17,29 @@ - +
+ zdravko.mnts.dev + + Profile Image +
{{ template "main" . }}
-