magnus/smon
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 6 Wiki Activity

UI changes, bumped to v11

Browse Source
This commit is contained in:
Magnus Åhall 2024-05-22 07:32:53 +02:00
parent 458769c6e5
commit 211e4978f3
6 changed files with 157 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main.go
View File

@ -26,7 +26,7 @@ import (
"time"
)
const VERSION = "v10"
const VERSION = "v11"
var (
logger *slog.Logger

35
static/css/main.css
View File

@ -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;

51
static/images/datapoints.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

59
static/images/datapoints_selected.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

37
static/less/main.less
View File

@ -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 {

9
views/components/menu.gotmpl
View File

@ -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 }}