Small UI fix

go.mod

@@ -3,7 +3,7 @@ module smon
 go 1.22.0
 
 require (
-	git.gibonuddevalla.se/go/webservice v0.2.12
+	git.gibonuddevalla.se/go/webservice v0.2.15
 	git.gibonuddevalla.se/go/wrappederror v0.3.4
 	github.com/expr-lang/expr v1.16.5
 )

static/css/main.css

@@ -105,42 +105,36 @@ label {
 }
 #menu {
   display: grid;
-  grid-template-columns: min-content;
+  grid-template-columns: 1fr;
-  grid-template-rows: 38px
+  grid-template-rows: repeat(32, min-content);
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-	;
-  justify-items: center;
   align-items: start;
   grid-area: menu;
   background: #202020;
-  padding: 16px;
 }
-#menu img {
+#menu .entry.selected {
+  background: #333;
+}
+#menu .entry.selected a {
+  color: #f7edd7 !important;
+}
+#menu .entry > a {
+  display: grid;
+  justify-items: center;
+  grid-template-rows: 38px
+				16px
+			;
+  padding: 16px;
+  color: #777;
+  text-decoration: none;
+}
+#menu .entry > a img {
   display: block;
   width: 32px;
 }
-#menu .label {
+#menu .entry > a .label {
   font-size: 0.9em;
   font-weight: bold;
 }
-#menu .label a {
-  color: #777;
-}
-#menu .label.selected a {
-  color: #f7edd7;
-}
 #page {
   grid-area: content;
   padding: 32px;
@@ -180,6 +174,11 @@ label {
 }
 #areas .area .section {
   margin: 8px 16px;
+  margin-top: 12px;
+  margin-bottom: 20px;
+}
+#areas .area .section:last-child {
+  margin-bottom: 12px;
 }
 #areas .area .section .create {
   display: grid;

static/less/main.less

@@ -9,43 +9,39 @@
 
 #menu {
 	display: grid;
-	grid-template-columns: min-content;
+	grid-template-columns: 1fr;
-	grid-template-rows:
+	grid-template-rows: repeat(32, min-content);
-		38px
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-
-		38px
-		48px
-	;
-	justify-items: center;
 	align-items: start;
 
 	grid-area: menu;
 	background: @bg2;
-	padding: 16px;
-
-	img {
-		display: block;
-		width: 32px;
-	}
-
-	.label {
-		font-size: 0.9em;
-		font-weight: bold;
-
-		a { color: #777; }
 
+	.entry {
 		&.selected {
-			a { color: @text2; }
+			background: @bg3;
+			a { color: @text2 !important; }
+		}
+
+		&>a {
+			display: grid;
+			justify-items: center;
+			grid-template-rows:
+				38px
+				16px
+			;
+			padding: 16px;
+			color: #777;
+			text-decoration: none;
+
+			img {
+				display: block;
+				width: 32px;
+			}
+
+			.label {
+				font-size: 0.9em;
+				font-weight: bold;
+			}
 		}
 	}
 }
@@ -95,6 +91,12 @@
 
 		.section {
 			margin: 8px 16px;
+			margin-top: 12px;
+			margin-bottom: 20px;
+
+			&:last-child {
+				margin-bottom: 12px;
+			}
 
 			.create {
 				display: grid;

views/components/menu.gotmpl

@@ -1,18 +1,38 @@
 {{ define "menu" }}
 <div id="menu">
-	<a href="/"><img src="/images/{{ .VERSION }}/logo{{ if eq .MENU "index" }}_selected{{ end }}.svg"></a>
+	<div class="entry {{ if eq .MENU "index" }}selected{{ end }}">
-	<div class="label {{ if eq .MENU "index" }}selected{{ end }}"><a href="/">Start</a></div>
+		<a href="/">
+			<img src="/images/{{ .VERSION }}/logo{{ if eq .MENU "index" }}_selected{{ end }}.svg">
+			<div class="label">Start</div>
+		</a>
+	</div>
 
-	<a href="/problems"><img src="/images/{{ .VERSION }}/problems{{ if eq .MENU "problems" }}_selected{{ end }}.svg"></a>
+	<div class="entry {{ if eq .MENU "problems" }}selected{{ end }}">
-	<div class="label {{ if eq .MENU "problems" }}selected{{ end }}"><a href="/problems">Problems</a></div>
+		<a href="/problems">
+			<img src="/images/{{ .VERSION }}/problems{{ if eq .MENU "problems" }}_selected{{ end }}.svg">
+			<div class="label">Problems</div>
+		</a>
+	</div>
 
-	<a href="/datapoints"><img src="/images/{{ .VERSION }}/datapoints{{ if eq .MENU "datapoints" }}_selected{{ end }}.svg"></a>
+	<div class="entry {{ if eq .MENU "datapoints" }}selected{{ end }}">
-	<div class="label {{ if eq .MENU "datapoints" }}selected{{ end }}"><a href="/datapoints">Datapoints</a></div>
+		<a href="/datapoints">
+			<img src="/images/{{ .VERSION }}/datapoints{{ if eq .MENU "datapoints" }}_selected{{ end }}.svg">
+			<div class="label">Datapoints</div>
+		</a>
+	</div>
 
-	<a href="/triggers"><img src="/images/{{ .VERSION }}/triggers{{ if eq .MENU "triggers" }}_selected{{ end }}.svg"></a>
+	<div class="entry {{ if eq .MENU "triggers" }}selected{{ end }}">
-	<div class="label {{ if eq .MENU "triggers" }}selected{{ end }}"><a href="/triggers">Triggers</a></div>
+		<a href="/triggers">
+			<img src="/images/{{ .VERSION }}/triggers{{ if eq .MENU "triggers" }}_selected{{ end }}.svg">
+			<div class="label">Triggers</div>
+		</a>
+	</div>
 
-	<a href="/configuration"><img src="/images/{{ .VERSION }}/configuration{{ if eq .MENU "configuration" }}_selected{{ end }}.svg"></a>
+	<div class="entry {{ if eq .MENU "configuration" }}selected{{ end }}">
-	<div class="label {{ if eq .MENU "configuration" }}selected{{ end }}"><a href="/configuration">Config</a></div>
+		<a href="/configuration">
+			<img src="/images/{{ .VERSION }}/configuration{{ if eq .MENU "configuration" }}_selected{{ end }}.svg">
+			<div class="label">Config</div>
+		</a>
+	</div>
 </div>
 {{ end }}