add responsive support for legacy browsers

This commit is contained in:
Miao Wang 2024-04-14 10:28:35 +08:00
parent 21d4f2a1cb
commit bc4593151f
2 changed files with 24 additions and 4 deletions

View File

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

View File

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