🎨 Organize cards into view

frontend/package-lock.json

@@ -8,7 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.0-alpha1",
         "bootstrap-icons": "^1.10.3",
         "vue": "^3.2.45"
       },
@@ -506,9 +506,9 @@
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "funding": [
         {
           "type": "github",

frontend/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "bootstrap-icons": "^1.10.3",
     "vue": "^3.2.45"
   },

frontend/src/App.vue

@@ -1,45 +1,11 @@
 <script setup>
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import AudioCard from "./components/AudioCard.vue";
-
-const p1 = {
-  number: "BV1es41127Fd",
-  received: 0,
-  total: 0,
-};
-const p2 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 0,
-  total: 0,
-};
-const p3 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 1314514,
-  total: 1919810,
-};
-const p4 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 1919810,
-  total: 1919810,
-};
+import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
-  <div id="wrapper">
-    <AudioCard v-bind="p1"></AudioCard>
-    <AudioCard v-bind="p2"></AudioCard>
-    <AudioCard v-bind="p3"></AudioCard>
-    <AudioCard v-bind="p4"></AudioCard>
-  </div>
+  <AudioDownload></AudioDownload>
 </template>
 
-<style scoped>
-#wrapper {
-  margin-top: 20px;
-  margin-left: 20px;
-}
-</style>
+<style scoped></style>

frontend/src/components/AudioCard.vue

@@ -44,7 +44,7 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <div class="card">
+  <div class="card mb-2 w-100 shadow-sm">
     <div class="card-body position-relative">
       <h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
       <div v-else class="placeholder-wave">
@@ -68,7 +68,9 @@ const progress = computed(() => {
           role="progressbar"
           :style="{ width: progress + '%' }"
         >
-          <span v-if="status == 'Fetching'" class="text-dark">Fetching Information</span>
+          <span v-if="status == 'Fetching'" class="text-dark"
+            >Fetching Information</span
+          >
           <span v-else-if="status == 'Ready'">Ready</span>
           <span v-else-if="status == 'Downloading'"
             >{{ progress }}%<span class="px-1"></span>({{ received_mib }} /

frontend/src/views/AudioDownload.vue

@@ -0,0 +1,40 @@
+<script setup>
+import AudioCard from "../components/AudioCard.vue";
+
+const p1 = {
+  number: "BV1es41127Fd",
+  received: 0,
+  total: 0,
+};
+const p2 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 0,
+  total: 0,
+};
+const p3 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1314514,
+  total: 1919810,
+};
+const p4 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1919810,
+  total: 1919810,
+};
+</script>
+
+<template>
+  <div
+    class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
+  >
+    <AudioCard v-bind="p1"></AudioCard>
+    <AudioCard v-bind="p2"></AudioCard>
+    <AudioCard v-bind="p3"></AudioCard>
+    <AudioCard v-bind="p4"></AudioCard>
+  </div>
+</template>
+
+<style scoped></style>