From 8f4202c098e190a91505311c9260e2d8b4a738e4 Mon Sep 17 00:00:00 2001
From: Alex Ingram <reimu@reimuhakurei.net>
Date: Tue, 24 Apr 2018 23:12:51 -0500
Subject: [PATCH] Improve mobile user experience.

---
 nyaa/static/css/main.css   | 45 ++++++++++++++++++++++++++++++++++++++
 nyaa/templates/layout.html |  2 +-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index c443406..c86333a 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -605,3 +605,48 @@ td.report-action-column {
 blockquote {
 	font-size: inherit;
 }
+
+/* Hide and resize some things on tiny screens to improve usability. */
+@media (max-width: 767px) {
+	.hdr-size, .hdr-date, .hdr-downloads,
+	table.torrent-list > tbody > tr > td:nth-child(4),
+	table.torrent-list > tbody > tr > td:nth-child(5),
+	table.torrent-list > tbody > tr > td:nth-child(8) {
+		display: none;
+	}
+
+	table.torrent-list > tbody > tr > td:nth-child(7) {
+		border-right: 0;
+	}
+
+	.table thead > tr > th {
+		border-right: none;
+	}
+
+	table.torrent-list > tbody > tr > td:nth-child(3) > a {
+		display: block;
+	}
+
+	.hdr-link {
+		width: 32px !important;
+	}
+
+	.hdr-seeders, .hdr-leechers {
+		width: 48px !important;
+	}
+
+	.hdr-category {
+		width: 20px !important;
+		overflow: hidden;
+		text-indent: -9999px;
+	}
+
+	table.torrent-list > tbody > tr > td:first-child {
+		overflow: hidden;
+	}
+
+	table.torrent-list > tbody > tr > td:first-child img {
+		width: 50px;
+		height: auto;
+	}
+}
diff --git a/nyaa/templates/layout.html b/nyaa/templates/layout.html
index 325f796..2c8c1e5 100644
--- a/nyaa/templates/layout.html
+++ b/nyaa/templates/layout.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		<title>{% block title %}{{ config.SITE_NAME }}{% endblock %}</title>
 
-		<meta name="viewport" content="width=device-width">
+		<meta name="viewport" content="width=480px">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
 		<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">