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 + -
+
+ ☰ +