From 8325f0c2d283d74877eae0ebb1ad1618867785ba Mon Sep 17 00:00:00 2001
From: SinTan1729 <sayantan.santra689@gmail.com>
Date: Fri, 14 Apr 2023 17:18:18 -0500
Subject: [PATCH] Improve UI for mobile

---
 actix/resources/index.html        |  2 +-
 actix/resources/static/script.js  | 13 ++++++----
 actix/resources/static/styles.css | 43 ++++++++++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 7 deletions(-)

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 @@
             <br>
             <thead>
                 <tr>
-                    <td id=" short-url-header">Short URL<br>(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>
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