client/posts: support content aware post flow option

client/css/post-list-view.styl

@@ -134,6 +134,22 @@
                 .thumbnail
                     outline: 4px solid $main-color !important
 
+.post-flow
+    ul
+        li
+            min-width: inherit
+            width: inherit
+            &:not(.flexbox-dummy)
+                height: 14vw
+            .thumbnail
+                outline-offset: -1px
+            .thumbnail-wrapper.no-tags
+                .thumbnail
+                    outline: 2px solid $post-thumbnail-no-tags-border-color
+            &:hover a, a:active, a:focus
+                .thumbnail
+                    outline: 2px solid $main-color !important
+
 .post-list-header
     white-space: nowrap
     text-align: left

client/html/posts_page.tpl

@@ -1,4 +1,4 @@
-<div class='post-list'>
+<% if (ctx.postFlow) { %><div class='post-list post-flow'><% } else { %><div class='post-list'><% } %>
     <% if (ctx.response.results.length) { %>
         <ul>
             <% for (let post of ctx.response.results) { %>

client/html/settings.tpl

@@ -47,6 +47,15 @@
                 <p class='hint'>Rather than using a paged navigation, smoothly scrolls through the content.</p>
             </li>
 
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Use post flow',
+                    name: 'post-flow',
+                    checked: ctx.browsingSettings.postFlow,
+                }) %>
+                <p class='hint'>Use a content-aware flow for thumbnails on the post search page.</p>
+            </li>
+
             <li>
                 <%= ctx.makeCheckbox({
                     text: 'Enable transparency grid',

client/js/controllers/post_list_controller.js

@@ -120,6 +120,7 @@ class PostListController {
                     bulkEdit: {
                         tags: this._bulkEditTags,
                     },
+                    postFlow: settings.get().postFlow,
                 });
                 const view = new PostsPageView(pageCtx);
                 view.addEventListener("tag", (e) => this._evtTag(e));

client/js/models/settings.js

@@ -18,6 +18,7 @@ const defaultSettings = {
     postsPerPage: 42,
     tagUnderscoresAsSpaces: false,
     darkTheme: false,
+    postFlow: false,
 };
 
 class Settings extends events.EventTarget {

client/js/views/settings_view.js

@@ -45,6 +45,7 @@ class SettingsView extends events.EventTarget {
                     tagUnderscoresAsSpaces: this._find("underscores-as-spaces")
                         .checked,
                     darkTheme: this._find("dark-theme").checked,
+                    postFlow: this._find("post-flow").checked,
                 },
             })
         );