From 539dea68fc30bd298103931222e5463b9a938aa2 Mon Sep 17 00:00:00 2001
From: John Benediktsson <mrjbq7@gmail.com>
Date: Sun, 1 Mar 2020 12:12:08 -0800
Subject: [PATCH] webapps.wiki: some responsive css (and JS for hamburger
 menu).

---
 extra/webapps/wiki/wiki-common.xml   |  5 +++++
 extra/webapps/wiki/wiki-contents.css | 23 +++++++++++++++++++++++
 extra/webapps/wiki/wiki-contents.js  | 27 +++++++++++++++++++++++++++
 extra/webapps/wiki/wiki.css          |  2 +-
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 extra/webapps/wiki/wiki-contents.js

diff --git a/extra/webapps/wiki/wiki-common.xml b/extra/webapps/wiki/wiki-common.xml
index b5325e91a1..42ebbb60a9 100644
--- a/extra/webapps/wiki/wiki-common.xml
+++ b/extra/webapps/wiki/wiki-common.xml
@@ -11,6 +11,7 @@
     <div id="left">
 
         <t:if t:value="contents">
+            <t:script t:include="resource:extra/webapps/wiki/wiki-contents.js" />
 
             <t:style t:include="resource:extra/webapps/wiki/wiki-contents.css" />
             <div class="contents">
@@ -32,6 +33,10 @@
 
         <div class="navbar">
 
+            <t:if t:value="contents">
+                <img id="menu" onclick="toggleSidebar()" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMycHgiIHdpZHRoPSIzMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCwxMGgyNGMxLjEwNCwwLDItMC44OTYsMi0ycy0wLjg5Ni0yLTItMkg0QzIuODk2LDYsMiw2Ljg5NiwyLDhTMi44OTYsMTAsNCwxMHogTTI4LDE0SDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDIgIHMwLjg5NiwyLDIsMmgyNGMxLjEwNCwwLDItMC44OTYsMi0yUzI5LjEwNCwxNCwyOCwxNHogTTI4LDIySDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDJzMC44OTYsMiwyLDJoMjRjMS4xMDQsMCwyLTAuODk2LDItMiAgUzI5LjEwNCwyMiwyOCwyMnoiLz48L3N2Zz4K" />
+            </t:if>
+
             <t:a t:href="$wiki">Front Page</t:a>
             <t:a t:href="$wiki/articles">All Articles</t:a>
             <t:a t:href="$wiki/changes">Recent Changes</t:a>
diff --git a/extra/webapps/wiki/wiki-contents.css b/extra/webapps/wiki/wiki-contents.css
index c53dcfff34..f483883af2 100644
--- a/extra/webapps/wiki/wiki-contents.css
+++ b/extra/webapps/wiki/wiki-contents.css
@@ -8,3 +8,26 @@
 #right {
     margin-left: 200px;
 }
+
+.navbar img {
+    margin: -15px;
+    margin-top: -20px;
+    margin-right: 0px;
+    padding: 15px;
+    vertical-align: middle;
+    display: none;
+}
+
+@media screen and (max-width: 600px) {
+    #left {
+        display: none;
+    }
+
+    #right {
+        margin-left: 0;
+    }
+
+    .navbar img {
+        display: inline;
+    }
+}
diff --git a/extra/webapps/wiki/wiki-contents.js b/extra/webapps/wiki/wiki-contents.js
new file mode 100644
index 0000000000..f2301587d0
--- /dev/null
+++ b/extra/webapps/wiki/wiki-contents.js
@@ -0,0 +1,27 @@
+
+function resetSidebar() {
+    var l = document.getElementById("left");
+    var m = document.getElementById("menu");
+    l.style.position = "";
+    l.style.display = "";
+    l.style.marginTop = "";
+    m.style.backgroundColor = "";
+}
+
+window.addEventListener("resize", resetSidebar);
+
+function toggleSidebar() {
+    var l = document.getElementById("left");
+    var m = document.getElementById("menu");
+    if (l.style.display === "") {
+        l.style.position = "absolute";
+        l.style.display = "inline";
+        l.style.marginTop = "40px";
+        m.style.backgroundColor = "#f3f2ea";
+    } else {
+        l.style.position = "";
+        l.style.display = "";
+        l.style.marginTop = "";
+        m.style.backgroundColor = "";
+    }
+}
diff --git a/extra/webapps/wiki/wiki.css b/extra/webapps/wiki/wiki.css
index 5e61296497..e93746421c 100644
--- a/extra/webapps/wiki/wiki.css
+++ b/extra/webapps/wiki/wiki.css
@@ -3,7 +3,7 @@
 }
 
 #right {
-    width: 800px;
+    max-width: 800px;
 }
 
 .comparison th {