diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index e57b022a..a0b2bdab 100644 --- a/gulp/res/css/style.css +++ b/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; diff --git a/views/mixins/catalogtile.pug b/views/mixins/catalogtile.pug index 6c3bcc72..50d8dded 100644 --- a/views/mixins/catalogtile.pug +++ b/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}