MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-02-03 01:46:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

nav div changes for narrow devices

Browse Source 
* 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
This commit is contained in:
Scott Lamb 2020-05-04 18:06:12 -07:00
parent be479a1ffe
commit 1b464fd555
3 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui-src/NVRApplication.js
View File

@ -220,7 +220,7 @@ function updateSession(session) {
return;
}
sessionBar.append($('<span id="session-username" />').text(session.username));
const logout = $('<a>logout</a>');
const logout = $('<a id="logout">logout</a>');
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,

18
ui-src/assets/index.css
View File

@ -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%;

4
ui-src/assets/index.html
View File

@ -5,7 +5,9 @@
<title>Moonfire NVR</title>
</head>
<body>
<div id="session">
<div id="top">
<a id="toggle-nav">&#x2630;</a>
<span id="session"></div>
</div>
<div id="nav">
<form action="#">