From b60db3dcd5b1bdf40509390c064328a1f143588e Mon Sep 17 00:00:00 2001
From: fatchan <tom@69420.me>
Date: Wed, 10 Apr 2019 13:36:30 +0000
Subject: [PATCH] less ugly catalog on mobile

---
 static/css/style.css         | 40 ++++++++++++++++++++++++++++--------
 views/mixins/catalogtile.pug | 22 +++++++++++---------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 3e8cce3b..97b60b3e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -9,21 +9,43 @@ body {
 	margin: 0;
 }
 
+object {
+	object-fit: scale-down;
+}
+
+.catalog-tile-button {
+	width: 100%;
+	line-height: 30px;
+	float: left;
+	background: #B7C5D9;
+	text-decoration: none;
+	color: black;
+}
+
+.catalog-tile-content {
+	padding: 5px;
+}
+
 .catalog-tile {
+	margin: 2px;
 	text-align: center;
-	padding: 5px;
-	margin: 1px;
-	height: 150px;
-	width: 150px;
-	min-width: 150px;
+	max-height: 300px;
+	width: 250px;
 	overflow: hidden;
+	overflow-y: auto;
 	border: 2px solid #B7C5D9;
 	box-sizing: border-box;
+}
 
+.no-m-p {
+	margin: 0px;
+	padding: 0px;
 }
 
 .catalog-thumb {
 	box-shadow: 0 0 3px black;
+	min-width: 64px;
+	min-height: 64px;
 }
 
 .catalog {
@@ -126,7 +148,8 @@ input, textarea {
 .post-file {
 	display: inline-flex;
 	flex-direction: column;
-	margin: 0px 4px;
+	margin: 0 4px;
+	padding: 2px 0;
 }
 
 .post-file-info {
@@ -293,8 +316,9 @@ hr {
 	}
 
 	.catalog-tile {
-		width: 50%;
-		margin: 0px;
+		overflow-y: hidden;
+		width: 49%;
+		justify-content: space-evenly;
 	}
 
 }
diff --git a/views/mixins/catalogtile.pug b/views/mixins/catalogtile.pug
index 56e36e46..462db87b 100644
--- a/views/mixins/catalogtile.pug
+++ b/views/mixins/catalogtile.pug
@@ -1,12 +1,14 @@
 mixin catalogtile(board, post, truncate)
 	article(class='catalog-tile')
-		if post.files.length > 0
-			.post-file-src
-				a(target='_blank' href='/img/'+post.files[0].filename)
-					object.catalog-thumb(data=`/img/thumb-${post.files[0].filename.split('.')[0]}.png` width='64' height='64')
-		header.post-info
-			if post.subject
-				span.post-subject #{post.subject}
-			span: a(href=`/${board._id}/thread/${post.thread ? post.thread : post.postId}#${post.postId}`) ##{post.postId}
-		if post.message
-			blockquote.post-message !{post.message}
+		.catalog-tile-content
+			if post.files.length > 0
+				.post-file-src
+					a(href=`/${board._id}/thread/${post.postId}#${post.postId}`)
+						object.catalog-thumb(data=`/img/thumb-${post.files[0].filename.split('.')[0]}.png` width='64' height='64')
+			header.post-info
+				if post.subject
+					span: a.no-decoration.post-subject(href=`/${board._id}/thread/${post.postId}#${post.postId}`) #{post.subject}
+				span: a(href=`/${board._id}/thread/${post.postId}#${post.postId}`) ##{post.postId}
+			if post.message
+				blockquote.no-m-p.post-message !{post.message}
+		a.catalog-tile-button(href=`/${board._id}/thread/${post.postId}#${post.postId}`) Open Thread