feat: slight design improvements

mentos1386 · May 9, 2024 · b6058d4 · b6058d4
1 parent 7335b7b
commit b6058d4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/internal/handlers/settings.go b/internal/handlers/settings.go
@@ -45,8 +45,8 @@ var SettingsPages = []*components.Page{
 
 var SettingsNavbar = []*components.Page{
 	GetPageByTitle(SettingsPages, "Overview"),
-	GetPageByTitle(SettingsPages, "Triggers"),
 	GetPageByTitle(SettingsPages, "Monitors"),
+	GetPageByTitle(SettingsPages, "Triggers"),
 	GetPageByTitle(SettingsPages, "Notifications"),
 	GetPageByTitle(SettingsPages, "Worker Groups"),
 	GetPageByTitle(SettingsPages, "Temporal"),

diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css
@@ -785,10 +785,6 @@ video {
   width: 100%;
 }
 
-.max-w-screen-lg {
-  max-width: 1024px;
-}
-
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -837,6 +833,10 @@ video {
   justify-content: center;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1213,6 +1213,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -1688,6 +1693,10 @@ code {
   letter-spacing: 0.05em;
 }
 
+.\*\:w-full > * {
+  width: 100%;
+}
+
 .last-of-type\:border-0:last-of-type {
   border-width: 0px;
 }

diff --git a/web/templates/components/base.tmpl b/web/templates/components/base.tmpl
@@ -16,7 +16,7 @@
       <title>Zdravko - {{ $title }}</title>
       <link rel="stylesheet" href="/static/css/tailwind.css" />
     </head>
-    <body class="bg-gray-100">
+    <body class="bg-gray-100 grid justify-items-center *:w-full">
       <nav class="navbar">
         {{ range .Navbar }}
           <a

diff --git a/web/templates/components/settings.tmpl b/web/templates/components/settings.tmpl
@@ -8,7 +8,7 @@
 
 
   <div
-    class="container max-w-screen-lg mt-8 lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
+    class="mx-8 mt-8 max-w-screen-xl lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
   >
     <ul class="sidebar">
       {{ range .SettingsSidebar }}
@@ -18,8 +18,13 @@
             {{ if $active }}aria-current="true"{{ end }}
             href="{{ .Path }}"
             class="{{ if $active }}active{{ end }}"
+            {{ if eq .Title "Temporal" }}target="_blank" rel="noreferrer noopener"{{ end }}
           >
             {{ .Title }}
+            {{ if eq .Title "Monitors" }}<span class="text-slate-400">(3)</span>{{ end }}
+            {{ if eq .Title "Triggers" }}<span class="text-slate-400">(3)</span>{{ end }}
+            {{ if eq .Title "Notifications" }}<span class="text-slate-400">(3)</span>{{ end }}
+            {{ if eq .Title "Worker Groups" }}<span class="text-slate-400">(3)</span>{{ end }}
           </a>
         </li>
       {{ end }}