diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl index 272ac931..37ec877c 100644 --- a/client/css/pool-list-view.styl +++ b/client/css/pool-list-view.styl @@ -3,7 +3,6 @@ .pool-list ul list-style-type: none - margin: 0 padding: 0 display: flex align-content: flex-end @@ -13,7 +12,7 @@ li position: relative flex-grow: 1 - margin: 0 0.25em 0.5em 0.25em + margin: 2em 1.5em 2em 1.2em; display: inline-block text-align: left min-width: 10em @@ -38,6 +37,23 @@ outline-offset: -3px &:not(.empty) background-position: 50% 30% + position: absolute + display: inline-block + + .thumbnail-1 + right: -0px; + top: -0px; + z-index: 30; + + .thumbnail-2 + right: -10px; + top: -10px; + z-index: 20; + + .thumbnail-3 + right: -20px; + top: -20px; + z-index: 10; .pool-name color: black @@ -80,9 +96,11 @@ li min-width: inherit width: inherit + margin: 0 0.25em 0.5em 0.25em &:not(.flexbox-dummy) height: 14vw .thumbnail + position: static outline-offset: -1px .thumbnail-wrapper.no-tags .thumbnail diff --git a/client/html/pools_page.tpl b/client/html/pools_page.tpl index 48530ea3..c935785f 100644 --- a/client/html/pools_page.tpl +++ b/client/html/pools_page.tpl @@ -4,8 +4,8 @@ <% for (let pool of ctx.response.results) { %> <li data-pool-id='<%= pool.id %>'> <a class='thumbnail-wrapper' href='<%= ctx.canViewPools ? ctx.formatClientLink("pool", pool.id) : "" %>'> - <% if (ctx.canViewPosts && pool.posts.length > 0) { %> - <%= ctx.makeThumbnail(pool.posts.at(0).thumbnailUrl) %> + <% if (ctx.canViewPosts) { %> + <%= ctx.makePoolThumbnails(pool.posts, ctx.postFlow) %> <% } %> </a> <div class='pool-name'> diff --git a/client/js/util/views.js b/client/js/util/views.js index 38c98a13..f9470375 100644 --- a/client/js/util/views.js +++ b/client/js/util/views.js @@ -40,12 +40,12 @@ function makeRelativeTime(time) { ); } -function makeThumbnail(url) { +function makeThumbnail(url, klass) { return makeElement( "span", url ? { - class: "thumbnail", + class: klass || "thumbnail", style: `background-image: url(\'${url}\')`, } : { class: "thumbnail empty" }, @@ -53,6 +53,23 @@ function makeThumbnail(url) { ); } +function makePoolThumbnails(posts, postFlow) { + if (posts.length == 0) { + return makeThumbnail(null); + } + if (postFlow) { + return makeThumbnail(posts.at(0).thumbnailUrl); + } + + let s = ""; + + for (let i = 0; i < Math.min(3, posts.length); i++) { + s += makeThumbnail(posts.at(i).thumbnailUrl, "thumbnail thumbnail-" + (i+1)); + } + + return s; +} + function makeRadio(options) { _imbueId(options); return makeElement( @@ -254,7 +271,7 @@ function makePoolLink(id, includeHash, includeCount, pool, name) { misc.escapeHtml(text) ) : makeElement( - "span", + "div", { class: misc.makeCssName(category, "pool") }, misc.escapeHtml(text) ); @@ -436,6 +453,7 @@ function getTemplate(templatePath) { makeFileSize: makeFileSize, makeMarkdown: makeMarkdown, makeThumbnail: makeThumbnail, + makePoolThumbnails: makePoolThumbnails, makeRadio: makeRadio, makeCheckbox: makeCheckbox, makeSelect: makeSelect,