From 0dfcb4710dbb7f70d2fb40fcb0df850ea9c5afb7 Mon Sep 17 00:00:00 2001 From: Cinder Date: Sun, 26 Jan 2025 06:26:11 -0800 Subject: [PATCH] [Posts] Rework the post search page to be mobile-first (#855) --- app/controllers/favorites_controller.rb | 9 +-- app/javascript/src/javascripts/post_search.js | 34 +++++++++++ app/javascript/src/styles/base.scss | 2 + .../src/styles/common/paginator.scss | 5 ++ .../src/styles/common/post_search.scss | 55 +++++++++++++++++ .../src/styles/common/z_responsive.scss | 2 - .../src/styles/specific/post_index.scss | 61 +++++++++++++++++++ app/javascript/src/styles/specific/posts.scss | 6 -- app/logical/post_sets/favorites.rb | 16 +++-- app/views/favorites/_posts.html.erb | 26 ++++++++ app/views/favorites/index.html.erb | 41 +++++++------ app/views/posts/index.html.erb | 39 ++++-------- .../posts/partials/common/_search.html.erb | 14 +++-- .../posts/partials/index/_mode_menu.html.erb | 2 +- .../posts/partials/index/_related.html.erb | 2 +- app/views/posts/show.html.erb | 2 +- 16 files changed, 248 insertions(+), 68 deletions(-) create mode 100644 app/javascript/src/javascripts/post_search.js create mode 100644 app/javascript/src/styles/common/post_search.scss create mode 100644 app/javascript/src/styles/specific/post_index.scss create mode 100644 app/views/favorites/_posts.html.erb diff --git a/app/controllers/favorites_controller.rb b/app/controllers/favorites_controller.rb index b95ea7240..04ad266d8 100644 --- a/app/controllers/favorites_controller.rb +++ b/app/controllers/favorites_controller.rb @@ -8,7 +8,7 @@ class FavoritesController < ApplicationController def index if params[:tags] - redirect_to(posts_path(:tags => params[:tags])) + redirect_to(posts_path(tags: params[:tags])) else user_id = params[:user_id] || CurrentUser.user.id @user = User.find(user_id) @@ -17,10 +17,11 @@ class FavoritesController < ApplicationController raise Favorite::HiddenError end - @favorite_set = PostSets::Favorites.new(@user, params[:page], limit: params[:limit]) - respond_with(@favorite_set.posts) do |fmt| + @post_set = PostSets::Favorites.new(@user, params[:page], limit: params[:limit]) + @posts = PostsDecorator.decorate_collection(@post_set.posts) + respond_with(@posts) do |fmt| fmt.json do - render json: @favorite_set.api_posts, root: 'posts' + render json: @post_set.api_posts, root: "posts" end end end diff --git a/app/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js new file mode 100644 index 000000000..cf98a1274 --- /dev/null +++ b/app/javascript/src/javascripts/post_search.js @@ -0,0 +1,34 @@ +const PostSearch = {}; + +PostSearch.init = function () { + $(".post-search").each((index, element) => { + PostSearch.initialize_input($(element)); + }); +}; + +PostSearch.initialize_input = function ($form) { + const $textarea = $form.find("textarea[name='tags']").first(); + if (!$textarea.length) return; + const element = $textarea[0]; + + // Adjust the number of rows based on input length + $textarea + .on("input", () => { + $textarea.css("height", 0); + $textarea.css("height", element.scrollHeight + "px"); + }) + .on("keypress", function (event) { + if (event.which !== 13 || event.shiftKey) return; + event.preventDefault(); + $textarea.closest("form").submit(); + }); + + // Reset default height + $textarea.trigger("input"); +}; + +$(() => { + PostSearch.init(); +}); + +export default PostSearch; diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss index 9a2066c2c..05920d6db 100644 --- a/app/javascript/src/styles/base.scss +++ b/app/javascript/src/styles/base.scss @@ -29,6 +29,7 @@ @import "common/news.scss"; @import "common/notices.scss"; @import "common/paginator.scss"; +@import "common/post_search.scss"; @import "common/scores"; @import "common/simple_form.scss"; @import "common/spoiler.scss"; @@ -64,6 +65,7 @@ @import "specific/popular.scss"; @import "specific/post_delete.scss"; @import "specific/post_flags.scss"; +@import "specific/post_index.scss"; @import "specific/post_mode_menu.scss"; @import "specific/posts.scss"; @import "specific/post_replacements.scss"; diff --git a/app/javascript/src/styles/common/paginator.scss b/app/javascript/src/styles/common/paginator.scss index 165dd31d4..c006084b6 100644 --- a/app/javascript/src/styles/common/paginator.scss +++ b/app/javascript/src/styles/common/paginator.scss @@ -6,6 +6,11 @@ div.paginator { text-align: center; clear: both; + menu { + display: flex; + justify-content: center; + } + li { a { margin: 0 0.25em; diff --git a/app/javascript/src/styles/common/post_search.scss b/app/javascript/src/styles/common/post_search.scss new file mode 100644 index 000000000..48555aa85 --- /dev/null +++ b/app/javascript/src/styles/common/post_search.scss @@ -0,0 +1,55 @@ +// Searchbar +.post-search { + display: flex; + flex-wrap: wrap; + + .post-search-title { flex: 1; } + .post-search-help { font-size: 90%; } + + form.post-search-form { + display: flex; + width: 100%; + + textarea { + + // Override default texarea styles + font-family: Verdana, sans-serif; + font-size: 1.05em; + + // Remove old styles from z_responsive + vertical-align: unset; + border: unset; + width: unset; + max-width: unset; + + // Override style from posts.scss + margin-bottom: 0 !important; + + // Disable manual resizing + resize: none; + + flex: 1; + padding: 0.5em; + + border-radius: 3px 0 0 3px; + box-sizing: border-box; + + &:focus, &:focus + button[type="submit"] { background: #FFC; } + } + + button[type="submit"] { + + // Remove old styles from z_responsive + font-size: unset; + max-width: unset; + + font-size: 1em; + padding: 0.5em; + + border-radius: 0 3px 3px 0; + background: white; + + span { display: none; } + } + } +} diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss index 77ca3ce9c..e960794be 100644 --- a/app/javascript/src/styles/common/z_responsive.scss +++ b/app/javascript/src/styles/common/z_responsive.scss @@ -30,8 +30,6 @@ } } - #search-box { display: none; } - .mobile-search { display: block; margin: $padding-050 $padding-050 $padding-150; diff --git a/app/javascript/src/styles/specific/post_index.scss b/app/javascript/src/styles/specific/post_index.scss new file mode 100644 index 000000000..07bcec91e --- /dev/null +++ b/app/javascript/src/styles/specific/post_index.scss @@ -0,0 +1,61 @@ +.post-index { + display: grid; + + grid-template-areas: + "search " + "content" + "sidebar"; + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr min-content; + gap: 1em; + + // 1. Searchbox + .search { + grid-area: search; + + h1 { + font-size: $h3-size; + } + } + + // 2. Content + .content { + grid-area: content; + + // Quick tag edit + #edit-dialog textarea { + margin-bottom: 0.25em; + } + } + + // 3. Sidebar + .sidebar { + grid-area: sidebar; + + display: flex; + flex-flow: column; + gap: 1em; + + // Mode selection + #mode-box-mode, #mode-box #set-id { + width: 100%; + + // Match the searchbox + padding: 0.5em; + font-family: Verdana, sans-serif; + font-size: 1.05em; + } + } +} + + +// Desktop +.post-index { + @include window-larger-than(800px) { + grid-template-areas: + "search content" + "sidebar content"; + grid-template-columns: 15em 1fr; + grid-template-rows: min-content 1fr; + } +} diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index dfeee2e20..1a73bec76 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -1,11 +1,5 @@ -#mode-box-mode, #mode-box #set-id { - width: 15em; // Match width to that of the -} -#edit-dialog textarea { - margin-bottom: 0.25em; -} #has-parent-relationship-preview, #has-children-relationship-preview { flex-direction: row; diff --git a/app/logical/post_sets/favorites.rb b/app/logical/post_sets/favorites.rb index 61f2880e0..877ee1a22 100644 --- a/app/logical/post_sets/favorites.rb +++ b/app/logical/post_sets/favorites.rb @@ -28,11 +28,15 @@ module PostSets end end + def hidden_posts + @hidden_posts ||= posts.reject(&:visible?) + end + def api_posts - _posts = posts - fill_children(_posts) - fill_tag_types(_posts) - _posts + result = posts + fill_children(result) + fill_tag_types(result) + result end def tag_array @@ -42,5 +46,9 @@ module PostSets def presenter ::PostSetPresenters::Post.new(self) end + + def is_random? + false + end end end diff --git a/app/views/favorites/_posts.html.erb b/app/views/favorites/_posts.html.erb new file mode 100644 index 000000000..fe8ea9e1d --- /dev/null +++ b/app/views/favorites/_posts.html.erb @@ -0,0 +1,26 @@ +
+
+ <% if @posts.empty? %> + <%= render "posts/blank" %> + <% else %> + <% @posts.each do |post| %> + <%= post.preview_html(self, { tags: @post_set.public_tag_string, show_cropped: true, stats: CurrentUser.show_post_statistics? }) %> + <% end %> + <% end %> +
+ + <% if post_set.hidden_posts.present? %> +
+ <% if post_set.safe_posts.present? %> + <%= post_set.safe_posts.size %> post(s) on this page were hidden by safe mode (<%= Danbooru.config.app_name %>). Go to <%= link_to "e621", "https://e621.net/" %> or disable safe mode to view (<%= link_to "learn more", help_page_path(id: "user_settings") %>).
+ <% end %> + <% if post_set.login_blocked_posts.present? %> + <%= post_set.login_blocked_posts.size %> post(s) on this page were hidden because you need to be logged in to view them. <%= link_to "(learn more)", help_page_path(id: "global_blacklist") %> + <% end %> +
+ <% end %> + + <% unless post_set.is_random? %> + <%= numbered_paginator(post_set.posts) %> + <% end %> +
diff --git a/app/views/favorites/index.html.erb b/app/views/favorites/index.html.erb index 8e54b2bf1..68730fd91 100644 --- a/app/views/favorites/index.html.erb +++ b/app/views/favorites/index.html.erb @@ -1,34 +1,39 @@ -
-
- +
-
+
+ <%= render "ads/leaderboard", tag_string: @post_set.ad_tag_string %> <%= render "posts/partials/index/edit" %> + <%= render "posts/partials/index/posts", :post_set => @post_set %> +
-
-
- <%= @favorite_set.presenter.post_previews_html(self) %> -
- <%= numbered_paginator(@favorite_set.posts) %> -
-
- + <%= render "posts/partials/common/secondary_links" %> diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb index f2472af7d..e1d7b60d5 100644 --- a/app/views/posts/index.html.erb +++ b/app/views/posts/index.html.erb @@ -1,46 +1,33 @@ -
-
- +
-
+
<%= render "ads/leaderboard", tag_string: @post_set.ad_tag_string %> - - - -
- <%= link_to "(search help)", help_page_path(id: "cheatsheet"), class: 'search-help' %> -
- <%= form_tag(posts_path, :method => "get") do %> - <% if params[:random] %> - <%= hidden_field_tag :random, params[:random] %> - <% end %> -
<%= text_field_tag("tags", params[:tags], :id => "mobile-search-input", :"data-autocomplete" => "tag-query") %>
-
<%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %>
- <% end %> -
-
- <%= render "posts/partials/index/edit" %> <%= render "posts/partials/index/posts", :post_set => @post_set %> -
+
+ - + <%= render "posts/partials/common/secondary_links" %> diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb index e90ee19cc..051a9a259 100644 --- a/app/views/posts/partials/common/_search.html.erb +++ b/app/views/posts/partials/common/_search.html.erb @@ -1,11 +1,15 @@ -<%# path, tags %> +<%# locals: (title: "Search", tags: "") %> -