rnhmjoj/magnetico
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

[magneticow] now works on mobile!

Browse Source
This commit is contained in:
Bora M. Alper 2019-05-19 17:21:50 +01:00
parent a25ca2e602
commit a40322d2d8
No known key found for this signature in database
GPG Key ID: 8F1A9504E1BD114D
9 changed files with 61 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cmd/magneticow/data/static/scripts/torrents.js
View File

@ -67,8 +67,8 @@ function load() {
button.textContent = "Loading More Results..."; button.textContent = "Loading More Results...";
button.setAttribute("disabled", ""); // disable the button whilst loading... button.setAttribute("disabled", ""); // disable the button whilst loading...
const tbody = document.getElementsByTagName("tbody")[0]; const ul = document.querySelector("main ul");
const template = document.getElementById("row-template").innerHTML; const template = document.getElementById("item-template").innerHTML;
const reqURL = "/api/v0.1/torrents?" + encodeQueryData({ const reqURL = "/api/v0.1/torrents?" + encodeQueryData({
query : query, query : query,
epoch : epoch, epoch : epoch,
@ -110,7 +110,7 @@ function load() {
year: "numeric" year: "numeric"
}); });
tbody.innerHTML += Mustache.render(template, t); ul.innerHTML += Mustache.render(template, t);
} }
}; };

6
cmd/magneticow/data/static/styles/essential.css
View File

@ -49,6 +49,12 @@ body {
line-height: 1.45; line-height: 1.45;
} }
@media only screen and (max-device-width: 800px) {
body {
padding: 1em 1em 1em 1em;
}
}
b { b {
font-weight: bold; font-weight: bold;
} }

9
cmd/magneticow/data/static/styles/homepage.css
View File

@ -2,9 +2,16 @@ main {
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
justify-content: center;
height: calc(100vh - 2 * 3em); 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 { main form {

6
cmd/magneticow/data/static/styles/torrent.css
View File

@ -10,6 +10,12 @@ header {
margin-bottom: 0.833em; margin-bottom: 0.833em;
} }
@media only screen and (max-device-width: 800px) {
header {
flex-direction: column;
}
}
header div a { header div a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;

96
cmd/magneticow/data/static/styles/torrents.css
View File

@ -10,6 +10,11 @@ header {
margin-bottom: 0.833em; margin-bottom: 0.833em;
} }
@media only screen and (max-device-width: 800px) {
header {
flex-direction: column;
}
}
header div a { header div a {
text-decoration: none; text-decoration: none;
@ -62,82 +67,23 @@ footer button:nth-child(2) {
margin-left: 0.833em; margin-left: 0.833em;
} }
ul li {
border: 1px solid;
padding: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0.5em;
}
table { ul li div {
width: 100%; margin-bottom: 0.25em;
} }
ul li div h3 {
th { margin: 0;
font-weight: bold; }
text-align: left;
} a {
color: black;
text-decoration: none;
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;
} }

1
cmd/magneticow/data/templates/homepage.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>magneticow</title> <title>magneticow</title>
<link rel="stylesheet" href="static/styles/reset.css"> <link rel="stylesheet" href="static/styles/reset.css">
<link rel="stylesheet" href="static/styles/essential.css"> <link rel="stylesheet" href="static/styles/essential.css">

1
cmd/magneticow/data/templates/statistics.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistics - magneticow</title> <title>Statistics - magneticow</title>
<link rel="stylesheet" href="static/styles/reset.css"> <link rel="stylesheet" href="static/styles/reset.css">

3
cmd/magneticow/data/templates/torrent.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .T.Name }} - magnetico</title> <title>{{ .T.Name }} - magnetico</title>
<link rel="stylesheet" href="/static/styles/reset.css"> <link rel="stylesheet" href="/static/styles/reset.css">
<link rel="stylesheet" href="/static/styles/essential.css"> <link rel="stylesheet" href="/static/styles/essential.css">
@ -41,7 +42,7 @@
</tr> </tr>
</table> </table>
<h3>Contents</h3> <h3>Files</h3>
<!-- Content of this element will be overwritten by the script --> <!-- Content of this element will be overwritten by the script -->
<pre>{{ range .F }}{{ .Path }}{{ "\t" }}{{ humanizeSizeF .Size }}{{ "\n" }}{{ end }}</pre> <pre>{{ range .F }}{{ .Path }}{{ "\t" }}{{ humanizeSizeF .Size }}{{ "\n" }}{{ end }}</pre>
</main> </main>

34
cmd/magneticow/data/templates/torrents.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search - magneticow</title> <title>Search - magneticow</title>
<link rel="stylesheet" href="static/styles/reset.css"> <link rel="stylesheet" href="static/styles/reset.css">
@ -12,15 +13,16 @@
<script src="static/scripts/common.js"></script> <script src="static/scripts/common.js"></script>
<script src="static/scripts/torrents.js"></script> <script src="static/scripts/torrents.js"></script>
<script id="row-template" type="text/x-handlebars-template"> <script id="item-template" type="text/x-handlebars-template">
<tr> <li>
<td><a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}"> <div>
<img src="static/assets/magnet.gif" alt="Magnet link" <h3><a href="/torrents/{{infoHash}}">{{name}}</a></h3>
title="Download this torrent using magnet" /></a></td> <a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
<td><a href="/torrents/{{infoHash}}">{{name}}</a></td> <img src="static/assets/magnet.gif" alt="Magnet link"
<td>{{size}}</td> title="Download this torrent using magnet" /> <small>{{infoHash}}</small></a>
<td>{{discoveredOn}}</td> </div>
</tr> {{size}}, {{discoveredOn}}
</li>
</script> </script>
</head> </head>
<body> <body>
@ -36,18 +38,8 @@
</div> </div>
</header> </header>
<main> <main>
<table> <ul>
<thead> </ul>
<tr>
<th><!-- Magnet link --></th>
<th>Name</th>
<th>Size</th>
<th>Discovered on</th>
</tr>
</thead>
<tbody id="rows">
</tbody>
</table>
</main> </main>
<footer> <footer>
<button onclick="load();"> <button onclick="load();">