From a610111658a8e8a42954302fc222dd880d51db50 Mon Sep 17 00:00:00 2001 From: Albert Yi Date: Thu, 5 Jul 2018 16:51:10 -0700 Subject: [PATCH] switch post previews to use flexbox, add better styling for cropped thumbnails --- .../stylesheets/common/main_layout.scss | 8 ++- app/assets/stylesheets/common/paginator.scss | 9 +--- app/assets/stylesheets/specific/posts.scss | 16 ------ .../stylesheets/specific/z_responsive.scss | 50 +++++++++++-------- app/helpers/pagination_helper.rb | 10 ++-- app/presenters/post_presenter.rb | 16 +++--- app/presenters/post_set_presenters/base.rb | 2 +- app/presenters/post_set_presenters/post.rb | 4 ++ .../posts/partials/common/_search.html.erb | 3 +- .../posts/partials/index/_posts.html.erb | 4 +- db/populate.rb | 4 +- 11 files changed, 62 insertions(+), 64 deletions(-) diff --git a/app/assets/stylesheets/common/main_layout.scss b/app/assets/stylesheets/common/main_layout.scss index 1beb767fc..e00b49e7e 100644 --- a/app/assets/stylesheets/common/main_layout.scss +++ b/app/assets/stylesheets/common/main_layout.scss @@ -38,12 +38,16 @@ div#page { } input[type=text] { - width: 10em; - /* ensure expanded search box renders above post thumbnails. */ z-index: 1; position: relative; } + + button[type=submit] { + padding: 2px 6px; + background: #EEE; + border-left: none; + } } aside#sidebar > section { diff --git a/app/assets/stylesheets/common/paginator.scss b/app/assets/stylesheets/common/paginator.scss index 8f5686590..a430e4154 100644 --- a/app/assets/stylesheets/common/paginator.scss +++ b/app/assets/stylesheets/common/paginator.scss @@ -10,11 +10,10 @@ div.paginator { a { margin: 0 0.25em; padding: 0.25em 0.75em; - border: 1px solid #EAEAEA; } - a.arrow { - border: none; + &.more { + color: grey; } a.arrow:hover { @@ -22,10 +21,6 @@ div.paginator { color: $link_color; } - a.current { - border: 1px solid #AAA; - } - a:hover { background: $link_color; color: white; diff --git a/app/assets/stylesheets/specific/posts.scss b/app/assets/stylesheets/specific/posts.scss index af8cfe0a3..ec0d180e5 100644 --- a/app/assets/stylesheets/specific/posts.scss +++ b/app/assets/stylesheets/specific/posts.scss @@ -4,7 +4,6 @@ article.post-preview { height: 154px; width: 154px; margin: 0 10px 10px 0; - float: left; overflow: hidden; text-align: center; @include inline-block; @@ -26,13 +25,6 @@ article.post-preview { margin: auto; } - &.large-cropped { - height: auto; - weidth: auto; - float: none; - display: block; - } - &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before { @include animated-icon; } @@ -171,7 +163,6 @@ body[data-user-can-approve-posts="true"] .post-preview { white-space: nowrap; article.post-preview { - float: none; width: auto; border: none; margin: 0; @@ -314,13 +305,6 @@ div#c-posts { } div#a-index { - div#jlist-rss-ads-for-show { - float: right; - position: absolute; - top: 0; - right: 10px; - } - menu#post-sections { margin-bottom: 0.5em; font-size: $h3_size; diff --git a/app/assets/stylesheets/specific/z_responsive.scss b/app/assets/stylesheets/specific/z_responsive.scss index 93c79e034..db27cbcce 100644 --- a/app/assets/stylesheets/specific/z_responsive.scss +++ b/app/assets/stylesheets/specific/z_responsive.scss @@ -22,12 +22,17 @@ } div#page aside#sidebar { + padding: 5px; + input#tags { - width: 75%; + width: 80%; } - input[type=submit] { - width: 20%; + button[type=submit] { + font-size: 1.4em; + background-color: #EEE; + height: 42px; + padding: 2px 10px; } } @@ -136,34 +141,26 @@ } } + #posts #posts-container { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + } + article.post-preview { - margin: 0.5vw; - width: 48vw; - height: 48vw; + float: none; + margin: 0; text-align: center; vertical-align: middle; display: inline-block; - &.cropped { - width: 32vw; - height: 32vw; - } - a { - //width: 48.5vw; - //display: block; margin: 0 auto; } img { - //object-fit: contain; - margin: 0 auto; border: none !important; - - &.cropped { - width: 32vw; - height: 32vw; - } } &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before { @@ -175,6 +172,19 @@ } } + .user-disable-cropped-false { + article { + width: 32vw; + height: 32vw; + margin: 0 auto; + } + + img { + width: 32vw; + height: 32vw; + } + } + img#image { margin-top: 5px; } diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb index b5ec4c6a4..855b507f6 100644 --- a/app/helpers/pagination_helper.rb +++ b/app/helpers/pagination_helper.rb @@ -29,9 +29,9 @@ module PaginationHelper window = 4 if records.current_page >= 2 - html << "
  • " + link_to("<<", nav_params_for(records.current_page - 1), :rel => "prev") + "
    • " + html << "
  • " + link_to(content_tag(:i, nil, class: "fas fa-chevron-left"), nav_params_for(records.current_page - 1), :rel => "prev") + "
    • " else - html << "
  • " + "<<" + "
    • " + html << "
  • " + content_tag(:i, nil, class: "fas fa-chevron-left") + "
    • " end if records.total_pages <= (window * 2) + 5 @@ -69,9 +69,9 @@ module PaginationHelper end if records.current_page < records.total_pages && records.size > 0 - html << "
  • " + link_to(">>", nav_params_for(records.current_page + 1), :rel => "next") + "
    • " + html << "
  • " + link_to(content_tag(:i, nil, class: "fas fa-chevron-right"), nav_params_for(records.current_page + 1), :rel => "next") + "
    • " else - html << "
  • " + ">>" + "
    • " + html << "
  • " + content_tag(:i, nil, class: "fas fa-chevron-right") + "
    • " end html << "" @@ -92,7 +92,7 @@ module PaginationHelper html = [] if page == "..." html << "
  • " - html << "..." + html << content_tag(:i, nil, class: "fas fa-ellipsis-h") html << "
    • " elsif page == current_page html << "
  • " diff --git a/app/presenters/post_presenter.rb b/app/presenters/post_presenter.rb index 0e22866ae..22f7588ed 100644 --- a/app/presenters/post_presenter.rb +++ b/app/presenters/post_presenter.rb @@ -21,15 +21,13 @@ class PostPresenter < Presenter end path = options[:path_prefix] || "/posts" - if Danbooru.config.enable_image_cropping && CurrentUser.id == 1 && options[:show_cropped] && post.has_cropped? && !CurrentUser.user.disable_cropped_thumbnails? - src = post.crop_file_url - imgClass = "cropped" + if Danbooru.config.enable_image_cropping && options[:show_cropped] && post.has_cropped? && !CurrentUser.user.disable_cropped_thumbnails? + cropped_src = post.crop_file_url else - src = post.preview_file_url - imgClass = nil + cropped_src = post.preview_file_url end - html = %{
    } + html = %{
    } if options[:tags].present? && !CurrentUser.is_anonymous? tag_param = "?tags=#{CGI::escape(options[:tags])}" elsif options[:pool_id] || options[:pool] @@ -42,7 +40,11 @@ class PostPresenter < Presenter html << %{} tooltip = "#{post.tag_string} rating:#{post.rating} score:#{post.score}" - html << %{#{h(post.tag_string)}} + html << %{} + html << %{} + html << %{} + html << %{#{h(post.tag_string)}} + html << %{} html << %{} if options[:pool] diff --git a/app/presenters/post_set_presenters/base.rb b/app/presenters/post_set_presenters/base.rb index 060779478..402844d12 100644 --- a/app/presenters/post_set_presenters/base.rb +++ b/app/presenters/post_set_presenters/base.rb @@ -12,7 +12,7 @@ module PostSetPresenters end posts.each do |post| - html << PostPresenter.preview(post, options.merge(:show_cropped => true, :tags => @post_set.tag_string, :raw => @post_set.raw)) + html << PostPresenter.preview(post, options.merge(:tags => @post_set.tag_string, :raw => @post_set.raw)) html << "\n" end diff --git a/app/presenters/post_set_presenters/post.rb b/app/presenters/post_set_presenters/post.rb index 27a81bd3b..9bfd6b9aa 100644 --- a/app/presenters/post_set_presenters/post.rb +++ b/app/presenters/post_set_presenters/post.rb @@ -11,6 +11,10 @@ module PostSetPresenters @tag_set_presenter ||= TagSetPresenter.new(related_tags) end + def post_previews_html(template, options = {}) + super(template, options.merge(show_cropped: true)) + end + def related_tags if post_set.is_pattern_search? pattern_tags diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb index 573869598..c44b67e3a 100644 --- a/app/views/posts/partials/common/_search.html.erb +++ b/app/views/posts/partials/common/_search.html.erb @@ -6,14 +6,13 @@ diff --git a/app/views/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb index 000f7c607..9f069d045 100644 --- a/app/views/posts/partials/index/_posts.html.erb +++ b/app/views/posts/partials/index/_posts.html.erb @@ -1,5 +1,5 @@ -
    -
    +
    +
    <%= post_set.presenter.post_previews_html(self) %>
    diff --git a/db/populate.rb b/db/populate.rb index ef704c5f8..0482e0ca4 100644 --- a/db/populate.rb +++ b/db/populate.rb @@ -127,7 +127,7 @@ end if Comment.count == 0 puts "Creating comments" Post.all.each do |post| - rand(10).times do + rand(100).times do Comment.create(:post_id => post.id, :body => rand_paragraph(6)) end end @@ -141,7 +141,7 @@ if Note.count == 0 rand(5).times do note = Note.create(:post_id => post.id, :x => rand(post.image_width), :y => rand(post.image_height), :width => 100, :height => 100, :body => Time.now.to_f.to_s) - rand(10).times do |i| + rand(20).times do |i| note.update_attributes(:body => rand_sentence(6)) end end