Make bigpicture more mobile friendly (#3889)

Author: willgearty

esp/esp/themes/theme_data/bigpicture/less/main.less

@@ -80,14 +80,13 @@ body {
 }
 .container {
     margin: 0 auto;
-    width: 1180px;
 }
 body, .jumbotron {
     box-sizing: border-box;
-    min-width: 940px;
+    width: 100%;
 }
 .header-cell {
-    display: table-cell;
+    display: inline-block;
     vertical-align: bottom;
 }
 
@@ -107,7 +106,7 @@ div.nav-collapse.collapse {
 
 .sidebar {
     & {
-      color: @navbarText;
+        color: @navbarText;
         background: @sidebarBackground;
         margin-bottom: 2em;
     }
@@ -122,7 +121,7 @@ div.nav-collapse.collapse {
         &, &:hover {
             color: @sidebarActive;
             background-color: @sidebarActiveBackground;
-    }
+        }
     }
     > li > a {
         padding: 8px 18px;
@@ -141,6 +140,44 @@ div.nav-collapse.collapse {
     }
 }
 
+#nav_accordion {
+    & {
+        border-radius: 4px;
+    }
+    .accordion-heading {
+        & a {
+            color: @sidebarLink;
+            font-size: 17px;
+            &:active, &:hover, &:focus {
+                text-decoration: none;
+            }
+        }
+    }
+    .accordion-body {
+        .sidebar {
+            margin-bottom: 0px;
+            border-top: white 1px solid;
+        }
+    }
+}
+
+@media (max-width: 767px) {
+    #nav_sidebar {
+        display: none;
+    }
+    #nav_accordion {
+        display: block;
+    }
+}
+
+@media (min-width: 768px) {
+    #nav_sidebar {
+        display: block;
+    }
+    #nav_accordion {
+        display: none;
+    }
+}
 
 .btn:hover {
     background-position: 0;
@@ -204,7 +241,7 @@ div.nav-collapse.collapse {
 
 
 .logo {
-    max-width: 300px;
+    max-width: ~"min(100%, 300px)";
     max-height: 300px;
     margin: 0 80px 0 0;
 }

esp/esp/themes/theme_data/bigpicture/templates/main.html

@@ -80,10 +80,8 @@
   <div class="row">
     {% block sidebar %}
     <div id="sidebar" class="span3">
-      <ul class="nav nav-list sidebar">
-        {% include "sidebar/nav.html" %}
-        {% include "sidebar/admin.html" %}
-      </ul>
+      {% include "sidebar/nav.html" %}
+      {% include "sidebar/admin.html" %}
 
       {% load preview %}
       {% if request.path == "/teach/index.html" %}

esp/esp/themes/theme_data/bigpicture/templates/sidebar/nav.html

@@ -1,26 +1,68 @@
-{% for section in theme.nav_structure %}
-{% if section.header %}
-<li class="nav-header">
-    {# links on headers are optional #}
-    {% if section.header_link %}
-    <a href="{{section.header_link}}">
-    {% endif %}
-        {{section.header}}
-    {% if section.header_link %}
-    </a>
+<ul class="nav nav-list sidebar" id="nav_sidebar">
+    {% for section in theme.nav_structure %}
+    {% if section.header %}
+    <li class="nav-header">
+        {# links on headers are optional #}
+        {% if section.header_link %}
+        <a href="{{section.header_link}}">
+        {% endif %}
+            {{section.header}}
+        {% if section.header_link %}
+        </a>
+        {% endif %}
+    </li>
     {% endif %}
-</li>
-{% endif %}
 
-{% for item in section.links %}
-{# TODO(benkraft): allow adding classes to items so we can do logged-in only #}
-<li>
-    <a href="{{item.link}}">
-        {% if item.icon %}
-        <i class="glyphicon glyphicon-{{item.icon}}"></i>
-        {% endif %}
-        {{item.text}}
-    </a>
-</li>
-{% endfor %}
-{% endfor %}
+    {% for item in section.links %}
+    {# TODO(benkraft): allow adding classes to items so we can do logged-in only #}
+    <li>
+        <a href="{{item.link}}">
+            {% if item.icon %}
+            <i class="glyphicon glyphicon-{{item.icon}}"></i>
+            {% endif %}
+            {{item.text}}
+        </a>
+    </li>
+    {% endfor %}
+    {% endfor %}
+</ul>
+
+<div class="accordion sidebar" id="nav_accordion">
+    <div class="accordion-group">
+        <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#nav_accordion" href="#collapseOne">
+                <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
+            </a>
+        </div>
+        <div id="collapseOne" class="accordion-body collapse">
+            <ul class="nav nav-list sidebar">
+            {% for section in theme.nav_structure %}
+            {% if section.header %}
+            <li class="nav-header">
+                {# links on headers are optional #}
+                {% if section.header_link %}
+                <a href="{{section.header_link}}">
+                {% endif %}
+                    {{section.header}}
+                {% if section.header_link %}
+                </a>
+                {% endif %}
+            </li>
+            {% endif %}
+
+            {% for item in section.links %}
+            {# TODO(benkraft): allow adding classes to items so we can do logged-in only #}
+            <li>
+                <a href="{{item.link}}">
+                    {% if item.icon %}
+                    <i class="glyphicon glyphicon-{{item.icon}}"></i>
+                    {% endif %}
+                    {{item.text}}
+                </a>
+            </li>
+            {% endfor %}
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
+</div>