less ugly catalog on mobile

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;
+	max-height: 300px;
-	margin: 1px;
+	width: 250px;
-	height: 150px;
-	width: 150px;
-	min-width: 150px;
 	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%;
+		overflow-y: hidden;
-		margin: 0px;
+		width: 49%;
+		justify-content: space-evenly;
 	}
 
 }

views/mixins/catalogtile.pug

@@ -1,12 +1,14 @@
 mixin catalogtile(board, post, truncate)
 	article(class='catalog-tile')
-		if post.files.length > 0
+		.catalog-tile-content
-			.post-file-src
+			if post.files.length > 0
-				a(target='_blank' href='/img/'+post.files[0].filename)
+				.post-file-src
-					object.catalog-thumb(data=`/img/thumb-${post.files[0].filename.split('.')[0]}.png` width='64' height='64')
+					a(href=`/${board._id}/thread/${post.postId}#${post.postId}`)
-		header.post-info
+						object.catalog-thumb(data=`/img/thumb-${post.files[0].filename.split('.')[0]}.png` width='64' height='64')
-			if post.subject
+			header.post-info
-				span.post-subject #{post.subject}
+				if post.subject
-			span: a(href=`/${board._id}/thread/${post.thread ? post.thread : post.postId}#${post.postId}`) ##{post.postId}
+					span: a.no-decoration.post-subject(href=`/${board._id}/thread/${post.postId}#${post.postId}`) #{post.subject}
-		if post.message
+				span: a(href=`/${board._id}/thread/${post.postId}#${post.postId}`) ##{post.postId}
-			blockquote.post-message !{post.message}
+			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