Massive frontend overhaul

src/App.vue

@@ -1,21 +1,23 @@
 <template>
-  <div id="app" class="container">
-    <div class="row" style="padding-bottom: 10px;">
-      <div class="col-sm">
-        <h1>Ripper</h1>
+  <div id="app">
+    <n :sensors="sensors" />
+    <div class="container">
+      <div class="row">
+        <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
+        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+          <h1 class="h2">Jobs</h1>
+        </div>
+        <job v-for="(job, id) in jobs" :job="job" :key="job.id"></job>
+        </main>
       </div>
     </div>
-    <status :sensors="sensors"></status>
-    <temperatures :temperatures="sensors.temperatures"></temperatures>
-    <job v-for="(job, id) in jobs" :job="job" :key="job.id"></job>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
 import job from './components/Job';
-import status from './components/Status';
-import temperatures from './components/TempStatus';
+import navbar from './components/Nav';
 import EventWebSocket from './websocket';
 
 let d = {
@@ -70,8 +72,7 @@ export default {
   name: 'app',
   components: {
     job: job,
-    status: status,
-    temperatures: temperatures,
+    n: navbar,
   },
   data() {
     return d;