From 1b464fd5559d2e87c17ce1c0509ce080b085de11 Mon Sep 17 00:00:00 2001 From: Scott Lamb Date: Mon, 4 May 2020 18:06:12 -0700 Subject: [PATCH] nav div changes for narrow devices * make it togglable (on all devices) by hamburger button * on narrow devices, make it closed by default and be at the top rather than on the left Improves #68 significantly --- ui-src/NVRApplication.js | 7 ++++++- ui-src/assets/index.css | 18 ++++++++++++++++++ ui-src/assets/index.html | 4 +++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/ui-src/NVRApplication.js b/ui-src/NVRApplication.js index ca92ee3..4a84931 100644 --- a/ui-src/NVRApplication.js +++ b/ui-src/NVRApplication.js @@ -220,7 +220,7 @@ function updateSession(session) { return; } sessionBar.append($('').text(session.username)); - const logout = $('logout'); + const logout = $('logout'); logout.click(() => { api .logout(session.csrf) @@ -377,6 +377,11 @@ export default class NVRApplication { * Start the application. */ start() { + let nav = $('#nav'); + + $('#toggle-nav').click(() => { + nav.toggle('slide'); + }); loginDialog = $('#login').dialog({ autoOpen: false, modal: true, diff --git a/ui-src/assets/index.css b/ui-src/assets/index.css index 1165ea2..0654334 100644 --- a/ui-src/assets/index.css +++ b/ui-src/assets/index.css @@ -1,12 +1,30 @@ +@media only screen and (max-width: 720px) { + #nav { + float: none; + display: none; + } +} + body { font-family: Arial, Helvetica, sans-serif; } +#top { + width: 100%; + padding-bottom: 2ex; +} +#toggle-nav { + font-size: 1.25em; + cursor: pointer; +} #nav { float: left; } #session { float: right; } +#logout { + cursor: pointer; +} #datetime .ui-datepicker { width: 100%; diff --git a/ui-src/assets/index.html b/ui-src/assets/index.html index fa1ac44..6031f9a 100644 --- a/ui-src/assets/index.html +++ b/ui-src/assets/index.html @@ -5,7 +5,9 @@ Moonfire NVR -
+
+ ☰ +