From bc4593151f1464d7e9649cfbeaaeb2bb860c24ab Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Sun, 14 Apr 2024 10:28:35 +0800
Subject: [PATCH] add responsive support for legacy browsers

---
 _src/components/StatusMirrorList.vue |  8 ++++----
 _src/entrypoints/bs3-polyfill.scss   | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/_src/components/StatusMirrorList.vue b/_src/components/StatusMirrorList.vue
index d653475..f3aee83 100644
--- a/_src/components/StatusMirrorList.vue
+++ b/_src/components/StatusMirrorList.vue
@@ -50,7 +50,7 @@ onMounted(() => {
         @mouseenter="freezedRows[mir.name] = rollCur"
         @mouseleave="freezedRows[mir.name] = undefined"
       >
-        <th class="col-4 d-lg-none d-bs3-none text-end">Name</th>
+        <th class="col-4 d-lg-none d-bs3-def-none text-end">Name</th>
         <td class="col-8 col-lg-2">
           {{ mir.name }}{{ mir.is_master ? "" : " [slave]" }}
         </td>
@@ -128,11 +128,11 @@ onMounted(() => {
             </div>
           </div>
         </td>
-        <th class="col-4 d-lg-none d-bs3-none text-end">Upstream</th>
+        <th class="col-4 d-lg-none d-bs3-def-none text-end">Upstream</th>
         <td class="col-8 col-lg-4">{{ mir.upstream }}</td>
-        <th class="col-4 d-lg-none d-bs3-none text-end">Status</th>
+        <th class="col-4 d-lg-none d-bs3-def-none text-end">Status</th>
         <td class="col-8 col-lg-1">{{ mir.status }}</td>
-        <th class="col-4 d-lg-none d-bs3-none text-end">Size</th>
+        <th class="col-4 d-lg-none d-bs3-def-none text-end">Size</th>
         <td class="col-8 col-lg-1">{{ mir.size }}</td>
       </tr>
     </tbody>
diff --git a/_src/entrypoints/bs3-polyfill.scss b/_src/entrypoints/bs3-polyfill.scss
index dbaa849..454685d 100644
--- a/_src/entrypoints/bs3-polyfill.scss
+++ b/_src/entrypoints/bs3-polyfill.scss
@@ -24,6 +24,26 @@ html {
       display: $display !important;
     }
   }
+  .d-bs3-def-none {
+    display: none !important;
+  }
+  @media (min-width: 0) {
+    div.d-bs3-def-none {
+      display: block !important;
+      @media (min-width: $screen-lg-min) {
+        display: none !important;
+      }
+    }
+    td,
+    th {
+      &.d-bs3-def-none {
+        display: table-cell !important;
+        @media (min-width: $screen-lg-min) {
+          display: none !important;
+        }
+      }
+    }
+  }
   .btn-close {
     display: none;
   }