From a40322d2d84777dd2b7a284065b4daae01f2f3d8 Mon Sep 17 00:00:00 2001
From: "Bora M. Alper" <bora@boramalper.org>
Date: Sun, 19 May 2019 17:21:50 +0100
Subject: [PATCH] [magneticow] now works on mobile!

---
 .../data/static/scripts/torrents.js           |  6 +-
 .../data/static/styles/essential.css          |  6 ++
 .../data/static/styles/homepage.css           |  9 +-
 cmd/magneticow/data/static/styles/torrent.css |  6 ++
 .../data/static/styles/torrents.css           | 96 ++++---------------
 cmd/magneticow/data/templates/homepage.html   |  1 +
 cmd/magneticow/data/templates/statistics.html |  1 +
 cmd/magneticow/data/templates/torrent.html    |  3 +-
 cmd/magneticow/data/templates/torrents.html   | 34 +++----
 9 files changed, 61 insertions(+), 101 deletions(-)

diff --git a/cmd/magneticow/data/static/scripts/torrents.js b/cmd/magneticow/data/static/scripts/torrents.js
index 5b5a758..8ab5589 100644
--- a/cmd/magneticow/data/static/scripts/torrents.js
+++ b/cmd/magneticow/data/static/scripts/torrents.js
@@ -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);
         }
     };
 
diff --git a/cmd/magneticow/data/static/styles/essential.css b/cmd/magneticow/data/static/styles/essential.css
index 6c940cb..e2c2bf2 100644
--- a/cmd/magneticow/data/static/styles/essential.css
+++ b/cmd/magneticow/data/static/styles/essential.css
@@ -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;
 }
diff --git a/cmd/magneticow/data/static/styles/homepage.css b/cmd/magneticow/data/static/styles/homepage.css
index 384d922..a5555e9 100644
--- a/cmd/magneticow/data/static/styles/homepage.css
+++ b/cmd/magneticow/data/static/styles/homepage.css
@@ -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 {
diff --git a/cmd/magneticow/data/static/styles/torrent.css b/cmd/magneticow/data/static/styles/torrent.css
index 8f57910..6527a40 100644
--- a/cmd/magneticow/data/static/styles/torrent.css
+++ b/cmd/magneticow/data/static/styles/torrent.css
@@ -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;
diff --git a/cmd/magneticow/data/static/styles/torrents.css b/cmd/magneticow/data/static/styles/torrents.css
index 6cbe505..5485068 100644
--- a/cmd/magneticow/data/static/styles/torrents.css
+++ b/cmd/magneticow/data/static/styles/torrents.css
@@ -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;
 }
 
 
diff --git a/cmd/magneticow/data/templates/homepage.html b/cmd/magneticow/data/templates/homepage.html
index cc49dab..60f5ce8 100644
--- a/cmd/magneticow/data/templates/homepage.html
+++ b/cmd/magneticow/data/templates/homepage.html
@@ -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">
diff --git a/cmd/magneticow/data/templates/statistics.html b/cmd/magneticow/data/templates/statistics.html
index 258f227..c8bfd19 100644
--- a/cmd/magneticow/data/templates/statistics.html
+++ b/cmd/magneticow/data/templates/statistics.html
@@ -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">
diff --git a/cmd/magneticow/data/templates/torrent.html b/cmd/magneticow/data/templates/torrent.html
index 65458af..e0af377 100644
--- a/cmd/magneticow/data/templates/torrent.html
+++ b/cmd/magneticow/data/templates/torrent.html
@@ -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>
diff --git a/cmd/magneticow/data/templates/torrents.html b/cmd/magneticow/data/templates/torrents.html
index b670362..8481de6 100644
--- a/cmd/magneticow/data/templates/torrents.html
+++ b/cmd/magneticow/data/templates/torrents.html
@@ -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}}">
-                <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>
+    <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" /> <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();">