From 211e4978f3c6067edf7234d2bbc623572cfb3e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Wed, 22 May 2024 07:32:53 +0200
Subject: [PATCH] UI changes, bumped to v11

---
 main.go                               |  2 +-
 static/css/main.css                   | 35 +++++++++++++---
 static/images/datapoints.svg          | 51 ++++++++++++++++++-----
 static/images/datapoints_selected.svg | 59 ++++++++++++++++++++-------
 static/less/main.less                 | 37 ++++++++++++++---
 views/components/menu.gotmpl          |  9 ++++
 6 files changed, 157 insertions(+), 36 deletions(-)

diff --git a/main.go b/main.go
index 38e55e1..883457f 100644
--- a/main.go
+++ b/main.go
@@ -26,7 +26,7 @@ import (
 	"time"
 )
 
-const VERSION = "v10"
+const VERSION = "v11"
 
 var (
 	logger              *slog.Logger
diff --git a/static/css/main.css b/static/css/main.css
index 039c547..7d52a1c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -100,14 +100,29 @@ label {
 #layout {
   display: grid;
   grid-template-areas: "menu content";
-  grid-template-columns: 64px 1fr;
+  grid-template-columns: 96px 1fr;
   height: 100vh;
 }
 #menu {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-  gap: 24px;
+  display: grid;
+  grid-template-columns: 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;
   padding: 16px;
@@ -116,6 +131,16 @@ label {
   display: block;
   width: 32px;
 }
+#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;
diff --git a/static/images/datapoints.svg b/static/images/datapoints.svg
index 652e18f..d28f210 100644
--- a/static/images/datapoints.svg
+++ b/static/images/datapoints.svg
@@ -2,9 +2,9 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="32.000126"
-   height="17.454464"
-   viewBox="0 0 8.4667 4.6181601"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666667 8.4666664"
    version="1.1"
    id="svg1"
    inkscape:version="1.3.2 (091e20e, 2023-11-25)"
@@ -23,15 +23,16 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="8.516629"
-     inkscape:cx="7.9843798"
-     inkscape:cy="-12.622365"
+     inkscape:zoom="16"
+     inkscape:cx="0.5"
+     inkscape:cy="20.03125"
      inkscape:window-width="1916"
      inkscape:window-height="1041"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-x="1920"
+     inkscape:window-y="1080"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
+     inkscape:current-layer="layer1"
+     showgrid="false" />
   <defs
      id="defs1" />
   <g
@@ -44,8 +45,36 @@
     <title
        id="title1-6">chart-timeline-variant</title>
     <path
-       d="m 103.69267,151.8468 0.19242,0.0269 1.75874,-1.75874 c -0.0692,-0.25015 -0.004,-0.53493 0.20012,-0.73505 0.30018,-0.30402 0.78508,-0.30402 1.08527,0 0.20396,0.20012 0.26937,0.4849 0.20011,0.73505 l 0.98905,0.98905 0.19242,-0.0269 c 0.0692,0 0.13469,0 0.19242,0.0269 l 1.37389,-1.37389 c -0.0269,-0.0577 -0.0269,-0.1232 -0.0269,-0.19242 a 0.76968815,0.76968815 0 0 1 0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.7697,0.76968 c -0.0692,0 -0.13469,0 -0.19242,-0.0269 l -1.37389,1.3739 c 0.0269,0.0577 0.0269,0.1232 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.76969,0.76968 0.76968815,0.76968815 0 0 1 -0.76969,-0.76968 l 0.0269,-0.19242 -0.98904,-0.98905 c -0.1232,0.0269 -0.2617,0.0269 -0.38485,0 l -1.75873,1.75873 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.76969,-0.76968 z"
+       d="m 94.987379,153.53513 0.19242,0.0269 1.75874,-1.75874 c -0.0692,-0.25015 -0.004,-0.53493 0.20012,-0.73505 0.30018,-0.30402 0.78508,-0.30402 1.08527,0 0.20396,0.20012 0.26937,0.4849 0.20011,0.73505 l 0.98905,0.98905 0.19242,-0.0269 c 0.0692,0 0.13469,0 0.19242,0.0269 l 1.373891,-1.37389 c -0.0269,-0.0577 -0.0269,-0.1232 -0.0269,-0.19242 a 0.76968815,0.76968815 0 0 1 0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.7697,0.76968 c -0.0692,0 -0.13469,0 -0.19242,-0.0269 l -1.37389,1.3739 c 0.0269,0.0577 0.0269,0.1232 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.769691,0.76968 0.76968815,0.76968815 0 0 1 -0.76969,-0.76968 l 0.0269,-0.19242 -0.98904,-0.98905 c -0.1232,0.0269 -0.2617,0.0269 -0.38485,0 l -1.75873,1.75873 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.76969,-0.76968 z"
        id="path1-2"
-       style="stroke-width:0.384844;fill:#777777;fill-opacity:1" />
+       style="fill:#777777;fill-opacity:1;stroke-width:0.384844" />
+    <circle
+       style="fill:#777777;fill-opacity:1;stroke-width:0.329648"
+       id="path1"
+       cx="103.69108"
+       cy="156.46651"
+       r="0.76817483" />
+    <circle
+       style="fill:#777777;fill-opacity:1;stroke-width:0.329648"
+       id="circle1"
+       cx="110.62139"
+       cy="149.53618"
+       r="0.76817483" />
+    <circle
+       style="fill:#777777;fill-opacity:1;stroke-width:0.329648"
+       id="circle2"
+       cx="106.00118"
+       cy="151.84628"
+       r="0.76817483" />
+    <circle
+       style="fill:#777777;fill-opacity:1;stroke-width:0.329648"
+       id="circle3"
+       cx="108.31129"
+       cy="154.1564"
+       r="0.76817483" />
+    <path
+       style="fill:none;fill-opacity:1;stroke-width:0.90831457;stroke:#777777;stroke-opacity:1;stroke-dasharray:none;stroke-linecap:round"
+       d="m 103.69108,156.46651 2.3101,-4.62023 2.31011,2.31012 2.3101,-4.62022"
+       id="path3" />
   </g>
 </svg>
diff --git a/static/images/datapoints_selected.svg b/static/images/datapoints_selected.svg
index 49b417c..51b21a7 100644
--- a/static/images/datapoints_selected.svg
+++ b/static/images/datapoints_selected.svg
@@ -2,13 +2,13 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="8.4666996mm"
-   height="4.6181598mm"
-   viewBox="0 0 8.4666996 4.6181597"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666667 8.4666664"
    version="1.1"
    id="svg1"
    inkscape:version="1.3.2 (091e20e, 2023-11-25)"
-   sodipodi:docname="datapoints_selected.svg"
+   sodipodi:docname="datapoints.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -22,28 +22,59 @@
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     inkscape:zoom="3.1691345"
-     inkscape:cx="-0.9466307"
-     inkscape:cy="-2.3665768"
+     inkscape:document-units="px"
+     inkscape:zoom="16"
+     inkscape:cx="0.5"
+     inkscape:cy="20.03125"
      inkscape:window-width="1916"
      inkscape:window-height="1041"
-     inkscape:window-x="0"
-     inkscape:window-y="18"
+     inkscape:window-x="1920"
+     inkscape:window-y="1098"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
+     inkscape:current-layer="layer1"
+     showgrid="false" />
   <defs
      id="defs1" />
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-100.80625,-145.78542)">
+     transform="translate(-102.9229,-148.76801)">
     <title
        id="title1">file-chart</title>
+    <title
+       id="title1-6">chart-timeline-variant</title>
     <path
-       d="m 101.57602,148.86421 0.19242,0.0269 1.75874,-1.75874 c -0.0692,-0.25015 -0.004,-0.53493 0.20012,-0.73505 0.30018,-0.30402 0.78508,-0.30402 1.08527,0 0.20396,0.20012 0.26937,0.4849 0.20011,0.73505 l 0.98905,0.98905 0.19242,-0.0269 c 0.0692,0 0.13469,0 0.19242,0.0269 l 1.37389,-1.37389 c -0.0269,-0.0577 -0.0269,-0.1232 -0.0269,-0.19242 a 0.76968815,0.76968815 0 0 1 0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.7697,0.76968 c -0.0692,0 -0.13469,0 -0.19242,-0.0269 l -1.37389,1.3739 c 0.0269,0.0577 0.0269,0.1232 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.76969,0.76968 0.76968815,0.76968815 0 0 1 -0.76969,-0.76968 l 0.0269,-0.19242 -0.98904,-0.98905 c -0.1232,0.0269 -0.2617,0.0269 -0.38485,0 l -1.75873,1.75873 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.76969,-0.76968 z"
+       d="m 94.987379,153.53513 0.19242,0.0269 1.75874,-1.75874 c -0.0692,-0.25015 -0.004,-0.53493 0.20012,-0.73505 0.30018,-0.30402 0.78508,-0.30402 1.08527,0 0.20396,0.20012 0.26937,0.4849 0.20011,0.73505 l 0.98905,0.98905 0.19242,-0.0269 c 0.0692,0 0.13469,0 0.19242,0.0269 l 1.373891,-1.37389 c -0.0269,-0.0577 -0.0269,-0.1232 -0.0269,-0.19242 a 0.76968815,0.76968815 0 0 1 0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.7697,0.76968 c -0.0692,0 -0.13469,0 -0.19242,-0.0269 l -1.37389,1.3739 c 0.0269,0.0577 0.0269,0.1232 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.769691,0.76968 0.76968815,0.76968815 0 0 1 -0.76969,-0.76968 l 0.0269,-0.19242 -0.98904,-0.98905 c -0.1232,0.0269 -0.2617,0.0269 -0.38485,0 l -1.75873,1.75873 0.0269,0.19242 a 0.76968815,0.76968815 0 0 1 -0.7697,0.76969 0.76968815,0.76968815 0 0 1 -0.76969,-0.76969 0.76968815,0.76968815 0 0 1 0.76969,-0.76968 z"
        id="path1-2"
-       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#fb4934;fill-opacity:1;stroke-width:0.529166;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" />
+       style="fill:#777777;fill-opacity:1;stroke-width:0.384844" />
+    <circle
+       style="fill:#fb4934;fill-opacity:1;stroke-width:0.329648"
+       id="path1"
+       cx="103.69108"
+       cy="156.46651"
+       r="0.76817483" />
+    <circle
+       style="fill:#fb4934;fill-opacity:1;stroke-width:0.329648"
+       id="circle1"
+       cx="110.62139"
+       cy="149.53618"
+       r="0.76817483" />
+    <circle
+       style="fill:#fb4934;fill-opacity:1;stroke-width:0.329648"
+       id="circle2"
+       cx="106.00118"
+       cy="151.84628"
+       r="0.76817483" />
+    <circle
+       style="fill:#fb4934;fill-opacity:1;stroke-width:0.329648"
+       id="circle3"
+       cx="108.31129"
+       cy="154.1564"
+       r="0.76817483" />
+    <path
+       style="fill:none;fill-opacity:1;stroke-width:0.90831457;stroke:#fb4934;stroke-opacity:1;stroke-dasharray:none;stroke-linecap:round"
+       d="m 103.69108,156.46651 2.3101,-4.62023 2.31011,2.31012 2.3101,-4.62022"
+       id="path3" />
   </g>
 </svg>
diff --git a/static/less/main.less b/static/less/main.less
index 979e0f8..6900502 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -3,15 +3,31 @@
 #layout {
 	display: grid;
 	grid-template-areas: "menu content";
-	grid-template-columns: 64px 1fr;
+	grid-template-columns: 96px 1fr;
 	height: 100vh;
 }
 
 #menu {
-	display: flex;
-	flex-flow: column wrap;
-	justify-content: flex-start;
-	gap: 24px;
+	display: grid;
+	grid-template-columns: 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;
@@ -21,6 +37,17 @@
 		display: block;
 		width: 32px;
 	}
+
+	.label {
+		font-size: 0.9em;
+		font-weight: bold;
+
+		a { color: #777; }
+
+		&.selected {
+			a { color: @text2; }
+		}
+	}
 }
 
 #page {
diff --git a/views/components/menu.gotmpl b/views/components/menu.gotmpl
index 68144e1..2e75012 100644
--- a/views/components/menu.gotmpl
+++ b/views/components/menu.gotmpl
@@ -1,9 +1,18 @@
 {{ define "menu" }}
 <div id="menu">
 	<a href="/"><img src="/images/{{ .VERSION }}/logo{{ if eq .MENU "index" }}_selected{{ end }}.svg"></a>
+	<div class="label {{ if eq .MENU "index" }}selected{{ end }}"><a href="/">Start</a></div>
+
 	<a href="/problems"><img src="/images/{{ .VERSION }}/problems{{ if eq .MENU "problems" }}_selected{{ end }}.svg"></a>
+	<div class="label {{ if eq .MENU "problems" }}selected{{ end }}"><a href="/problems">Problems</a></div>
+
 	<a href="/datapoints"><img src="/images/{{ .VERSION }}/datapoints{{ if eq .MENU "datapoints" }}_selected{{ end }}.svg"></a>
+	<div class="label {{ if eq .MENU "datapoints" }}selected{{ end }}"><a href="/datapoints">Datapoints</a></div>
+
 	<a href="/triggers"><img src="/images/{{ .VERSION }}/triggers{{ if eq .MENU "triggers" }}_selected{{ end }}.svg"></a>
+	<div class="label {{ if eq .MENU "triggers" }}selected{{ end }}"><a href="/triggers">Triggers</a></div>
+
 	<a href="/configuration"><img src="/images/{{ .VERSION }}/configuration{{ if eq .MENU "configuration" }}_selected{{ end }}.svg"></a>
+	<div class="label {{ if eq .MENU "configuration" }}selected{{ end }}"><a href="/configuration">Config</a></div>
 </div>
 {{ end }}