Use bootstrap for styling

package-lock.json

@@ -8,6 +8,7 @@
       "name": "printer_status",
       "version": "0.0.0",
       "dependencies": {
+        "bootstrap": "^5.1.3",
         "pretty-ms": "^7.0.1",
         "vue": "^3.2.0"
       },
@@ -77,6 +78,16 @@
       "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.3.tgz",
@@ -345,6 +356,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -1929,6 +1952,12 @@
       "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+      "peer": true
+    },
     "@vitejs/plugin-vue": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.3.tgz",
@@ -2167,6 +2196,12 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",

package.json

@@ -10,6 +10,7 @@
     "vue-tsc": "^0.3.0"
   },
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "pretty-ms": "^7.0.1",
     "vue": "^3.2.0"
   },

src/App.vue

@@ -1,17 +1,28 @@
 <template>
-  <div class="content">
-    <div v-if="!hasPrinters">
-      <div class="loading-spinner"></div>
-    </div>
-    <PrinterCard
-      v-else
-      v-for="({ name, status }, slug) in printers"
-      :key="slug"
-      :slug="slug as string"
-      :name="name"
-      :status="status"
+  <div>
+    <div
+      class="d-flex align-items-center justify-content-center"
+      style="height: 100vh"
+      v-if="!hasPrinters"
     >
-    </PrinterCard>
+      <div class="spinner-border" style="width: 7vw; height: 7vw" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+    <div
+      v-else
+      class="
+        row row-cols-1 row-cols-md-2 row-cols-xxl-3
+        m-1 m-md-3
+        g-4
+        justify-content-center
+      "
+    >
+      <div class="col" v-for="({ name, status }, slug) in printers" :key="slug">
+        <PrinterCard :slug="slug as string" :name="name" :status="status">
+        </PrinterCard>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -64,37 +75,3 @@ function connectWebsocket() {
 
 connectWebsocket();
 </script>
-
-<style>
-.content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 90vh;
-}
-
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.loading-spinner {
-  display: block;
-  height: 10vh;
-  width: 10vh;
-  border: solid 1vh transparent;
-  border-top-color: #1c87c9;
-  border-radius: 50%;
-  animation: 2s linear infinite spinner;
-}
-</style>

src/PrinterCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card">
-    <div class="card-header">{{ name || 'Unknown' }}</div>
-    <img class="webcam" :src="'/webcam/' + slug" />
+    <h3 class="card-header">{{ name || 'Unknown' }}</h3>
+    <img class="card-img webcam" :src="'/webcam/' + slug" />
     <div v-if="status">
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
@@ -36,26 +36,3 @@ function formatDuration(seconds: number): string {
   return prettyMilliseconds(seconds * 1000);
 }
 </script>
-
-<style lang="scss">
-.card {
-  display: inline-block;
-  margin: 1em;
-  padding: 1em;
-  border-radius: 3px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
-    rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
-
-  .card-header {
-    font-weight: bold;
-    font-size: 1.5em;
-    text-align: center;
-    padding-bottom: 0.25em;
-  }
-
-  .webcam {
-    width: 480px;
-    max-width: 100%;
-  }
-}
-</style>

src/index.ts

@@ -1,5 +1,8 @@
 import * as Vue from 'vue';
 
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap";
+
 import App from './App.vue';
 
 const app = Vue.createApp(App).mount('#app');