improve: styling of dashboard (#11)

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>
deployKF · May 19, 2024 · 8a6ccf3 · 8a6ccf3
1 parent 430534e
commit 8a6ccf3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/dashboard/public/components/main-page.css b/dashboard/public/components/main-page.css
@@ -58,13 +58,6 @@ app-drawer-layout[narrow] #MainDrawer {
     }
 }
 
-app-drawer-layout[bleed] #MainDrawer {
-    background: var(--primary-background-color);
-    --app-drawer-content-container: {
-        background: transparent !important;
-    }
-}
-
 #PageLoader {
     @apply --layout-fullbleed;
     @apply --layout-center-center;
@@ -107,7 +100,7 @@ app-drawer-layout[bleed] #MainDrawer {
 }
 
 #MainDrawer .inner-menu-item {
-    padding-left: 65px;
+    padding-left: 60px;
     margin: 0;
     font-size: 13px;
     min-height: 30px;

diff --git a/dashboard/public/components/main-page.js b/dashboard/public/components/main-page.js
@@ -460,7 +460,16 @@ export class MainPage extends utilitiesMixin(PolymerElement) {
     }
 
     _toggleMenuSection(e) {
-        e.target.nextElementSibling.toggle();
+        // look upwards until we find <paper-item>
+        let el = e.target;
+        while (el && el.tagName !== 'PAPER-ITEM') {
+            el = el.parentElement;
+        }
+
+        // if we found paper-item, the next sibling is the section
+        if (el) {
+            el.nextElementSibling.toggle();
+        }
     }
 
     /**

diff --git a/dashboard/public/components/main-page.pug b/dashboard/public/components/main-page.pug
@@ -32,7 +32,8 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                     iron-collapse
                         template(is='dom-repeat', items='[[item.items]]')
                             iframe-link(href$="[[_buildHref(item.link, queryParams.*)]]")
-                                paper-item.menu-item.inner-menu-item [[item.text]]
+                                paper-item.menu-item.inner-menu-item
+                                    | [[item.text]]
                 template(is='dom-if', if='[[!equals(item.type, "section")]]')
                     iframe-link(href$="[[_buildHref(item.link, queryParams.*)]]")
                         paper-item.menu-item
@@ -49,18 +50,21 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                         paper-item.menu-item
                             iron-icon(icon='[[item.icon]]')
                             | [[item.text]]
+                            iron-icon.external(icon="launch")
             template(is='dom-if', if='[[equals(isolationMode, "multi-user")]]')
                 aside.divider
                 a(href$='[[_buildHref("/manage-users", queryParams.*)]]', tabindex='-1')
                     paper-item.menu-item#contributors Manage Contributors
             aside.divider
             a(href='https://www.deploykf.org/',
                 tabindex='-1', target="_blank")
-                paper-item.menu-item deployKF Website
+                paper-item.menu-item
+                    | deployKF Website
                     iron-icon.external(icon="launch")
             a(href='https://github.com/deployKF/deployKF',
                 tabindex='-1', target="_blank")
-                paper-item.menu-item deployKF GitHub
+                paper-item.menu-item
+                    | deployKF GitHub
                     iron-icon.external(icon="launch")
     app-header-layout(fullbleed)
         app-header(slot='header', hides, hidden$='[[notFoundInIframe]]')