SinTan1729/chhoto-url
SinTan1729/chhoto-url
1
0
Fork 0
mirror of https://github.com/SinTan1729/chhoto-url synced 2024-12-26 07:38:36 -06:00
Code Issues Releases Activity

Improve UI for mobile

Browse source
This commit is contained in:
Sayantan Santra 2023-04-14 17:18:18 -05:00
parent a91bcc0503
commit 8325f0c2d2
3 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
actix/resources/index.html
View file

@ -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>

13
actix/resources/static/script.js
View file

@ -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;
};

43
actix/resources/static/styles.css
View file

@ -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 {
@ -57,3 +57,44 @@ 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;
}
}