💄 Use floating button

frontend/src/App.vue

@@ -7,5 +7,3 @@ import AudioDownload from "./views/AudioDownload.vue";
 <template>
   <AudioDownload></AudioDownload>
 </template>
-
-<style scoped></style>

frontend/src/components/DownloadButton.vue

@@ -1,13 +1,22 @@
-<script setup></script>
+<script setup>
+const props = defineProps({
+  disabled: Boolean,
+});
+</script>
 
 <template>
-  <button class="btn btn-lg btn-primary z-3 m-2 p-3 shadow">
-    <span class="button-text"><i class="bi-download"></i><span class="mx-1"></span>Download All</span>
+  <button
+    class="btn btn-lg btn-primary px-3 mb-4 z-3 shadow position-absolute bottom-0 start-50 translate-middle-x"
+    :disabled="disabled"
+  >
+    <span class="button-text"
+      ><i class="bi-download"></i><span class="mx-1"></span>Download All</span
+    >
   </button>
 </template>
 
 <style scoped>
-/* .button-text {
-  font-size: 18px;
-} */
+button {
+  border-radius: 14px;
+}
 </style>

frontend/src/views/AudioDownload.vue

@@ -1,6 +1,6 @@
 <script setup>
 import AudioCard from "../components/AudioCard.vue";
-// import TotalProgress from "../components/TotalProgress.vue";
+import TotalProgress from "../components/TotalProgress.vue";
 import DownloadButton from "../components/DownloadButton.vue";
 
 const p1 = {
@@ -30,7 +30,7 @@ const p4 = {
 
 <template>
   <div
-    class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column"
+    class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column position-relative"
   >
     <div class="container overflow-y-scroll flex-grow-1">
       <div class="row g-3 py-3">
@@ -49,8 +49,6 @@ const p4 = {
       </div>
     </div>
     <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
-    <DownloadButton></DownloadButton>
+    <!-- <DownloadButton></DownloadButton> -->
   </div>
 </template>
-
-<style scoped></style>