From 19109103be00f0b3d8ec9c5547090c3da574dc3e Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Sat, 13 Apr 2024 04:46:54 +0800
Subject: [PATCH] add css polyfill from bootstrap3

---
 _includes/head.html                  |  1 +
 _src/components/DiskBar.vue          | 35 +++++++------
 _src/components/IsoModal.vue         |  8 +++
 _src/components/SearchBox.vue        |  2 +-
 _src/components/StatusMirrorList.vue | 20 +++++---
 _src/entrypoints/bs3-polyfill.scss   | 73 ++++++++++++++++++++++++++++
 package-lock.json                    | 66 +++++++++++++++++++++++++
 package.json                         |  1 +
 8 files changed, 182 insertions(+), 24 deletions(-)
 create mode 100644 _src/entrypoints/bs3-polyfill.scss

diff --git a/_includes/head.html b/_includes/head.html
index 4171ddd..15959a7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -31,6 +31,7 @@
 <title>{{ page_title }}</title>
 {% unless include.nostyle %}
 {% include vite_script.html %}
+<link rel="stylesheet" href="{% vite_asset_path bs3-polyfill.scss %}" media="screen" integrity="sha256-OnlyforlegacybrowsersAAAAAAAAAAAAAAAAAAAAAA=" />
 {% if page.legacy %}
 <style>
 .container {
diff --git a/_src/components/DiskBar.vue b/_src/components/DiskBar.vue
index 14d128a..3aef723 100644
--- a/_src/components/DiskBar.vue
+++ b/_src/components/DiskBar.vue
@@ -20,22 +20,27 @@ onMounted(async () => {
   if (!Array.isArray(d)) {
     d = [d];
   }
-  diskUsages.value = d.map((disk) => ({
-    desc: disk.desc,
-    used: readableFileSize(disk.used_kb * 1024),
-    total: readableFileSize(disk.total_kb * 1024),
-    percentage: 0,
-    _percentage: Math.round((disk.used_kb * 100) / disk.total_kb),
-  }));
-  await nextTick();
-  await new Promise((resolve) =>
-    setTimeout(() => {
-      resolve();
-    }, 0),
-  );
-  diskUsages.value.forEach((disk) => {
-    disk.percentage = disk._percentage;
+  diskUsages.value = d.map((disk) => {
+    const percentage = Math.round((disk.used_kb * 100) / disk.total_kb);
+    return {
+      desc: disk.desc,
+      used: readableFileSize(disk.used_kb * 1024),
+      total: readableFileSize(disk.total_kb * 1024),
+      percentage: import.meta.env.LEGACY ? percentage : 0,
+      _percentage: percentage,
+    };
   });
+  if (!import.meta.env.LEGACY) {
+    await nextTick();
+    await new Promise((resolve) =>
+      setTimeout(() => {
+        resolve();
+      }, 0),
+    );
+    diskUsages.value.forEach((disk) => {
+      disk.percentage = disk._percentage;
+    });
+  }
 });
 </script>
 <template>
diff --git a/_src/components/IsoModal.vue b/_src/components/IsoModal.vue
index 47c9682..fee9755 100644
--- a/_src/components/IsoModal.vue
+++ b/_src/components/IsoModal.vue
@@ -50,6 +50,14 @@ const switchCategory = (category) => {
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
+        <button
+          type="button"
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          class="close d-none d-bs3-block"
+        >
+          <span aria-hidden="true">×</span>
+        </button>
         <h4 class="modal-title" id="isoModalLabel">获取安装镜像</h4>
         <button
           type="button"
diff --git a/_src/components/SearchBox.vue b/_src/components/SearchBox.vue
index 9ec7502..5fa2f44 100644
--- a/_src/components/SearchBox.vue
+++ b/_src/components/SearchBox.vue
@@ -26,7 +26,7 @@ onBeforeUnmount(() => {
     ref="inputRef"
     placeholder="按 / 搜索"
     autocomplete="off"
-    class="ms-auto d-inline-flex align-self-center"
+    class="ms-auto d-inline-flex align-self-center d-bs3-none"
   />
 </template>
 
diff --git a/_src/components/StatusMirrorList.vue b/_src/components/StatusMirrorList.vue
index ac8e891..d653475 100644
--- a/_src/components/StatusMirrorList.vue
+++ b/_src/components/StatusMirrorList.vue
@@ -23,7 +23,7 @@ onMounted(() => {
 <template>
   <table class="table text-break table-hover table-borderless">
     <thead>
-      <tr class="d-none d-lg-table-row">
+      <tr class="d-none d-lg-table-row d-b3-table-row">
         <th class="col-2">Name</th>
         <th class="col-4" colspan="2">Last Update</th>
         <th class="col-4">Upstream</th>
@@ -50,12 +50,12 @@ onMounted(() => {
         @mouseenter="freezedRows[mir.name] = rollCur"
         @mouseleave="freezedRows[mir.name] = undefined"
       >
-        <th class="col-4 d-lg-none text-end">Name</th>
+        <th class="col-4 d-lg-none d-bs3-none text-end">Name</th>
         <td class="col-8 col-lg-2">
           {{ mir.name }}{{ mir.is_master ? "" : " [slave]" }}
         </td>
         <td
-          class="col-12 col-lg-4 d-lg-none d-lg-reduce-table-cell"
+          class="col-12 col-lg-4 d-lg-none d-bs3-table-cell d-lg-reduce-table-cell"
           colspan="2"
         >
           <div class="row">
@@ -76,7 +76,9 @@ onMounted(() => {
             <td class="col-8" v-else>Syncing Now</td>
           </div>
         </td>
-        <td class="col-2 rolling-3 d-none d-lg-table-cell d-reduce-none">
+        <td
+          class="col-2 rolling-3 d-none d-lg-table-cell d-bs3-none d-reduce-none"
+        >
           <div class="tuna-roll">
             &nbsp;
             <template v-if="mir.last_ended_ts == mir.last_update_ts">
@@ -92,7 +94,9 @@ onMounted(() => {
             <div v-else data-tuna-roll-seq="4 5">Next Scheduled Sync</div>
           </div>
         </td>
-        <td class="col-2 rolling-6 d-none d-lg-table-cell d-reduce-none">
+        <td
+          class="col-2 rolling-6 d-none d-lg-table-cell d-bs3-none d-reduce-none"
+        >
           <div class="tuna-roll">
             &nbsp;
             <template v-if="mir.last_ended_ts == mir.last_update_ts">
@@ -124,11 +128,11 @@ onMounted(() => {
             </div>
           </div>
         </td>
-        <th class="col-4 d-lg-none text-end">Upstream</th>
+        <th class="col-4 d-lg-none d-bs3-none text-end">Upstream</th>
         <td class="col-8 col-lg-4">{{ mir.upstream }}</td>
-        <th class="col-4 d-lg-none text-end">Status</th>
+        <th class="col-4 d-lg-none d-bs3-none text-end">Status</th>
         <td class="col-8 col-lg-1">{{ mir.status }}</td>
-        <th class="col-4 d-lg-none text-end">Size</th>
+        <th class="col-4 d-lg-none d-bs3-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
new file mode 100644
index 0000000..9fcd6ea
--- /dev/null
+++ b/_src/entrypoints/bs3-polyfill.scss
@@ -0,0 +1,73 @@
+$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
+$navbar-default-bg: transparent;
+$navbar-default-border: transparent;
+$navbar-padding-vertical: 0;
+$navbar-padding-horizontal: 0;
+
+html {
+  @import "bootstrap-sass";
+  .fade {
+    @extend .in;
+  }
+  .d-bs3-block {
+    display: block !important;
+  }
+  @each $display in block inline-block inline table table-row table-cell none {
+    .d-bs3-#{$display} {
+      display: $display !important;
+    }
+  }
+  .btn-close {
+    display: none;
+  }
+  .visually-hidden {
+    @extend .sr-only;
+  }
+  .badge {
+    @extend .label;
+  }
+  @each $kind in default primary success info warning danger {
+    .badge.text-bg-#{$kind} {
+      @extend .label-#{$kind};
+    }
+  }
+  .navbar .justify-content-end {
+    @extend .navbar-right;
+  }
+  .navbar > .container-fluid {
+    display: block;
+  }
+  tr.row::before {
+    content: none;
+    display: none;
+  }
+  .row {
+    display: block;
+  }
+  table.row {
+    display: table;
+  }
+  tr.row {
+    display: table-row;
+  }
+  .container-fluid {
+    display: block;
+  }
+  .modal-header {
+    display: block;
+  }
+  div.row {
+    td,
+    th {
+      &[class*="col-"] {
+        display: block;
+        float: left;
+      }
+    }
+  }
+  @for $i from 1 through 12 {
+    .col-#{$i} {
+      @extend .col-xs-#{$i};
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d207baf..022a58e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,11 @@
         "@vitejs/plugin-vue": "^5.0.4",
         "@webcomponents/template": "^1.5.1",
         "bootstrap": "^5.3.3",
+        "bootstrap-sass": "^3.4.3",
         "core-js": "^3.36.1",
         "element-polyfill": "^1.1.0",
         "events-polyfill": "^2.1.2",
+        "formdata-polyfill": "^4.0.10",
         "highlight.js": "^11.9.0",
         "lato-webfont": "^2.15.1",
         "liquidjs": "^10.10.2",
@@ -2534,6 +2536,11 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-sass": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.3.tgz",
+      "integrity": "sha512-vPgFnGMp1jWZZupOND65WS6mkR8rxhJxndT/AcMbqcq1hHMdkcH4sMPhznLzzoHOHkSCrd6J9F8pWBriPCKP2Q=="
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2958,6 +2965,28 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2977,6 +3006,17 @@
         "micromatch": "^4.0.2"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -3527,6 +3567,24 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -4453,6 +4511,14 @@
         }
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webfontloader": {
       "version": "1.6.28",
       "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
diff --git a/package.json b/package.json
index d82dfe6..6c8fe92 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@webcomponents/template": "^1.5.1",
     "bootstrap": "^5.3.3",
+    "bootstrap-sass": "^3.4.3",
     "core-js": "^3.36.1",
     "element-polyfill": "^1.1.0",
     "events-polyfill": "^2.1.2",