From e177cbd042b2c04a1a3ef84da1c808183b898bd7 Mon Sep 17 00:00:00 2001 From: Scott Lamb Date: Mon, 4 May 2020 23:06:12 -0700 Subject: [PATCH] improve mobile-friendliness (#68) nav div changes: * 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 open zoomed by default trim some arguably less important columns on narrow displays, and reduce some horizontal padding always show videos full-screen on narrow displays --- ui-src/NVRApplication.js | 14 +++++++++-- ui-src/assets/index.css | 37 ++++++++++++++++++++++------- ui-src/assets/index.html | 34 ++++++++++++++------------ ui-src/lib/views/RecordingsView.js | 4 ++-- ui-src/lib/views/VideoDialogView.js | 23 ++++++++++++++---- 5 files changed, 81 insertions(+), 31 deletions(-) diff --git a/ui-src/NVRApplication.js b/ui-src/NVRApplication.js index ca92ee3..14a40df 100644 --- a/ui-src/NVRApplication.js +++ b/ui-src/NVRApplication.js @@ -143,9 +143,14 @@ function onSelectVideo(nvrSettingsView, camera, streamType, range, recording) { ); const videoTitle = camera.shortName + ', ' + formattedStart + ' to ' + formattedEnd; + const maxWidth = window.innerWidth / 2; + let width = recording.videoSampleEntryWidth; + while (width > maxWidth) { + width /= 2; + } new VideoDialogView() .attach($('body')) - .play(videoTitle, recording.videoSampleEntryWidth / 4, url); + .play(videoTitle, width, url); } /** @@ -220,7 +225,7 @@ function updateSession(session) { return; } sessionBar.append($('').text(session.username)); - const logout = $('logout'); + const logout = $('logout'); logout.click(() => { api .logout(session.csrf) @@ -377,6 +382,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..96852a7 100644 --- a/ui-src/assets/index.css +++ b/ui-src/assets/index.css @@ -1,12 +1,24 @@ body { font-family: Arial, Helvetica, sans-serif; } +#top { + width: 100%; + padding-bottom: 2ex; +} +#toggle-nav { + font-size: 1.25em; + cursor: pointer; +} #nav { float: left; + margin: 0 0.5em 0.5ex 0; } #session { float: right; } +#logout { + cursor: pointer; +} #datetime .ui-datepicker { width: 100%; @@ -14,17 +26,15 @@ body { #videos { display: inline-block; - padding-top: 0.5em; - padding-left: 1em; - padding-right: 1em; } #videos tbody:after { content: ""; display: block; height: 3ex; } -table.videos { +table#videos { border-collapse: collapse; + /*border-spacing: 0.5em 0.5ex;*/ } tbody tr.name { font-size: 110%; @@ -47,8 +57,8 @@ tr.r td { tr.r th, tr.r td { border: 0; - padding: 0.5ex 1.5em; text-align: right; + padding: 0.5ex 1.5em; } fieldset { @@ -62,9 +72,6 @@ fieldset legend { #from, #to { padding-right: 0.75em; } -#st { - width: 100%; -} #range { padding: 0.5em 0; @@ -78,3 +85,17 @@ video { width: 100%; height: 100%; } + +@media only screen and (max-width: 768px) { + #nav { + float: none; + display: none; + } + .resolution, .frameRate, .size { + display: none; + } + tr.r th, + tr.r td { + padding: 0.5ex 0.5em; + } +} diff --git a/ui-src/assets/index.html b/ui-src/assets/index.html index fa1ac44..ef0b63a 100644 --- a/ui-src/assets/index.html +++ b/ui-src/assets/index.html @@ -3,9 +3,12 @@ Moonfire NVR + -
+
+ ☰ +