From eaa6107a6ca6cca7f67802b9bf939f662f9343d5 Mon Sep 17 00:00:00 2001
From: Shyam Sunder <sgsunder1@gmail.com>
Date: Sun, 27 Sep 2020 15:11:34 -0400
Subject: [PATCH] client/posts: support content aware post flow option

---
 client/css/post-list-view.styl                | 16 ++++++++++++++++
 client/html/posts_page.tpl                    |  2 +-
 client/html/settings.tpl                      |  9 +++++++++
 client/js/controllers/post_list_controller.js |  1 +
 client/js/models/settings.js                  |  1 +
 client/js/views/settings_view.js              |  1 +
 6 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index 8d4989b3..3860dcff 100644
--- a/client/css/post-list-view.styl
+++ b/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
diff --git a/client/html/posts_page.tpl b/client/html/posts_page.tpl
index f6449194..78362787 100644
--- a/client/html/posts_page.tpl
+++ b/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) { %>
diff --git a/client/html/settings.tpl b/client/html/settings.tpl
index e8890d32..0edbe22b 100644
--- a/client/html/settings.tpl
+++ b/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',
diff --git a/client/js/controllers/post_list_controller.js b/client/js/controllers/post_list_controller.js
index 941ea9de..526d8f54 100644
--- a/client/js/controllers/post_list_controller.js
+++ b/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));
diff --git a/client/js/models/settings.js b/client/js/models/settings.js
index a4a54e50..b39f07fa 100644
--- a/client/js/models/settings.js
+++ b/client/js/models/settings.js
@@ -18,6 +18,7 @@ const defaultSettings = {
     postsPerPage: 42,
     tagUnderscoresAsSpaces: false,
     darkTheme: false,
+    postFlow: false,
 };
 
 class Settings extends events.EventTarget {
diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js
index 9717f7d0..b7f69d55 100644
--- a/client/js/views/settings_view.js
+++ b/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,
                 },
             })
         );