diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
index 34bc65282..4a628f9ad 100644
--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -30,6 +30,7 @@ module IconHelper
# Posts
search: %(),
fullscreen: %(),
+ anchor: %(),
}.freeze
def svg_icon(name, *args)
diff --git a/app/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js
index b5b3e6a17..55421cfec 100644
--- a/app/javascript/src/javascripts/post_search.js
+++ b/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;
+ });
};
$(() => {
diff --git a/app/javascript/src/javascripts/utility/storage.js b/app/javascript/src/javascripts/utility/storage.js
index 62847cc6a..55c65e4ab 100644
--- a/app/javascript/src/javascripts/utility/storage.js
+++ b/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);
diff --git a/app/javascript/src/styles/common/tables.scss b/app/javascript/src/styles/common/tables.scss
index e08ec9a00..6092e32fb 100644
--- a/app/javascript/src/styles/common/tables.scss
+++ b/app/javascript/src/styles/common/tables.scss
@@ -92,8 +92,6 @@ table.search {
}
table.aligned-vertical {
- @extend .search;
-
tr {
height: 1.75em;
}
diff --git a/app/javascript/src/styles/views/posts/_posts.scss b/app/javascript/src/styles/views/posts/_posts.scss
index 0508e64b5..56c38dadb 100644
--- a/app/javascript/src/styles/views/posts/_posts.scss
+++ b/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";
+ }
}
diff --git a/app/javascript/src/styles/views/posts/index/_index.desktop.scss b/app/javascript/src/styles/views/posts/index/_index.desktop.scss
index ccb999563..60f429ece 100644
--- a/app/javascript/src/styles/views/posts/index/_index.desktop.scss
+++ b/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 {
diff --git a/app/javascript/src/styles/views/posts/index/_index.scss b/app/javascript/src/styles/views/posts/index/_index.scss
index 0d75e5c0e..8c7da8df3 100644
--- a/app/javascript/src/styles/views/posts/index/_index.scss
+++ b/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 {
- display: none;
- flex-flow: column;
- }
+ .search-controls { display: none; }
}
// 2. Content
diff --git a/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss b/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss
index 6730b7019..a8e68dd72 100644
--- a/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss
+++ b/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;
- }
- .search-controls {
- display: flex;
- justify-content: right;
- align-self: end;
- margin: 0 0 0 0.5rem;
- .st-button.w100 {
- width: unset;
- span { display: none; }
- }
+
+ margin: 0.25rem 0 0;
+ padding: 0.5rem;
+
+ flex-wrap: wrap;
+ justify-content: right;
+
+ .post-search { width: 100%; }
+
+ #search-fullscreen {
+ background: themed("color-button-active");
+ color: black;
}
}
.sidebar { display: none; }
diff --git a/app/javascript/src/styles/views/posts/index/partials/_sticky.scss b/app/javascript/src/styles/views/posts/index/partials/_sticky.scss
new file mode 100644
index 000000000..35674c99d
--- /dev/null
+++ b/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; }
+}
diff --git a/app/views/layouts/_theme_include.html.erb b/app/views/layouts/_theme_include.html.erb
index bf5b3eb85..d6bcd97fa 100644
--- a/app/views/layouts/_theme_include.html.erb
+++ b/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;
diff --git a/app/views/posts/partials/index/_controls.html.erb b/app/views/posts/partials/index/_controls.html.erb
index 31667a67b..34d22d434 100644
--- a/app/views/posts/partials/index/_controls.html.erb
+++ b/app/views/posts/partials/index/_controls.html.erb
@@ -1,6 +1,8 @@
-