go.mod

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

static/css/main.css

@@ -105,36 +105,42 @@ label {
 }
 #menu {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: min-content;
-  grid-template-rows: repeat(32, min-content);
+  grid-template-rows: 38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+	;
+  justify-items: center;
   align-items: start;
   grid-area: menu;
   background: #202020;
-}
-#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 {
+#menu img {
   display: block;
   width: 32px;
 }
-#menu .entry > a .label {
+#menu .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;
@@ -174,11 +180,6 @@ 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,29 +9,29 @@
 
 #menu {
 	display: grid;
-	grid-template-columns: 1fr;
+	grid-template-columns: min-content;
-	grid-template-rows: repeat(32, min-content);
+	grid-template-rows:
+		38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+
+		38px
+		48px
+	;
+	justify-items: center;
 	align-items: start;
 
 	grid-area: menu;
 	background: @bg2;
-
-	.entry {
-		&.selected {
-			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;
@@ -41,7 +41,11 @@
 	.label {
 		font-size: 0.9em;
 		font-weight: bold;
-			}
+
+		a { color: #777; }
+
+		&.selected {
+			a { color: @text2; }
 		}
 	}
 }
@@ -91,12 +95,6 @@
 
 		.section {
 			margin: 8px 16px;
-			margin-top: 12px;
-			margin-bottom: 20px;
-
-			&:last-child {
-				margin-bottom: 12px;
-			}
 
 			.create {
 				display: grid;

views/components/menu.gotmpl

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