Reorganize files, keep table from moving on alert

This commit is contained in:
SinTan1729
2023-04-10 11:31:34 -05:00
parent 2f48b1e58c
commit e18a71a73c
6 changed files with 12 additions and 10 deletions

View File

@@ -15,10 +15,10 @@
<link rel="icon" type="image/png" href="assets/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/favicon-196.png" sizes="196x196">
<script src="script.js"></script>
<script src="static/script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"
integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="styles.css">
<link rel="stylesheet" type="text/css" target="_blank" href="static/styles.css">
</head>
<body>
@@ -40,6 +40,7 @@
</div>
<div class="pure-controls">
<button class="pure-button pure-button-primary">Shorten!</button>
<p id="alert-box">&nbsp;</p>
</div>
</fieldset>
</form>
@@ -49,7 +50,7 @@
<br>
<thead>
<tr>
<td id="short-url-header">Short URL (click to copy)</td>
<td id="short-url-header">Short URL<br>(click to copy)</td>
<td>Long URL</td>
<td>Hits</td>
<td name="deleteBtn">&times;</td>

View File

@@ -48,7 +48,7 @@ const displayData = async (data) => {
const table = document.querySelector("#url-table");
if (!window.isSecureContext) {
const shortUrlHeader = document.getElementById("short-url-header");
shortUrlHeader.innerHTML = "Short URL (right click and copy)";
shortUrlHeader.innerHTML = "Short URL<br>(right click and copy)";
}
table_box.style.visibility = "visible";
table.innerHTML = ''; // Clear
@@ -57,10 +57,10 @@ const displayData = async (data) => {
};
const showAlert = async (text, col) => {
document.getElementById("alertBox")?.remove();
document.getElementById("alert-box")?.remove();
const controls = document.querySelector(".pure-controls");
const alertBox = document.createElement("p");
alertBox.setAttribute("id", "alertBox");
alertBox.setAttribute("id", "alert-box");
alertBox.setAttribute("style", `color:${col}`);
alertBox.innerHTML = text;
controls.appendChild(alertBox);
@@ -121,7 +121,8 @@ const deleteButton = (shortUrl) => {
btn.onclick = e => {
e.preventDefault();
if (confirm("Do you want to delete the entry " + shortUrl + "?")) {
document.getElementById("alertBox")?.remove();
document.getElementById("alert-box")?.remove();
showAlert("&nbsp;", "black");
fetch(`/api/del/${shortUrl}`, {
method: "DELETE"
}).then(_ => refreshData());