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

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

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="#">