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

Updated menu UI

Browse Source
This commit is contained in:
Magnus Åhall 2024-05-22 07:49:50 +02:00
parent 211e4978f3
commit 37c72f3ab1
3 changed files with 77 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
static/css/main.css
View File

@ -105,42 +105,36 @@ label {
} }
#menu { #menu {
display: grid; 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; align-items: start;
grid-area: menu; grid-area: menu;
background: #202020; 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; display: block;
width: 32px; width: 32px;
} }
#menu .label { #menu .entry > a .label {
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
} }
#menu .label a {
color: #777;
}
#menu .label.selected a {
color: #f7edd7;
}
#page { #page {
grid-area: content; grid-area: content;
padding: 32px; padding: 32px;

42
static/less/main.less
View File

@ -9,29 +9,29 @@
#menu { #menu {
display: grid; 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; align-items: start;
grid-area: menu; grid-area: menu;
background: @bg2; background: @bg2;
.entry {
&.selected {
background: @bg3;
a { color: @text2 !important; }
}
&>a {
display: grid;
justify-items: center;
grid-template-rows:
38px
16px
;
padding: 16px; padding: 16px;
color: #777;
text-decoration: none;
img { img {
display: block; display: block;
@ -41,11 +41,7 @@
.label { .label {
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
}
a { color: #777; }
&.selected {
a { color: @text2; }
} }
} }
} }

40
views/components/menu.gotmpl
View File

@ -1,18 +1,38 @@
{{ define "menu" }} {{ define "menu" }}
<div id="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> </div>
{{ end }} {{ end }}