readonly/mirror-chhoto-url
1
0
Fork 0
mirror of https://github.com/minoplhy/chhoto-url.git synced 2024-11-22 17:26:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve UI for mobile

Browse Source
This commit is contained in:
SinTan1729 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

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

@ -61,15 +61,16 @@ const showAlert = async (text, col) => {
const TR = (row, site) => { const TR = (row, site) => {
const tr = document.createElement("tr"); const tr = document.createElement("tr");
const longTD = TD(A_LONG(row.long)); const longTD = TD(A_LONG(row.long), "Long URL");
var shortTD = null; var shortTD = null;
if (window.isSecureContext) { if (window.isSecureContext) {
shortTD = TD(A_SHORT(row.short, site)); shortTD = TD(A_SHORT(row.short, site), "Short URL");
} }
else { 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); const btn = deleteButton(row.short);
tr.appendChild(shortTD); tr.appendChild(shortTD);
@ -122,15 +123,17 @@ const deleteButton = (shortUrl) => {
} }
}; };
td.setAttribute("name", "deleteBtn"); td.setAttribute("name", "deleteBtn");
td.setAttribute("label", "Delete");
td.appendChild(btn); td.appendChild(btn);
return td; return td;
}; };
const TD = (s) => { const TD = (s, u) => {
const td = document.createElement("td"); const td = document.createElement("td");
const div = document.createElement("div"); const div = document.createElement("div");
div.innerHTML = s; div.innerHTML = s;
td.appendChild(div); td.appendChild(div);
td.setAttribute("label", u);
return td; return td;
}; };

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

@ -41,7 +41,7 @@ form input[name="shortUrl"]::placeholder {
div[name="github-link"] { div[name="github-link"] {
position: absolute; position: absolute;
right: 0.5%; right: 0.5%;
bottom: 0.5%; top: 0.5%;
} }
.pure-table { .pure-table {
@ -57,3 +57,44 @@ div[name="github-link"] {
#logo { #logo {
font-size: 32px; 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;
}
}