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; return;
} }
sessionBar.append($('<span id="session-username" />').text(session.username)); sessionBar.append($('<span id="session-username" />').text(session.username));
const logout = $('<a>logout</a>'); const logout = $('<a id="logout">logout</a>');
logout.click(() => { logout.click(() => {
api api
.logout(session.csrf) .logout(session.csrf)
@ -377,6 +377,11 @@ export default class NVRApplication {
* Start the application. * Start the application.
*/ */
start() { start() {
let nav = $('#nav');
$('#toggle-nav').click(() => {
nav.toggle('slide');
});
loginDialog = $('#login').dialog({ loginDialog = $('#login').dialog({
autoOpen: false, autoOpen: false,
modal: true, 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 { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
#top {
width: 100%;
padding-bottom: 2ex;
}
#toggle-nav {
font-size: 1.25em;
cursor: pointer;
}
#nav { #nav {
float: left; float: left;
} }
#session { #session {
float: right; float: right;
} }
#logout {
cursor: pointer;
}
#datetime .ui-datepicker { #datetime .ui-datepicker {
width: 100%; width: 100%;

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

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