add css polyfill from bootstrap3

This commit is contained in:
Miao Wang 2024-04-13 04:46:54 +08:00
parent 3e6207b399
commit 19109103be
8 changed files with 182 additions and 24 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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};
}
}
}

66
package-lock.json generated
View File

@ -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",

View File

@ -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",