diff --git a/actix/resources/index.html b/actix/resources/index.html
index 85c1c87..f390590 100644
--- a/actix/resources/index.html
+++ b/actix/resources/index.html
@@ -49,7 +49,7 @@
-
+
Long URL |
Hits |
× |
diff --git a/actix/resources/static/script.js b/actix/resources/static/script.js
index d18aef7..24b99a6 100644
--- a/actix/resources/static/script.js
+++ b/actix/resources/static/script.js
@@ -61,15 +61,16 @@ const showAlert = async (text, col) => {
const TR = (row, site) => {
const tr = document.createElement("tr");
- const longTD = TD(A_LONG(row.long));
+ const longTD = TD(A_LONG(row.long), "Long URL");
var shortTD = null;
if (window.isSecureContext) {
- shortTD = TD(A_SHORT(row.short, site));
+ shortTD = TD(A_SHORT(row.short, site), "Short URL");
}
else {
- shortTD = TD(A_SHORT_INSECURE(row.short, site));
+ shortTD = TD(A_SHORT_INSECURE(row.short, site), "Short URL");
}
- const hitsTD = TD(row.hits);
+ hitsTD = TD(row.hits);
+ hitsTD.setAttribute("label", "Hits");
const btn = deleteButton(row.short);
tr.appendChild(shortTD);
@@ -122,15 +123,17 @@ const deleteButton = (shortUrl) => {
}
};
td.setAttribute("name", "deleteBtn");
+ td.setAttribute("label", "Delete");
td.appendChild(btn);
return td;
};
-const TD = (s) => {
+const TD = (s, u) => {
const td = document.createElement("td");
const div = document.createElement("div");
div.innerHTML = s;
td.appendChild(div);
+ td.setAttribute("label", u);
return td;
};
diff --git a/actix/resources/static/styles.css b/actix/resources/static/styles.css
index 29f5c39..8b3a0d3 100644
--- a/actix/resources/static/styles.css
+++ b/actix/resources/static/styles.css
@@ -41,7 +41,7 @@ form input[name="shortUrl"]::placeholder {
div[name="github-link"] {
position: absolute;
right: 0.5%;
- bottom: 0.5%;
+ top: 0.5%;
}
.pure-table {
@@ -56,4 +56,45 @@ div[name="github-link"] {
#logo {
font-size: 32px;
+}
+
+#password {
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+dialog form {
+ text-align: center;
+}
+
+/* Settings for mobile devices */
+@media (pointer:none),
+(pointer:coarse) {
+ table tr {
+ border-bottom: 1px solid #999;
+ }
+
+ table thead {
+ display: none;
+ }
+
+ table td {
+ display: flex;
+ }
+
+ table td::before {
+ content: attr(label);
+ font-weight: bold;
+ width: 120px;
+ min-width: 120px;
+ text-align: left;
+ }
+
+ table tr td div {
+ width: 63vw
+ }
+
+ .pure-table caption {
+ padding-top: 0px;
+ }
}
\ No newline at end of file