mirror of
https://github.com/tuna/mirror-web.git
synced 2025-12-25 20:32:46 +00:00
add css polyfill from bootstrap3
This commit is contained in:
parent
3e6207b399
commit
19109103be
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue