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 {
display: grid;
grid-template-columns: min-content;
grid-template-rows: 38px
48px
38px
48px
38px
48px
38px
48px
38px
48px
;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: repeat(32, min-content);
align-items: start;
grid-area: menu;
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;
width: 32px;
}
#menu .label {
#menu .entry > a .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;

42
static/less/main.less
View File

@ -9,29 +9,29 @@
#menu {
display: grid;
grid-template-columns: min-content;
grid-template-rows:
38px
48px
38px
48px
38px
48px
38px
48px
38px
48px
;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: repeat(32, min-content);
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,11 +41,7 @@
.label {
font-size: 0.9em;
font-weight: bold;
a { color: #777; }
&.selected {
a { color: @text2; }
}
}
}
}

40
views/components/menu.gotmpl
View File

@ -1,18 +1,38 @@
{{ 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>
<div class="entry {{ if eq .MENU "index" }}selected{{ end }}">
<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="label {{ if eq .MENU "problems" }}selected{{ end }}"><a href="/problems">Problems</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">
<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="label {{ if eq .MENU "datapoints" }}selected{{ end }}"><a href="/datapoints">Datapoints</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">
<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="label {{ if eq .MENU "triggers" }}selected{{ end }}"><a href="/triggers">Triggers</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">
<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="label {{ if eq .MENU "configuration" }}selected{{ end }}"><a href="/configuration">Config</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">
<div class="label">Config</div>
</a>
</div>
</div>
{{ end }}