Mobile optimisation (#33)

* Fix squished logo & button

* Hide terminal on mobile

* A misc set of fixes

* Newline in window.css
* Add extra_head block to base template
* Move script/CSS loading to extra_head block in error view
* Move terminal JS into window.onload
* Replace `var` with `let` and enable strict mode in 500.js
* Stop typewriter when the terminal is closed
* Move terminal onclick assignment to 500.js
* Move error page <style> contents into window.css
* Tidy up error page HTML and remove unmatched tags

6 files changed, 121 insertions, 90 deletions

diff --git a/static/css/window.css b/static/css/window.css
index 23d1efed..e3a3da6e 100644
--- a/static/css/window.css
+++ b/static/css/window.css
@@ -5,7 +5,7 @@
     -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
     -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
     box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
-    width: 800px;
+    width: 100%;
     margin: auto;
     margin-top: 20px;
     border: 1px solid #C1C2C2;
@@ -263,4 +263,15 @@ pre {
 
 .uk-background-muted, .error-header {
     background-color: #e8e8e8 !important;
+}
+
+code, pre {
+    width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+#terminal {
+    background-color: black;
+    color: white;
 }
\ No newline at end of file
diff --git a/static/js/500.js b/static/js/500.js
index 9aa5521e..856c900f 100644
--- a/static/js/500.js
+++ b/static/js/500.js
@@ -1,41 +1,47 @@
-var app = document.getElementById('error');
+"use strict";
 
-var typewriter = new Typewriter(app, {
-    loop: false,
-    deleteSpeed: 40,
-    typingSpeed: "natural",
-    devMode: false
-});
+window.onload = function () {
+    let app = document.getElementById('error');
 
+    let typewriter = new Typewriter(app, {
+        loop: false,
+        deleteSpeed: 40,
+        typingSpeed: "natural",
+        devMode: false
+    });
 
-typewriter.appendText('Python 3.6.4 (default, Jan  5 2018, 02:35:40)\n')
-    .appendText('[GCC 7.2.1 20171224] on darwin\n')
-    .appendText('Type "help", "copyright", "credits" or "license" for more information.\n')
-    .appendText('>>> ')
-    .pauseFor(1000)
-    .typeString("impor requests")
-    .deleteChars(9)
-    .typeString("t requests\n")
-    .appendText(">>> ")
-    .pauseFor(750)
-    .changeSettings({typingSpeed: "natural"})
-    .typeString("response = requests." + window._RequestMethod + "('https://pythim")
-    .deleteChars(2)
-    .typeString("ondiscord.con/")
-    .deleteChars(2)
-    .typeString("m" + window._Path + "')\n")
-    .pauseFor(1000)
-    .appendText("<Response [" + window._Code + "]>\n>>> ")
-    .typeString("# hmmmm")
-    .pauseFor(1000)
-    .deleteChars(7)
-    .pauseFor(1000)
-    .typeString("response.text\n")
-    .appendText("" + window._ErrorMsg + "\n>>> ")
-    .start();
+    function closeWindow() {
+        let app = document.getElementById("win");
+        let current_class = app.getAttribute("class");
+        app.setAttribute("class", current_class + " uk-animation-scale-up uk-animation-reverse");
+        typewriter.stop();
+    }
 
-function closeWindow(){
-    var app = document.getElementById("win");
-    var current_class = app.getAttribute("class");
-    app.setAttribute("class", current_class + " uk-animation-scale-up uk-animation-reverse")
-}
\ No newline at end of file
+    document.getElementById("terminal-close").onclick = closeWindow;
+
+    typewriter.appendText('Python 3.6.4 (default, Jan  5 2018, 02:35:40)\n')
+        .appendText('[GCC 7.2.1 20171224] on darwin\n')
+        .appendText('Type "help", "copyright", "credits" or "license" for more information.\n')
+        .appendText('>>> ')
+        .pauseFor(1000)
+        .typeString("impor requests")
+        .deleteChars(9)
+        .typeString("t requests\n")
+        .appendText(">>> ")
+        .pauseFor(750)
+        .changeSettings({typingSpeed: "natural"})
+        .typeString("response = requests." + window._RequestMethod + "('https://pythim")
+        .deleteChars(2)
+        .typeString("ondiscord.con/")
+        .deleteChars(2)
+        .typeString("m" + window._Path + "')\n")
+        .pauseFor(1000)
+        .appendText("<Response [" + window._Code + "]>\n>>> ")
+        .typeString("# hmmmm")
+        .pauseFor(1000)
+        .deleteChars(7)
+        .pauseFor(1000)
+        .typeString("response.text\n")
+        .appendText("" + window._ErrorMsg + "\n>>> ")
+        .start();
+};
diff --git a/templates/errors/error.html b/templates/errors/error.html
index 5845b915..1d1fef03 100644
--- a/templates/errors/error.html
+++ b/templates/errors/error.html
@@ -1,59 +1,62 @@
 {% extends 'main/base.html' %}
 {% block title %} Error {{ code }} {% endblock %}
 {% block beta_error %}{% endblock %}
-{% block content %}
+
+{% block extra_head %}
+    <link href="/static/css/window.css" rel="stylesheet" type="text/css"/>
+
     <script>
         window._RequestMethod = "{{ request.method.lower() }}";
         window._Code = {{ code }};
-        window._ErrorMsg = "{{ error_message | safe }}"
-        window._Path = "{{ request.path }}"
+        window._ErrorMsg = "{{ error_message | safe }}";
+        window._Path = "{{ request.path }}";
     </script>
+
+    <script src="/static/js/typewriter.js" type="application/javascript"></script>
+    <script src="/static/js/500.js" type="application/javascript"></script>
+{% endblock %}
+
+{% block content %}
     <div class="uk-background-muted">
-        <div class="uk-section">
-            <div class="uk-text-center"><code class="error-header uk-text-large">{{ error_title }}</code></div>
+        <div class="uk-container">
+            <div class="uk-section uk-text-center uk-panel uk-panel-box">
+               <p style="color: #e84149; font-family: monospace;" class="error-header uk-text-large uk-text-break">{{ error_title }}</p>
+            </div>
         </div>
     </div>
-    <script src="/static/js/typewriter.js"></script>
-    <link href="/static/css/window.css" rel="stylesheet" type="text/css"/>
-    <div class="uk-container uk-section">
-        <div class="window" id="win">
-            <div class="top">
-                <div class="panel">
-                    <span class="first" onclick="closeWindow()"></span>
-                    <span class="second"></span>
-                    <span class="third"></span>
-                </div>
-
-                <div class="nav">
-                    <span class="prev active"><i class="fa fa-angle-left"></i></span>
-                    <span class="next"><i class="fa fa-angle-right"></i></span>
-
 
+    <div class="uk-visible@s">
+        <div class="uk-container uk-section">
+            <div class="window" id="win">
+                <div class="top">
+                    <div class="panel">
+                        <span class="first" id="terminal-close"></span>
+                        <span class="second"></span>
+                        <span class="third"></span>
+                    </div>
+
+                    <div class="nav">
+                        <span class="prev active"><i class="fa fa-angle-left"></i></span>
+                        <span class="next"><i class="fa fa-angle-right"></i></span>
+                    </div>
                 </div>
 
-
-            </div>
-
-            <div class="inside">
-                <div class="blok">
-                    <pre id="terminal"><code style="white-space:pre-wrap;" class="python" id="error"></code></pre>
+                <div class="inside">
+                    <div class="blok">
+                        <pre id="terminal"><code style="white-space: pre-wrap;" class="python" id="error"></code></pre>
+                    </div>
                 </div>
             </div>
-
         </div>
     </div>
 
-    <style>
-        #terminal {
-            background-color: black;
-            color: white;
-        }
-    </style>
+    <div class="uk-hidden@s uk-container uk-text-center">
+        <br />
+        <p>{{ error_message | safe }}</p>
+    </div>
 
     <noscript>
         <h1>There was an issue processing your request</h1>
         <p>{{ error_message | safe }}</p>
     </noscript>
-    </div>
-    <script src="/static/js/500.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/main/base.html b/templates/main/base.html
index d231c073..7e58fa97 100644
--- a/templates/main/base.html
+++ b/templates/main/base.html
@@ -15,7 +15,8 @@
         <meta property="og:title" content="Python Discord">
         <meta property="og:description" content="We're a large, friendly community focused around the Python programming language. Our community is open to those who wish to learn the language, as well as those looking to help others.">
         <meta content="/static/logos/logo_discord.png" property="og:image">
-
+    {% endblock %}
+    {% block extra_head %}
 
     {% endblock %}
 </head>
diff --git a/templates/main/index.html b/templates/main/index.html
index d8c5febc..1f39e7ad 100644
--- a/templates/main/index.html
+++ b/templates/main/index.html
@@ -16,18 +16,10 @@
                 available to assist around the clock. Whether you're looking to learn the language or working
                 on a complex project, we've got someone who can help you if you get stuck.
             </p>
-            <div uk-grid class="uk-child-width-expand uk-grid-large">
-                <div>
-                    &nbsp;
-                </div>
-                <div>
-                    <a href="/invite" class="uk-button uk-button-default uk-button-large uk-width-1-1">
+            <div class="uk-container uk-align-center">
+                    <a href="/invite" class="uk-button uk-button-default uk-button-large ">
                         Join us on &nbsp;<i class="uk-icon fab fa-discord"></i>
                     </a>
-                </div>
-                <div>
-                    &nbsp;
-                </div>
             </div>
             <hr class="uk-divider-icon" />
             <div class="uk-container uk-container-small uk-text-meta">
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 09b4f91f..cce5c540 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -1,11 +1,17 @@
+<style>
+    .uk-navbar-nav:first-child {
+        margin-left: -20px;
+    }
+</style>
 <div class="uk-container uk-container-expand uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-    <nav data-uk-navbar class="uk-navbar-container uk-navbar-transparent" uk-navbar="boundary-align: true; align: right">
-        <div class="uk-navbar-left">
-            <a href="/" class="uk-navbar-item uk-logo">
-                <img src="/static/logos/logo_banner.png" style="height: 50px;"/>
+    <nav data-uk-navbar class="uk-navbar-container uk-navbar-transparent" uk-navbar="boundary-align: true">
+        <div class="uk-navbar-left uk-padding-remove-left">
+            <a href="/" class="uk-navbar-item uk-logo uk-padding-remove-left">
+                <img src="/static/logos/logo_banner.png" style="margin-left: -10px; padding-left: 3px; height: 50%"/>
             </a>
         </div>
-        <div class="uk-navbar-right">
+
+        <div class="uk-navbar-right uk-visible@m">
             <ul class="uk-navbar-nav">
                 {% if current_page == "index" %}
                     <li class="uk-active"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
@@ -28,5 +34,17 @@
                 </li>
             </ul>
         </div>
+
+        <div class="uk-navbar-right uk-hidden@m">
+            <button class="uk-button" style="font-size: 2em;"><i class="uk-icon fas fa-angle-down"></i></button>
+<div uk-dropdown>
+    <ul class="uk-nav uk-dropdown-nav">
+        <li class="uk-nav-item"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
+        <li class="uk-nav-item"><a href="/invite"><i class="uk-icon fab fa-discord"></i> &nbsp;Discord</a></li>
+        <li class="uk-nav-item"><a href="/info/help"><i class="uk-icon fas fa-question"></i> &nbsp;Getting Help</a></li>
+    </ul>
+</div>
+        </div>
+
     </nav>
-</div>
\ No newline at end of file
+</div>