Upgrade to Bootstrap v5 (#457)

This commit is contained in:
rubenwardy
2023-08-22 19:58:43 +01:00
committed by GitHub
parent 70362ff7a6
commit 9df80d212e
92 changed files with 505 additions and 477 deletions

View File

@@ -75,11 +75,11 @@ function addPackage(pkg) {
<article class="card my-3" data-id="${escapeHtml(id)}">
<div class="card-body">
<div class="row">
<div class="col-auto text-muted pr-2">
<div class="col-auto text-muted pe-2">
<i class="fas fa-bars"></i>
</div>
<div class="col">
<button class="btn btn-sm btn-danger remove-package float-right" type="button" aria-label="Remove">
<button class="btn btn-sm btn-danger remove-package float-end" type="button" aria-label="Remove">
<i class="fas fa-trash"></i>
</button>
<h5>
@@ -90,14 +90,14 @@ function addPackage(pkg) {
<p class="text-muted">
${escapeHtml(pkg.short_description)}
</p>
<div class="form-group">
<label for="descriptions-${nextId}">Short Description</label>
<input id="package_ids-${nextId}" name="package_ids-${nextId}" type="hidden" value="${id}">
<input id="package_removed-${nextId}" name="package_removed-${nextId}" type="hidden" value="0">
<div>
<label for="descriptions-${nextId}" class="form-label">Short Description</label>
<input class="form-control" id="descriptions-${nextId}" maxlength="500" minlength="0"
name="descriptions-${nextId}" type="text" value="">
<small class="form-text text-muted">You can replace the description with your own</small>
</div>
<input id="package_ids-${nextId}" name="package_ids-${nextId}" type="hidden" value="${id}">
<input id="package_removed-${nextId}" name="package_removed-${nextId}" type="hidden" value="0">
</div>
</div>
</div>
@@ -128,7 +128,7 @@ function updateResults(packages) {
result.innerText = `${pkg.title} by ${pkg.author}`;
if (alreadyAdded.includes(`${pkg.author}/${pkg.name}`)) {
result.classList.add("active");
result.innerHTML = "<i class='fas fa-check mr-3 text-success'></i>" + result.innerHTML;
result.innerHTML = "<i class='fas fa-check me-3 text-success'></i>" + result.innerHTML;
}
result.addEventListener("click", () => addPackage(pkg));
results.appendChild(result);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -78,12 +78,12 @@ function add_summary_card(title, icon, value, extra) {
<div class="card h-100">
<div class="card-body align-items-center text-center">
<div class="mt-0 mb-3">
<i class="fas fa-${icon} mr-1"></i>
<i class="fas fa-${icon} me-1"></i>
<span class="summary-title"></span>
</div>
<div class="my-0 h4">
<span class="summary-value"></span>
<small class="text-muted ml-2 summary-extra"></small>
<small class="text-muted ms-2 summary-extra"></small>
</div>
</div>
</div>

View File

@@ -58,7 +58,7 @@ $(function() {
}
})
const btn = $("#forums").parent().find("label").append("<a class='ml-3 btn btn-sm btn-primary'>Open</a>");
const btn = $("#forums").parent().find("label").append("<a class='ms-3 btn btn-sm btn-primary'>Open</a>");
btn.click(function() {
const id = $("#forums").val();
if (/^\d+$/.test(id)) {

View File

@@ -19,8 +19,9 @@ function setVoteCount(button, count) {
if (!badge) {
badge = document.createElement("span")
badge.classList.add("badge");
badge.classList.add("badge-light");
badge.classList.add("badge-ml-1");
badge.classList.add("bg-light");
badge.classList.add("text-dark");
badge.classList.add("ms-1");
button.appendChild(badge);
}

View File

@@ -50,7 +50,7 @@
text = text.substr(0, idx);
}
$('<span class="badge badge-pill badge-primary"/>')
$('<span class="badge roaded-pill bg-primary"/>')
.text(text + ' ')
.data("id", id)
.append('<a>x</a>')

View File

@@ -9,8 +9,8 @@ document.querySelectorAll(".video-embed").forEach(ele => {
if (url.host == "www.youtube.com") {
ele.addEventListener("click", () => {
ele.parentNode.classList.add("d-block");
ele.classList.add("embed-responsive");
ele.classList.add("embed-responsive-16by9");
ele.classList.add("ratio");
ele.classList.add("ratio-16x9");
ele.innerHTML = `
<iframe title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"