[Posts] Add an option for a sticky searchbar (#911)

app/helpers/icon_helper.rb

@@ -30,6 +30,7 @@ module IconHelper
     # Posts
     search: %(<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>),
     fullscreen: %(<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/>),
+    anchor: %(<path d="M12 22V8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/>),
   }.freeze
 
   def svg_icon(name, *args)

app/javascript/src/javascripts/post_search.js

@@ -67,6 +67,13 @@ PostSearch.initialize_controls = function () {
     $("body").attr("data-st-fullscreen", fullscreen);
     LStorage.Posts.Fullscreen = fullscreen;
   });
+
+  let stickySearch = LStorage.Posts.StickySearch;
+  $("#search-sticky").on("click", () => {
+    stickySearch = !stickySearch;
+    $("body").attr("data-st-stickysearch", stickySearch);
+    LStorage.Posts.StickySearch = stickySearch;
+  });
 };
 
 $(() => {

app/javascript/src/javascripts/utility/storage.js

@@ -91,6 +91,9 @@ LStorage.Posts = {
 
   /** @returns {boolean} True if the search should be displayed in fullscreen */
   Fullscreen: ["e6.posts.fusk", false],
+
+  /** @returns {boolean} True if the search should be displayed in fullscreen */
+  StickySearch: ["e6.posts.stickysearch", false],
 };
 StorageUtils.bootstrapMany(LStorage.Posts);
 

app/javascript/src/styles/common/tables.scss

@@ -92,8 +92,6 @@ table.search {
 }
 
 table.aligned-vertical {
-  @extend .search;
-
   tr {
     height: 1.75em;
   }

app/javascript/src/styles/views/posts/_posts.scss

@@ -13,4 +13,7 @@
   @include with-setting("fullscreen", "true") {
     @import "index/partials/fullscreen";
   }
+  @include with-setting("stickysearch", "true") {
+    @import "index/partials/sticky";
+  }
 }

app/javascript/src/styles/views/posts/index/_index.desktop.scss

@@ -13,9 +13,35 @@
     border-top-left-radius: 0.25rem;
     padding: 0.5rem;
 
+    // Align the controls properly
+    position: relative;
+
     .search-controls {
       display: flex;
-      margin-top: 0.5rem;
+      flex-flow: row;
+      justify-content: right;
+
+      position: absolute;
+      bottom: -1.633rem;
+      right: 0.25rem;
+
+      padding: 0.25rem;
+      gap: 0.5rem;
+
+      background: themed("color-foreground");
+      border-radius: 0 0 0.25rem 0.25rem;
+
+      button {
+        height: 1.5rem;
+        padding: 0;
+
+        svg {
+          height: 1.25rem;
+          width: 1.25rem;
+          padding: 0.25rem;
+          margin: -0.125rem 0;
+        }
+      }
     }
   }
 
@@ -23,7 +49,7 @@
     box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background");
     margin-bottom: 0.25rem;
     border-bottom-left-radius: 0.25rem;
-    padding: 0.5rem
+    padding: 0.5rem;
   }
 
   .content {

app/javascript/src/styles/views/posts/index/_index.scss

@@ -44,10 +44,7 @@ body.c-posts.a-index, body.c-favorites.a-index {
       font-size: $h3-size;
     }
 
-    .search-controls {
+    .search-controls { display: none; }
-      display: none;
-      flex-flow: column;
-    }
   }
 
   // 2. Content

app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss

@@ -10,18 +10,18 @@
     display: flex;
     border-radius: 0.25rem 0.25rem 0 0;
     box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background");
-    .post-search {
+
-      flex: 1;
+    margin: 0.25rem 0 0;
-    }
+    padding: 0.5rem;
-    .search-controls {
+
-      display: flex;
+    flex-wrap: wrap;
-      justify-content: right;
+    justify-content: right;
-      align-self: end;
+
-      margin: 0 0 0 0.5rem;
+    .post-search { width: 100%; }
-      .st-button.w100 {
+
-        width: unset;
+    #search-fullscreen {
-        span { display: none; }
+      background: themed("color-button-active");
-      }
+      color: black;
     }
   }
   .sidebar { display: none; }

app/javascript/src/styles/views/posts/index/partials/_sticky.scss

@@ -0,0 +1,16 @@
+.post-index .search {
+  position: sticky;
+  top: 0;
+
+  // on top of thumbnail labels
+  z-index: 11;
+
+  #search-sticky {
+    background: themed("color-button-active");
+    color: black;
+  }
+}
+
+&[data-th-sheader="true"] {
+  .post-index .search { top: 3.75rem; }
+}

app/views/layouts/_theme_include.html.erb

@@ -12,6 +12,7 @@
 
       // Settings
       "st-fullscreen": localStorage.getItem("e6.posts.fusk") || false,
+      "st-stickysearch": localStorage.getItem("e6.posts.stickysearch") || false,
     };
 
     var b = document.body;

app/views/posts/partials/index/_controls.html.erb

@@ -1,6 +1,8 @@
 <div class="search-controls">
-  <button id="search-fullscreen" class="st-button w100 stealth">
+  <button id="search-fullscreen" class="st-button" title="Fullscreen mode">
     <%= svg_icon(:fullscreen) %>
-    <span>Fullscreen</span>
+  </button>
+  <button id="search-sticky" class="st-button" title="Sticky searchbar">
+    <%= svg_icon(:anchor) %>
   </button>
 </div>