webapps.wiki: some responsive css (and JS for hamburger menu).

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>

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;
+    }
+}

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 = "";
+    }
+}

extra/webapps/wiki/wiki.css

@@ -3,7 +3,7 @@
 }
 
 #right {
-    width: 800px;
+    max-width: 800px;
 }
 
 .comparison th {