[magneticow] now works on mobile!
This commit is contained in:
Bora M. Alper
parent
a25ca2e602
commit
a40322d2d8
@ -67,8 +67,8 @@ function load() {
|
||||
button.textContent = "Loading More Results...";
|
||||
button.setAttribute("disabled", ""); // disable the button whilst loading...
|
||||
|
||||
const tbody = document.getElementsByTagName("tbody")[0];
|
||||
const template = document.getElementById("row-template").innerHTML;
|
||||
const ul = document.querySelector("main ul");
|
||||
const template = document.getElementById("item-template").innerHTML;
|
||||
const reqURL = "/api/v0.1/torrents?" + encodeQueryData({
|
||||
query : query,
|
||||
epoch : epoch,
|
||||
@ -110,7 +110,7 @@ function load() {
|
||||
year: "numeric"
|
||||
});
|
||||
|
||||
tbody.innerHTML += Mustache.render(template, t);
|
||||
ul.innerHTML += Mustache.render(template, t);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -49,6 +49,12 @@ body {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 800px) {
|
||||
body {
|
||||
padding: 1em 1em 1em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -2,9 +2,16 @@ main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
height: calc(100vh - 2 * 3em);
|
||||
width: calc(100vw - 2 * 3em);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 800px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
main form {
|
||||
|
||||
@ -10,6 +10,12 @@ header {
|
||||
margin-bottom: 0.833em;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 800px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
header div a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
@ -10,6 +10,11 @@ header {
|
||||
margin-bottom: 0.833em;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 800px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
header div a {
|
||||
text-decoration: none;
|
||||
@ -62,82 +67,23 @@ footer button:nth-child(2) {
|
||||
margin-left: 0.833em;
|
||||
}
|
||||
|
||||
ul li {
|
||||
border: 1px solid;
|
||||
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
tbody td, thead th {
|
||||
padding-left: 0.833em;
|
||||
padding-right: 0.833em;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
thead th:nth-child(1) { /* magnet link */
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
|
||||
thead th:nth-child(2) { /* name */
|
||||
max-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
thead th:nth-child(3) { /* size */
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
|
||||
tbody td:nth-child(3n+0) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
thead th:nth-child(4) { /* discovered on */
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n+2) {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
|
||||
/* table in-borders */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
table tr:first-child th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
table tr td:first-child,
|
||||
table tr th:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
table tr td:last-child,
|
||||
table tr th:last-child {
|
||||
border-right: 0;
|
||||
ul li div {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
ul li div h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>magneticow</title>
|
||||
<link rel="stylesheet" href="static/styles/reset.css">
|
||||
<link rel="stylesheet" href="static/styles/essential.css">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Statistics - magneticow</title>
|
||||
|
||||
<link rel="stylesheet" href="static/styles/reset.css">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ .T.Name }} - magnetico</title>
|
||||
<link rel="stylesheet" href="/static/styles/reset.css">
|
||||
<link rel="stylesheet" href="/static/styles/essential.css">
|
||||
@ -41,7 +42,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Contents</h3>
|
||||
<h3>Files</h3>
|
||||
<!-- Content of this element will be overwritten by the script -->
|
||||
<pre>{{ range .F }}{{ .Path }}{{ "\t" }}{{ humanizeSizeF .Size }}{{ "\n" }}{{ end }}</pre>
|
||||
</main>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Search - magneticow</title>
|
||||
|
||||
<link rel="stylesheet" href="static/styles/reset.css">
|
||||
@ -12,15 +13,16 @@
|
||||
<script src="static/scripts/common.js"></script>
|
||||
<script src="static/scripts/torrents.js"></script>
|
||||
|
||||
<script id="row-template" type="text/x-handlebars-template">
|
||||
<tr>
|
||||
<td><a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
|
||||
<script id="item-template" type="text/x-handlebars-template">
|
||||
<li>
|
||||
<div>
|
||||
<h3><a href="/torrents/{{infoHash}}">{{name}}</a></h3>
|
||||
<a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
|
||||
<img src="static/assets/magnet.gif" alt="Magnet link"
|
||||
title="Download this torrent using magnet" /></a></td>
|
||||
<td><a href="/torrents/{{infoHash}}">{{name}}</a></td>
|
||||
<td>{{size}}</td>
|
||||
<td>{{discoveredOn}}</td>
|
||||
</tr>
|
||||
title="Download this torrent using magnet" /> <small>{{infoHash}}</small></a>
|
||||
</div>
|
||||
{{size}}, {{discoveredOn}}
|
||||
</li>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
@ -36,18 +38,8 @@
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><!-- Magnet link --></th>
|
||||
<th>Name</th>
|
||||
<th>Size</th>
|
||||
<th>Discovered on</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rows">
|
||||
</tbody>
|
||||
</table>
|
||||
<ul>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<button onclick="load();">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user