From 64553f27f5c91a9b7741bc88990a9384ce563fa7 Mon Sep 17 00:00:00 2001
From: Armin Ronacher <armin.ronacher@active-4.com>
Date: Sun, 27 May 2018 12:04:29 -0700
Subject: [PATCH] Small screen optimizations

---
 layouts/docs/baseof.html |  6 +++++-
 static/css/actix.css     | 29 +++++++++++++++++++++++++++--
 static/js/actix.js       |  5 ++++-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 971eeb6..d814984 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -14,7 +14,11 @@
   <div class="row">
     <div class="col-md-3">
 
-      <nav class="leftnav">
+      <button class="btn doctoggle" type="button" data-toggle="collapse" data-target="#collapsing-docnav" aria-expanded="false" aria-controls="collapsing-docnav">
+        Toggle navigation
+      </button>
+      
+      <nav class="leftnav collapse show" id="collapsing-docnav">
         <div class="" id="">
           <h5>Introduction</h5>
           <div>
diff --git a/static/css/actix.css b/static/css/actix.css
index 021dc21..cb75678 100644
--- a/static/css/actix.css
+++ b/static/css/actix.css
@@ -123,6 +123,8 @@ td {
 
 .navbar-brand img {
   animation: spin-logo 30s linear infinite;
+  width: 48px;
+  height: 48px;
 }
 
 .navbar-light {
@@ -170,6 +172,16 @@ td {
   padding-top: 0;
 }
 
+.doctoggle {
+  margin: -1rem 0 2rem 0;
+  display: none;
+}
+
+.leftnav {
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
 .leftnav li {
   margin: 1rem 0rem;
 }
@@ -179,8 +191,8 @@ td {
 }
 
 .leftnav li.active {
-  margin: -0.5rem 0 -.5rem -1rem;
-  padding: 0.5rem 0 0.5rem 1rem;
+  margin: -0.5rem -1rem -.5rem -1rem;
+  padding: 0.5rem 1rem 0.5rem 1rem;
   background: #dceaea;
 }
 
@@ -241,6 +253,7 @@ td {
 
 .jumbotron .actix-logo {
   max-height: 10rem;
+  max-width: 80%;
 }
 
 .jumbotron .lead {
@@ -540,6 +553,18 @@ h5:hover a {
   }
 }
 
+@media screen and (max-width: 767px) {
+  .doctoggle {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .leftnav {
+    display: block;
+  }
+}
+
 @media (min-width: 992px) {
   .actix-footer-gray {
     width: 960px;
diff --git a/static/js/actix.js b/static/js/actix.js
index c51b2d1..ef2cb66 100644
--- a/static/js/actix.js
+++ b/static/js/actix.js
@@ -19,7 +19,10 @@
         scrollTop: $('.actix-showcase').offset().top
       }, 1000);
     } else {
-      activateFeature('#' + $('div.actix-feature')[0].id);
+      var firstFeature = $('div.actix-feature')[0];
+      if (firstFeature) {
+        activateFeature('#' + firstFeature.id);
+      }
     }
 
     $('ul li.actix-feature-selector a').on('click', function(evt) {