From af5ef523166592c68189202679025b57aaf24b3b Mon Sep 17 00:00:00 2001 From: Cinder Date: Tue, 11 Feb 2025 22:27:26 -0800 Subject: [PATCH] [Posts] Add an option for a sticky searchbar (#911) --- app/helpers/icon_helper.rb | 1 + app/javascript/src/javascripts/post_search.js | 7 +++++ .../src/javascripts/utility/storage.js | 3 ++ app/javascript/src/styles/common/tables.scss | 2 -- .../src/styles/views/posts/_posts.scss | 3 ++ .../views/posts/index/_index.desktop.scss | 30 +++++++++++++++++-- .../src/styles/views/posts/index/_index.scss | 5 +--- .../posts/index/partials/_fullscreen.scss | 24 +++++++-------- .../views/posts/index/partials/_sticky.scss | 16 ++++++++++ app/views/layouts/_theme_include.html.erb | 1 + .../posts/partials/index/_controls.html.erb | 6 ++-- 11 files changed, 76 insertions(+), 22 deletions(-) create mode 100644 app/javascript/src/styles/views/posts/index/partials/_sticky.scss 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 @@
- +