Improve mobile user experience.

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;
+	}
+}

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') }}">