From 5fc51b6843d6cf6f8e4ad443db46708718009799 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torjus=20H=C3=A5kestad?= <torjus.hakestad@usit.uio.no>
Date: Sat, 10 Apr 2021 23:53:39 +0200
Subject: [PATCH] Make navbar better on small devices

---
 web/frontend/src/App.vue                    | 20 ++++++++++++--------
 web/frontend/src/components/AttemptList.vue |  8 +++++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/web/frontend/src/App.vue b/web/frontend/src/App.vue
index cb6a637..52f358c 100644
--- a/web/frontend/src/App.vue
+++ b/web/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div id="apiary-navbar">
-      <b-navbar type="dark" variant="dark">
+      <b-navbar toggleable="md" type="dark" variant="dark">
         <b-navbar-brand href="#">
           <img
             alt="logo"
@@ -12,14 +12,19 @@
           />
           apiary.t-juice.club
         </b-navbar-brand>
-        <b-navbar-nav>
-          <b-nav-item :to="'/'">Home</b-nav-item>
-          <b-nav-item :to="'/stats'">Stats</b-nav-item>
-          <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
-        </b-navbar-nav>
+        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+        <b-collapse id="nav-collapse" is-nav>
+          <b-navbar-nav class="mr-auto">
+            <b-nav-item :to="'/'">Home</b-nav-item>
+            <b-nav-item :to="'/stats'">Stats</b-nav-item>
+            <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
+          </b-navbar-nav>
+        </b-collapse>
       </b-navbar>
     </div>
-    <router-view></router-view>
+    <b-container id="main-content-container" fluid="md">
+      <router-view></router-view>
+    </b-container>
   </div>
 </template>
 
@@ -47,7 +52,6 @@ $font-stack: 'Secular One';
   color: #2c3e50;
   margin-top: 0;
 }
-
 .navbar-brand {
   font-family: 'Secular One', sans-serif;
 }
diff --git a/web/frontend/src/components/AttemptList.vue b/web/frontend/src/components/AttemptList.vue
index fddb112..6af55b7 100644
--- a/web/frontend/src/components/AttemptList.vue
+++ b/web/frontend/src/components/AttemptList.vue
@@ -2,7 +2,13 @@
   <div class="attemptlist">
     <h1>Attempt list</h1>
     <p>
-      <b-table striped hover :items="attempts" :fields="fields"></b-table>
+      <b-table
+        responsive="md"
+        striped
+        hover
+        :items="attempts"
+        :fields="fields"
+      ></b-table>
     </p>
   </div>
 </template>