From 37c72f3ab1c36680133d6bfe17c8016bda8db710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Wed, 22 May 2024 07:49:50 +0200 Subject: [PATCH] Updated menu UI --- static/css/main.css | 46 +++++++++++++--------------- static/less/main.less | 58 +++++++++++++++++------------------- views/components/menu.gotmpl | 40 ++++++++++++++++++------- 3 files changed, 77 insertions(+), 67 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 7d52a1c..3f77c8b 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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; diff --git a/static/less/main.less b/static/less/main.less index 6900502..099162d 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -9,43 +9,39 @@ #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; - padding: 16px; - - img { - display: block; - width: 32px; - } - - .label { - font-size: 0.9em; - font-weight: bold; - - a { color: #777; } + .entry { &.selected { - a { color: @text2; } + 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; + width: 32px; + } + + .label { + font-size: 0.9em; + font-weight: bold; + } } } } diff --git a/views/components/menu.gotmpl b/views/components/menu.gotmpl index 2e75012..f00b4d6 100644 --- a/views/components/menu.gotmpl +++ b/views/components/menu.gotmpl @@ -1,18 +1,38 @@ {{ define "menu" }} {{ end }}