Stacked thumbnail appearance for pool list page

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

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'>

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,