From cd93d3a8a0ecaa1737a823d61f8d64fc8b43d9a7 Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <zhbaor@zhaozuohong.vip>
Date: Thu, 23 Feb 2023 16:10:33 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Responsive=20layout=20with=20gri?=
 =?UTF-8?q?d?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                  |  4 +++-
 frontend/src/components/AudioCard.vue |  8 ++------
 frontend/src/views/AudioDownload.vue  | 22 +++++++++++++++-------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ec77da1..67bb598 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,7 +5,9 @@ import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
-  <AudioDownload></AudioDownload>
+  <div class="vh-100 vw-100 bg-body-secondary">
+    <AudioDownload></AudioDownload>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/AudioCard.vue b/frontend/src/components/AudioCard.vue
index f9a7f9d..0380dd1 100644
--- a/frontend/src/components/AudioCard.vue
+++ b/frontend/src/components/AudioCard.vue
@@ -44,13 +44,13 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <div class="card mb-2 w-100 shadow-sm">
+  <div class="card 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">
         <h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6>
       </div>
-      <h5 v-if="title">{{ title }}</h5>
+      <h5 v-if="title" class="text-truncate">{{ title }}</h5>
       <div v-else class="placeholder-wave">
         <h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5>
       </div>
@@ -97,10 +97,6 @@ const progress = computed(() => {
 </template>
 
 <style scoped>
-.card {
-  max-width: 600px;
-}
-
 i {
   font-size: 36px;
 }
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index 1bf388e..eb7b318 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -27,13 +27,21 @@ const p4 = {
 </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 class="container overflow-hidden">
+    <div class="row g-3 py-3">
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <AudioCard v-bind="p1"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <AudioCard v-bind="p2"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <AudioCard v-bind="p3"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <AudioCard v-bind="p4"></AudioCard>
+      </div>
+    </div>
   </div>
 </template>