From 482d8a30741948a4744b2f4dae4a5c1d9e7d010a Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Tue, 21 Apr 2020 22:19:17 -0700
Subject: [PATCH 1/3] use mylog::Format::from_str

---
 Cargo.lock  |  2 +-
 src/main.rs | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e3df6bb..690dbd1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1292,7 +1292,7 @@ dependencies = [
 [[package]]
 name = "mylog"
 version = "0.1.0"
-source = "git+https://github.com/scottlamb/mylog#00d39a9ca0c1f399c453360de3f1e7f61db0d50d"
+source = "git+https://github.com/scottlamb/mylog#bebeacb74efc127f9c16e57e38886c8e6ba8a95c"
 dependencies = [
  "chrono",
  "log",
diff --git a/src/main.rs b/src/main.rs
index 231d0e6..a3f6eda 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -31,6 +31,7 @@
 #![cfg_attr(all(feature="nightly", test), feature(test))]
 
 use log::{error, info};
+use std::str::FromStr;
 use structopt::StructOpt;
 
 mod body;
@@ -93,20 +94,12 @@ impl Args {
     }
 }
 
-fn parse_fmt<S: AsRef<str>>(fmt: S) -> Option<mylog::Format> {
-    match fmt.as_ref() {
-        "google" => Some(mylog::Format::Google),
-        "google-systemd" => Some(mylog::Format::GoogleSystemd),
-        _ => None,
-    }
-}
-
 fn main() {
     let args = Args::from_args();
     let mut h = mylog::Builder::new()
         .set_format(::std::env::var("MOONFIRE_FORMAT")
-                    .ok()
-                    .and_then(parse_fmt)
+                    .map_err(|_| ())
+                    .and_then(|s| mylog::Format::from_str(&s))
                     .unwrap_or(mylog::Format::Google))
         .set_spec(&::std::env::var("MOONFIRE_LOG").unwrap_or("info".to_owned()))
         .build();

From be479a1ffedde764f34d282146801af8a8feb982 Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Sun, 3 May 2020 16:45:59 -0700
Subject: [PATCH 2/3] consistently indent css by 2 spaces

matching the Google CSS style guide
---
 ui-src/assets/index.css | 54 ++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/ui-src/assets/index.css b/ui-src/assets/index.css
index e18d65b..1165ea2 100644
--- a/ui-src/assets/index.css
+++ b/ui-src/assets/index.css
@@ -1,54 +1,54 @@
 body {
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
 #nav {
-    float: left;
+  float: left;
 }
 #session {
-    float: right;
+  float: right;
 }
 
 #datetime .ui-datepicker {
-    width: 100%;
+  width: 100%;
 }
 
 #videos {
-    display: inline-block;
-    padding-top: 0.5em;
-    padding-left: 1em;
-    padding-right: 1em;
+  display: inline-block;
+  padding-top: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
 }
 #videos tbody:after {
-    content: "";
-    display: block;
-    height: 3ex;
+  content: "";
+  display: block;
+  height: 3ex;
 }
 table.videos {
-    border-collapse: collapse;
+  border-collapse: collapse;
 }
 tbody tr.name {
-    font-size: 110%;
-    background-color: #eee;
+  font-size: 110%;
+  background-color: #eee;
 }
 tbody tr.name th {
   border-bottom: 1px solid #666;
 }
 tbody tr.hdr {
   color: #555;
-    font-size: 90%;
+  font-size: 90%;
 }
 tr.r:hover {
-    background-color: #ddd;
+  background-color: #ddd;
 }
 tr.r td {
-    font-size: 80%;
-    cursor: pointer;
+  font-size: 80%;
+  cursor: pointer;
 }
 tr.r th,
 tr.r td {
   border: 0;
-    padding: 0.5ex 1.5em;
-    text-align: right;
+  padding: 0.5ex 1.5em;
+  text-align: right;
 }
 
 fieldset {
@@ -60,21 +60,21 @@ fieldset legend {
 }
 
 #from, #to {
-    padding-right: 0.75em;
+  padding-right: 0.75em;
 }
 #st {
-    width: 100%;
+  width: 100%;
 }
 
 #range {
-    padding: 0.5em 0;
+  padding: 0.5em 0;
 }
 .ui-dialog .ui-dialog-content {
-    overflow: visible; /* remove stupid scroll bars when resizing. */
-    padding: 0;
+  overflow: visible; /* remove stupid scroll bars when resizing. */
+  padding: 0;
 }
 
 video {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }

From 1b464fd5559d2e87c17ce1c0509ce080b085de11 Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Mon, 4 May 2020 18:06:12 -0700
Subject: [PATCH 3/3] 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
---
 ui-src/NVRApplication.js |  7 ++++++-
 ui-src/assets/index.css  | 18 ++++++++++++++++++
 ui-src/assets/index.html |  4 +++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/ui-src/NVRApplication.js b/ui-src/NVRApplication.js
index ca92ee3..4a84931 100644
--- a/ui-src/NVRApplication.js
+++ b/ui-src/NVRApplication.js
@@ -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,
diff --git a/ui-src/assets/index.css b/ui-src/assets/index.css
index 1165ea2..0654334 100644
--- a/ui-src/assets/index.css
+++ b/ui-src/assets/index.css
@@ -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%;
diff --git a/ui-src/assets/index.html b/ui-src/assets/index.html
index fa1ac44..6031f9a 100644
--- a/ui-src/assets/index.html
+++ b/ui-src/assets/index.html
@@ -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="#">