catalog multiple images & flags. i think thats all, close #381 lose #385

gulp/res/css/style.css

@@ -272,13 +272,13 @@ object {
 	padding: 5px;
 	margin: 5px;
 	text-align: center;
-	height: 220px;
-	width: 180px;
+	height: 340px;
+	width: 280px;
 	overflow: hidden;
 	border: 1px solid var(--post-outline-color);
 	box-sizing: border-box;
 	flex-grow: 1;
-	max-width: 250px;
+	max-width: 280px;
 }
 
 .catalog-tile:focus {
@@ -298,10 +298,10 @@ p {
 	display: block;
 	box-shadow: 0 0 3px black;
 	width: auto;
-	max-height: 64px;
+	max-height: 100px;
 	box-sizing: border-box;
 	object-fit: cover;
-	margin: 0 auto 5px;
+	margin: 3px;
 	padding: 2px;
 }
 
@@ -310,6 +310,19 @@ p {
 	width: 64px;
 }
 
+.catalog-thumb.small {
+	max-height: 48px;
+	max-width: 48px;
+}
+
+.ct-r1 {
+	justify-content: center;
+}
+
+.ct-r2 {
+	justify-content: space-evenly;
+}
+
 .upload-list {
 	max-height: 75px;
 	overflow-x: hidden;
@@ -1387,6 +1400,11 @@ row.wrap.sb .col {
 
 @media only screen and (max-width: 600px) {
 
+	.ct-r2 .catalog-thumb.small {
+		max-width: 32px;
+		max-height: 32px;
+	}
+
 	.postmenu {
 		border-left: .5em solid transparent;
 		border-right: .5em solid transparent;

views/mixins/catalogtile.pug

@@ -27,6 +27,14 @@ mixin catalogtile(post, index, overboard=false)
 			if modview
 				a.left.ml-5.bold(href=`recent.html?postid=${post.postId}`) [+]
 			include ../includes/posticons.pug
+			if post.country && post.country.code
+				if post.country.custom === true
+					span(title=post.country.name)
+						img.customflag(src=`/flag/${post.board}/${post.country.src}` alt=' ' loading='lazy')
+					| 
+				else
+					span(class=`flag flag-${post.country.code.toLowerCase()}` title=post.country.name alt=post.country.name)
+					| 
 			a.no-decoration.post-subject(href=postURL) #{post.subject || 'No subject'}
 			br 
 			span(title='Replies') R: #{post.replyposts}
@@ -36,18 +44,37 @@ mixin catalogtile(post, index, overboard=false)
 				|  / 
 				span(title='Page') P: #{Math.ceil(index/10)}
 		if post.files.length > 0
-			.post-file-src
-				a(href=`${postURL}#${post.postId}`)
+			.col
+				.row.ct-r1
 					- const file = post.files[0]
-					if post.spoiler || file.spoiler
-						div.spoilerimg.catalog-thumb
-					else if file.hasThumb
-						img.catalog-thumb(src=`/file/thumb/${file.hash}${file.thumbextension}` width=file.geometry.thumbwidth height=file.geometry.thumbheight loading='lazy')
-					else if file.attachment
-						div.attachmentimg.catalog-thumb(data-mimetype=file.mimetype)
-					else if file.mimetype.startsWith('audio')
-						div.audioimg.catalog-thumb
-					else
-						img.catalog-thumb(src=`/file/${file.filename}` width=file.geometry.width height=file.geometry.height loading='lazy')
+					- const type = file.mimetype.split('/')[0]
+					.post-file-src
+						a(href=`${postURL}#${post.postId}`)
+							if post.spoiler || file.spoiler
+								div.spoilerimg.catalog-thumb
+							else if file.hasThumb
+								img.catalog-thumb(src=`/file/thumb/${file.hash}${file.thumbextension}` width=file.geometry.thumbwidth height=file.geometry.thumbheight loading='lazy')
+							else if file.attachment
+								div.attachmentimg.catalog-thumb(data-mimetype=file.mimetype)
+							else if type === 'audio'
+								div.audioimg.catalog-thumb
+							else
+								img.catalog-thumb(src=`/file/${file.filename}` width=file.geometry.width height=file.geometry.height loading='lazy')
+				if post.files.length > 1
+					.row.ct-r2.wrap
+						each file, fileindex in post.files.slice(1)
+							- const type = file.mimetype.split('/')[0]
+							.post-file-src
+								a(href=`${postURL}#${post.postId}`)
+									if post.spoiler || file.spoiler
+										div.spoilerimg.catalog-thumb.small
+									else if file.hasThumb
+										img.catalog-thumb.small(src=`/file/thumb/${file.hash}${file.thumbextension}` height=file.geometry.thumbheight width=file.geometry.thumbwidth loading='lazy')
+									else if file.attachment
+										div.attachmentimg.catalog-thumb.small(data-mimetype=file.mimetype)
+									else if type === 'audio'
+										div.audioimg.catalog-thumb.small
+									else
+										img.catalog-thumb.small(src=`/file/${file.filename}` height=file.geometry.height width=file.geometry.width loading='lazy')
 		if post.message
 			pre.no-m-p.post-message !{post.message}