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 @@ + inkscape:current-layer="layer1" + showgrid="false" /> chart-timeline-variant + style="fill:#777777;fill-opacity:1;stroke-width:0.384844" /> + + + + + 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 @@ + inkscape:current-layer="layer1" + showgrid="false" /> + transform="translate(-102.9229,-148.76801)"> file-chart + chart-timeline-variant + style="fill:#777777;fill-opacity:1;stroke-width:0.384844" /> + + + + + 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" }} {{ end }}