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 @@
- Short URL
(click to copy) + Short URL
(click to copy) 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