Fix navbar on mobile

core/templates/base.html

@@ -6,7 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">s
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Pathogen - {{ request.path_info }}</title>
-    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
     <link rel="stylesheet" href="{% static 'style.css' %}" />
     {# <script src="https://js.stripe.com/v3/"></script> #}
   </head>
@@ -17,28 +20,30 @@
           <div class="container">
             <div class="navbar-header">
               <a class="navbar-brand" href="{% url 'home' %}">Pathogen</a>
-              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#base-nav" aria-expanded="false">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </button>
             </div>
-            <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
-              {% if user.is_authenticated %}
-                <li><a href="{% url 'profile' %}">Profile</a></li>
-              {% endif %}
-              {% if user.paid %}
-                <li><a href="{% url 'drilldown' %}">Drilldown</a></li>
-              {% endif %}
-              {% if not user.is_authenticated %}
-                <li><a href="{% url 'login' %}">Login</a></li>
-                <li><a href="{% url 'signup' %}">Sign Up</a></li>
-              {% endif %}
-              {% if user.is_authenticated %}
-                <li><a href="{% url 'logout' %}">Logout</a></li>
-              {% endif %}
-            </ul>
+            <div class="collapse navbar-collapse" id="base-nav">
+              <ul class="nav navbar-nav navbar-right">
+                {% if user.is_authenticated %}
+                  <li><a href="{% url 'profile' %}">Profile</a></li>
+                {% endif %}
+                {% if user.paid %}
+                  <li><a href="{% url 'drilldown' %}">Drilldown</a></li>
+                {% endif %}
+                {% if not user.is_authenticated %}
+                  <li><a href="{% url 'login' %}">Login</a></li>
+                  <li><a href="{% url 'signup' %}">Sign Up</a></li>
+                {% endif %}
+                {% if user.is_authenticated %}
+                  <li><a href="{% url 'logout' %}">Logout</a></li>
+                {% endif %}
+              </ul>
+            </div>
           </div>
         </nav>
       </div>

core/templates/ui/drilldown.html

@@ -5,7 +5,7 @@
 
   <div class="container">
     <div class="row">
-      <div class="col-lg-4">
+      <div class="col-lg-4 col-md-4 col-xs-12">
         <form method="POST">
           {% csrf_token %}
           <div class="input-group search-bar">
@@ -21,31 +21,33 @@
     </div>
     {% if results is not None %}
       <div class="row">
-        <div class="col-lg-12">
+        <div class="col-lg-12 col-md-12 col-xs-12">
           <div class="panel panel-default">
             <div class="panel-heading">Results for {{ query }}</div>
-            <table class="table table-bordered table-light">
-              <thead>
-                <tr>
-                  <th>TS</th>
-                  <th>msg</th>
-                  <th>host</th>
-                  <th>nick</th>
-                  <th>channel</th>
-                  <th>net</th>
-                </tr>
-              </thead>
-              {% for item in results %}
-                <tr>
-                  <td>{{ item.ts }}</td>
-                  <td>{{ item.msg }}</td>
-                  <td>{{ item.host }}</td>
-                  <td>{{ item.nick }}</td>
-                  <td>{{ item.channel }}</td>
-                  <td>{{ item.net }}</td>
-                </tr>
-              {% endfor %}
-            </table>
+            <div class="table-responsive">
+              <table class="table table-bordered table-light">
+                <thead>
+                  <tr>
+                    <th>TS</th>
+                    <th>msg</th>
+                    <th>host</th>
+                    <th>nick</th>
+                    <th>channel</th>
+                    <th>net</th>
+                  </tr>
+                </thead>
+                {% for item in results %}
+                  <tr>
+                    <td>{{ item.ts }}</td>
+                    <td>{{ item.msg }}</td>
+                    <td>{{ item.host }}</td>
+                    <td>{{ item.nick }}</td>
+                    <td>{{ item.channel }}</td>
+                    <td>{{ item.net }}</td>
+                  </tr>
+                {% endfor %}
+              </table>
+            </div>
 
           </div>
         </div>