From 7cfd6a72491a300f4f599d2b531e9f1dc215c7a0 Mon Sep 17 00:00:00 2001
From: Gareth Coles <gdude2002@gmail.com>
Date: Sat, 2 Jun 2018 14:45:11 +0100
Subject: [Wiki] Attempt to fix page views on mobile

---
 static/js/wiki.js        | 15 +++++++++++++++
 static/style.css         | 20 ++++++++++++++++++++
 templates/wiki/base.html |  6 +++++-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 static/js/wiki.js

diff --git a/static/js/wiki.js b/static/js/wiki.js
new file mode 100644
index 00000000..6ef4efa9
--- /dev/null
+++ b/static/js/wiki.js
@@ -0,0 +1,15 @@
+"use strict";
+
+(function(){  // Use a closure to avoid polluting global scope
+    const visible_class = "uk-visible@s";
+    const sidebar = document.getElementById("wiki-sidebar");
+    const display_button = document.getElementById("wiki-sidebar-button");
+
+    display_button.onclick = function() {
+        if (sidebar.classList.contains(visible_class)) {
+            sidebar.classList.remove(visible_class)
+        } else {
+            sidebar.classList.add(visible_class)
+        }
+    }
+}());
diff --git a/static/style.css b/static/style.css
index b404ced3..b76b2e57 100644
--- a/static/style.css
+++ b/static/style.css
@@ -226,4 +226,24 @@ td.right-border, th.right-border {
 
 textarea.fira-code {
     line-height: 1.3 !important;
+}
+
+#wiki-sidebar {
+    transition: width ease 1s;
+}
+
+#wiki-sidebar-button {
+    color: white;
+    height: 3rem;
+    width: 3rem;
+    min-height: 3rem;
+    min-width: 3rem;
+    align-items: center;
+    justify-content: center;
+    /*box-shadow: unset; */
+    border: 1px solid rgba(0, 0, 0, 0.11);
+}
+
+.code{
+    overflow-x: scroll;
 }
\ No newline at end of file
diff --git a/templates/wiki/base.html b/templates/wiki/base.html
index 126ab4a3..9fe4b4e9 100644
--- a/templates/wiki/base.html
+++ b/templates/wiki/base.html
@@ -31,7 +31,7 @@
         <div class="uk-offcanvas-content uk-flex uk-flex-column">
             {% include "main/navigation.html" %}
             <div class="uk-flex uk-flex-row uk-flex-1">
-                <div class="uk-card uk-card-body uk-flex-left uk-flex uk-card-primary">
+                <div class="uk-card uk-card-body uk-flex-left uk-flex uk-card-primary uk-visible@s" id="wiki-sidebar">
                     <ul class="uk-nav-default uk-nav-parent-icon" uk-nav id="wiki-nav">
                         {% if data is defined and current_page == "wiki.page" %}
                             {% if "headers" in data and data.headers %}
@@ -188,6 +188,9 @@
                         </li>
                     </ul>
                 </div>
+                <a class="uk-flex-left uk-flex uk-flex-column uk-background-primary uk-hidden@s uk-hidden@m uk-hidden@l uk-hidden@xl" id="wiki-sidebar-button">
+                    <div class="uk-flex-center"><i class="uk-icon fa-fw far fa-bars"></i></div>
+                </a>
                 <div class="uk-section" style="flex-grow: 1; margin: 0 1rem 1rem;">
                     {% block content %}{% endblock %}
                 </div>
@@ -209,5 +212,6 @@
         </footer>
 
         <script src='{{ static_file('js/countdown.js') }}'></script>
+        <script src='{{ static_file('js/wiki.js') }}'></script>
     </body>
 </html>
-- 
cgit v1.2.3