Small screen optimizations

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>

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;

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) {