From f995714992f1c1ff94b104f52c78cc0f6d75cd1b Mon Sep 17 00:00:00 2001 From: Cinder Date: Mon, 18 Nov 2024 08:38:22 -0800 Subject: [PATCH] [Posts] Rewrite the thumbnail styles (#796) Fixes #791 and #781 --- app/decorators/posts_decorator.rb | 56 ++---- app/helpers/application_helper.rb | 9 +- app/helpers/posts_helper.rb | 20 +- .../src/javascripts/post_mode_menu.js | 4 +- app/javascript/src/styles/base.scss | 1 + app/javascript/src/styles/base/_vars.scss | 18 +- .../src/styles/common/blacklists.scss | 16 +- .../src/styles/common/thumbnails.scss | 189 ++++++++++++++++++ .../src/styles/common/z_responsive.scss | 47 ----- .../src/styles/specific/iqdb_queries.scss | 2 +- .../src/styles/specific/post_mode_menu.scss | 4 - app/javascript/src/styles/specific/posts.scss | 150 +------------- app/javascript/src/styles/specific/users.scss | 6 - app/presenters/post_presenter.rb | 24 +-- app/presenters/user_presenter.rb | 6 +- app/views/favorites/index.html.erb | 6 +- app/views/layouts/_head.html.erb | 4 +- app/views/pools/gallery.html.erb | 2 +- app/views/pools/show.html.erb | 2 +- app/views/popular/index.html.erb | 4 +- .../posts/partials/index/_posts.html.erb | 4 +- .../posts/partials/index/_preview.html.erb | 16 +- app/views/users/_post_summary.html.erb | 4 +- 23 files changed, 290 insertions(+), 304 deletions(-) create mode 100644 app/javascript/src/styles/common/thumbnails.scss diff --git a/app/decorators/posts_decorator.rb b/app/decorators/posts_decorator.rb index f2b16f810..c2e049d58 100644 --- a/app/decorators/posts_decorator.rb +++ b/app/decorators/posts_decorator.rb @@ -9,15 +9,15 @@ class PostsDecorator < ApplicationDecorator def preview_class(options) post = object - klass = ["post-preview"] - klass << "post-status-pending" if post.is_pending? - klass << "post-status-flagged" if post.is_flagged? - klass << "post-status-deleted" if post.is_deleted? - klass << "post-status-has-parent" if post.parent_id - klass << "post-status-has-children" if post.has_visible_children? - klass << "post-rating-safe" if post.rating == "s" - klass << "post-rating-questionable" if post.rating == "q" - klass << "post-rating-explicit" if post.rating == "e" + klass = ["thumbnail"] + klass << "pending" if post.is_pending? + klass << "flagged" if post.is_flagged? + klass << "deleted" if post.is_deleted? + klass << "has-parent" if post.parent_id + klass << "has-children" if post.has_visible_children? + klass << "rating-safe" if post.rating == "s" + klass << "rating-questionable" if post.rating == "q" + klass << "rating-explicit" if post.rating == "e" klass << "blacklistable" unless options[:no_blacklist] klass end @@ -42,21 +42,21 @@ class PostsDecorator < ApplicationDecorator score > 0 ? 'score-positive' : 'score-negative' end - def stats_section(t) + def stats_section(template) post = object status_flags = [] - status_flags << 'P' if post.parent_id - status_flags << 'C' if post.has_children? - status_flags << 'U' if post.is_pending? - status_flags << 'F' if post.is_flagged? + status_flags << "P" if post.parent_id + status_flags << "C" if post.has_children? + status_flags << "U" if post.is_pending? + status_flags << "F" if post.is_flagged? post_score_icon = "#{'↑' if post.score > 0}#{'↓' if post.score < 0}#{'↕' if post.score == 0}" - score = t.tag.span("#{post_score_icon}#{post.score}", class: "post-score-score #{score_class(post.score)}") - favs = t.tag.span("♥#{post.fav_count}", class: "post-score-faves") - comments = t.tag.span "C#{post.visible_comment_count(CurrentUser)}", class: 'post-score-comments' - rating = t.tag.span(post.rating.upcase, class: "post-score-rating") - status = t.tag.span(status_flags.join(''), class: 'post-score-extras') - t.tag.div score + favs + comments + rating + status, class: 'post-score', id: "post-score-#{post.id}" + score = template.tag.span("#{post_score_icon}#{post.score}", class: "score #{score_class(post.score)}") + favs = template.tag.span("♥#{post.fav_count}", class: "favorites") + comments = template.tag.span "C#{post.visible_comment_count(CurrentUser)}", class: "comments" + rating = template.tag.span(post.rating.upcase, class: "rating") + # status = template.tag.span(status_flags.join, class: "extras") + template.tag.div score + favs + comments + rating, class: "desc" end def preview_html(t, options = {}) @@ -115,16 +115,10 @@ class PostsDecorator < ApplicationDecorator post.preview_file_url end - alt_text = post.tag_string + alt_text = "post ##{post.id}" has_cropped = post.has_cropped? - pool = options[:pool] - - similarity = options[:similarity]&.round - - size = options[:size] ? post.file_size : nil - img_contents = t.link_to t.polymorphic_path(link_target, link_params) do t.tag.picture do t.concat t.tag.source media: "(max-width: 800px)", srcset: cropped_url @@ -132,13 +126,7 @@ class PostsDecorator < ApplicationDecorator t.concat t.tag.img class: "has-cropped-#{has_cropped}", src: preview_url, title: tooltip, alt: alt_text end end - desc_contents = if options[:stats] || pool || similarity || size - t.tag.div class: "desc" do - stats_section(t) if options[:stats] - end - else - "".html_safe - end + desc_contents = options[:stats] ? stats_section(t) : "".html_safe t.tag.article(**article_attrs) do img_contents + desc_contents end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1afcb0d22..7b6563bcc 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -117,7 +117,7 @@ module ApplicationHelper end def body_attributes(user = CurrentUser.user) - attributes = [:id, :name, :level, :level_string, :can_approve_posts?, :can_upload_free?, :per_page] + attributes = %i[id name level level_string can_approve_posts? can_upload_free? per_page] attributes += User::Roles.map { |role| :"is_#{role}?" } controller_param = params[:controller].parameterize.dasherize @@ -125,12 +125,13 @@ module ApplicationHelper { lang: "en", - class: "c-#{controller_param} a-#{action_param} #{"resp" unless disable_mobile_mode?}", + class: "c-#{controller_param} a-#{action_param} #{'resp' unless disable_mobile_mode?}", data: { controller: controller_param, action: action_param, - **data_attributes_for(user, "user", attributes) - } + **data_attributes_for(user, "user", attributes), + disable_cropped_thumbnails: Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails?, + }, } end diff --git a/app/helpers/posts_helper.rb b/app/helpers/posts_helper.rb index 08a9e85f5..6ecc1d016 100644 --- a/app/helpers/posts_helper.rb +++ b/app/helpers/posts_helper.rb @@ -87,18 +87,18 @@ module PostsHelper def post_stats_section(post) status_flags = [] - status_flags << 'P' if post.parent_id - status_flags << 'C' if post.has_active_children? - status_flags << 'U' if post.is_pending? - status_flags << 'F' if post.is_flagged? + status_flags << "P" if post.parent_id + status_flags << "C" if post.has_active_children? + status_flags << "U" if post.is_pending? + status_flags << "F" if post.is_flagged? post_score_icon = "#{'↑' if post.score > 0}#{'↓' if post.score < 0}#{'↕' if post.score == 0}" - score = tag.span("#{post_score_icon}#{post.score}", class: "post-score-score #{score_class(post.score)}") - favs = tag.span("♥#{post.fav_count}", class: "post-score-faves") - comments = tag.span "C#{post.visible_comment_count(CurrentUser)}", class: 'post-score-comments' - rating = tag.span(post.rating.upcase, class: "post-score-rating") - status = tag.span(status_flags.join(''), class: 'post-score-extras') - tag.div score + favs + comments + rating + status, class: 'post-score', id: "post-score-#{post.id}" + score = tag.span("#{post_score_icon}#{post.score}", class: "score #{score_class(post.score)}") + favs = tag.span("♥#{post.fav_count}", class: "favorites") + comments = tag.span "C#{post.visible_comment_count(CurrentUser)}", class: "comments" + rating = tag.span(post.rating.upcase, class: "rating") + # status = tag.span(status_flags.join, class: "extras") + tag.div score + favs + comments + rating, class: "desc" end def user_record_meta(user) diff --git a/app/javascript/src/javascripts/post_mode_menu.js b/app/javascript/src/javascripts/post_mode_menu.js index c13944f17..1908c4de1 100644 --- a/app/javascript/src/javascripts/post_mode_menu.js +++ b/app/javascript/src/javascripts/post_mode_menu.js @@ -55,7 +55,7 @@ PostModeMenu.initialize_selector = function () { }; PostModeMenu.initialize_preview_link = function () { - $(".post-preview").on("click.danbooru", PostModeMenu.click); + $(".thumbnail").on("click.danbooru", PostModeMenu.click); }; PostModeMenu.initialize_edit_form = function () { @@ -107,7 +107,7 @@ PostModeMenu.initialize_tag_script_field = function () { PostModeMenu.tag_script_apply_all = function (event) { event.preventDefault(); - $("article.post-preview").trigger("click"); + $("article.thumbnail").trigger("click"); }; PostModeMenu.update_sets_menu = function () { diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss index 5eb0e3d5a..c817f5d9c 100644 --- a/app/javascript/src/styles/base.scss +++ b/app/javascript/src/styles/base.scss @@ -33,6 +33,7 @@ @import "common/spoiler.scss"; @import "common/tables.scss"; @import "common/tags.scss"; +@import "common/thumbnails.scss"; @import "common/user_styles.scss"; @import "common/voting.scss"; diff --git a/app/javascript/src/styles/base/_vars.scss b/app/javascript/src/styles/base/_vars.scss index 901b1dc7b..9d48be57e 100644 --- a/app/javascript/src/styles/base/_vars.scss +++ b/app/javascript/src/styles/base/_vars.scss @@ -25,18 +25,22 @@ $base_font_family: Verdana, sans-serif; $box-shadow-size: 2px 2px 5px; @mixin preview-type-badge($text) { - background-color: themed("color-section"); - border: 1px solid themed("color-text-white"); - color: themed("color-text"); - z-index: 5; position: absolute; + z-index: 5; left: 0; top: 0.5rem; - text-align: center; - border-radius: $border-radius-full; - padding: 3px 5px; + padding: 2px 4px; + + background-color: themed("color-section"); + color: themed("color-text"); font-size: 60%; font-weight: bold; + text-align: center; + + border-radius: 0 $border-radius-half $border-radius-half 0; + border: 1px solid themed("color-text-muted"); + border-left: 0; + content: $text; } diff --git a/app/javascript/src/styles/common/blacklists.scss b/app/javascript/src/styles/common/blacklists.scss index ee8e97075..f69c0e0d4 100644 --- a/app/javascript/src/styles/common/blacklists.scss +++ b/app/javascript/src/styles/common/blacklists.scss @@ -191,14 +191,13 @@ #c-posts #a-index, #c-popular, #c-favorites { - .post-preview.blacklisted { + .thumbnail.blacklisted { display: none !important; } } #image-container.blacklisted, -.post-thumbnail.blacklisted, -.post-preview.blacklisted { +.post-thumbnail.blacklisted { img, video { height: 0px !important; @@ -216,3 +215,14 @@ display: none; } } + +article.thumbnail.blacklisted { + width: 100%; + & > a { + height: 100%; + background-image: url("blacklisted-preview.png"); + background-size: cover; + background-position: center; + } + img { display: none; } +} diff --git a/app/javascript/src/styles/common/thumbnails.scss b/app/javascript/src/styles/common/thumbnails.scss new file mode 100644 index 000000000..3bc45b444 --- /dev/null +++ b/app/javascript/src/styles/common/thumbnails.scss @@ -0,0 +1,189 @@ +// Thumbnail dimensions +$thumb-image-size: 150px; +$thumb-border-width: 2px; +$thumb-mobile-cols: 3; +$thumb-gap: 8px; + + +// Switch to desktop view at this width +// Last value is the #page padding +$thumb-desktop-breakpoint: ($thumb-image-size * $thumb-mobile-cols) + (2 * $thumb-gap) + 8px; + + +// Posts container +// May or may not exist on some pages +section.posts-container { + display: grid; + grid-template-columns: repeat($thumb-mobile-cols, 1fr); + gap: 0.5rem; + + @include window-larger-than($thumb-desktop-breakpoint) { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + } +} + + +// Thumbnail proper +article.thumbnail { + display: inline-flex; + flex-flow: column; + max-width: $thumb-image-size; + justify-self: center; // Center the thumbnail in the grid cell + position: relative; // Position badges correctly + overflow: hidden; + + @include window-larger-than($thumb-desktop-breakpoint) { + width: min-content; // Force .desc to be the same width as the image + } + + // Badges + &[data-tags~=animated] > a:before { @include preview-type-badge("ANIM"); } + &[data-file-ext=webm] > a:before { @include preview-type-badge("WEBM"); } + + a { text-align: center; } // Fixes an issue with blacklisted pool thumbnails + + img { + box-sizing: border-box; // Prevent the border from resizing the entire element + max-width: $thumb-image-size; + max-height: $thumb-image-size; + + border-radius: $border-radius-half $border-radius-half 0 0; + pointer-events: none; // Should probably just fix the click events, huh + + // Mobile view + width: 100%; + @include window-larger-than($thumb-desktop-breakpoint) { + width: unset; + } + } + + .desc { + display: flex; + gap: 0.25em; + justify-content: center; + + background-color: themed("color-section-lighten-5"); + border-radius: 0 0 $border-radius-half $border-radius-half; + + .rating { font-weight: 700; } + & > a { text-align: center; } // Pool names + } + + // Color the rating letters + @each $name, $color in ("e": "red", "q": "yellow", "s": "green") { + &[data-rating=#{$name}] .desc .rating { color: palette("text-#{$color}"); } + } +} + + +// Fix for when posts have no cropped versions +// Should be made irrelevant later, but this will do for now +@include window-smaller-than(800px) { + body[data-disable-cropped-thumbnails="false"] article.thumbnail { + width: 100%; + a { height: 100%; } + img { + height: 100%; + object-fit: cover; + @include window-larger-than($thumb-desktop-breakpoint) { + &.has-cropped-false { width: 150px; } + } + } + } +} + + +// I have absolutely no idea what this +// does or when it might be triggered. +article.thumbnail.current-post { + background-color: $post-preview-highlight-background; +} + + +// Nightmarish mess ahead +// Set thumbnail borders based on status +article.thumbnail { + &.has-children img { + border: 2px solid transparent; + border-color: $preview-has-children-color; + } + + &.has-parent img { + border: 2px solid transparent; + border-color: $preview-has-parent-color; + } + + &.has-children.has-parent img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-has-parent-color $preview-has-parent-color $preview-has-children-color; + } + + + &.deleted img { + border: 2px solid transparent; + border-color: $preview-deleted-color; + } + + &.has-children.deleted img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-deleted-color $preview-deleted-color $preview-has-children-color; + } + + &.has-parent.deleted img { + border: 2px solid transparent; + border-color: $preview-has-parent-color $preview-deleted-color $preview-deleted-color $preview-has-parent-color; + } + + &.has-children.has-parent.deleted img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-deleted-color $preview-deleted-color $preview-has-parent-color; + } + + + &.pending img, + &.flagged img { + border: 2px solid transparent; + border-color: $preview-pending-color; + } + + &.has-children.pending img, + &.has-children.flagged img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-pending-color $preview-pending-color $preview-has-children-color; + } + + &.has-parent.pending img, + &.has-parent.flagged img { + border: 2px solid transparent; + border-color: $preview-has-parent-color $preview-pending-color $preview-pending-color $preview-has-parent-color; + } + + &.has-children.has-parent.pending img, + &.has-children.has-parent.flagged img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-pending-color $preview-pending-color $preview-has-parent-color; + } +} + +// Flagged posts have red borders for approvers. +body[data-user-can-approve-posts="true"] article.thumbnail { + &.flagged img { + border: 2px solid transparent; + border-color: $preview-flagged-color; + } + + &.has-children.flagged img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-flagged-color $preview-flagged-color $preview-has-children-color; + } + + &.has-parent.flagged img { + border: 2px solid transparent; + border-color: $preview-has-parent-color $preview-flagged-color $preview-flagged-color $preview-has-parent-color; + } + + &.has-children.has-parent.flagged img { + border: 2px solid transparent; + border-color: $preview-has-children-color $preview-flagged-color $preview-flagged-color $preview-has-parent-color; + } +} diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss index 697d23eb0..9c41084d7 100644 --- a/app/javascript/src/styles/common/z_responsive.scss +++ b/app/javascript/src/styles/common/z_responsive.scss @@ -197,53 +197,6 @@ padding: 0; } - #posts #posts-container { - width: 100%; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-evenly; - } - - article.post-preview { - float: none; - margin: 0 0 10px 0; - text-align: center; - vertical-align: middle; - display: inline-block; - width: 31vw; - - a { - margin: 0 auto; - } - - img { - max-height: 150px; - max-width: 31vw; - } - - .desc { - font-size: 100%; - } - } - - .user-disable-cropped-false { - article.post-preview { - width: 31vw; - - img { - height: auto; - max-height: none; - max-width: none; - width: 31vw; - - &.has-cropped-false { - object-fit: cover; - } - } - } - } - div#options { margin-top: 10px; font-size: 24pt; diff --git a/app/javascript/src/styles/specific/iqdb_queries.scss b/app/javascript/src/styles/specific/iqdb_queries.scss index 39392f163..24707afce 100644 --- a/app/javascript/src/styles/specific/iqdb_queries.scss +++ b/app/javascript/src/styles/specific/iqdb_queries.scss @@ -1,6 +1,6 @@ div#c-iqdb-queries { div#a-show { - article.post-preview { + article.thumbnail { width: 180px; border: $iqdb-post-border solid 1px; diff --git a/app/javascript/src/styles/specific/post_mode_menu.scss b/app/javascript/src/styles/specific/post_mode_menu.scss index 9a6121ddb..6e02eff31 100644 --- a/app/javascript/src/styles/specific/post_mode_menu.scss +++ b/app/javascript/src/styles/specific/post_mode_menu.scss @@ -25,10 +25,6 @@ $modes: ( } } -#page:not([data-mode-menu="view"]) article.post-preview img { - pointer-events: none; -} - #tag-script-ui { display: flex; margin-top: 0.5em; diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index e8cc8474c..dfeee2e20 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -3,163 +3,15 @@ width: 15em; // Match width to that of the } -article.post-preview { - box-sizing: border-box; - height: auto; - width: fit-content; - margin: 0 10px 10px 0; - overflow: hidden; - text-align: center; - display: inline-block; - position: relative; - vertical-align: text-top; - - a { - display: inline-block; - } - - .desc { - background-color: themed("color-section-lighten-5"); - font-size: 80%; - margin-bottom: 0; - } - &.filter-matches .desc { - background-color: var(--palette-background-red); - } - - .post-score>span { - font-size: 0.8rem; - margin-left: 0.5em; - } - - &.post-rating-explicit .post-score-rating { - color: palette("text-red"); - } - - &.post-rating-safe .post-score-rating { - color: palette("text-green"); - } - - &.post-rating-questionable .post-score-rating { - color: palette("text-yellow"); - } - - img { - box-sizing: border-box; - margin: auto; - max-height: 10rem; // Roughly 160px with 16pt font size - max-width: 10rem; - border-radius: $border-radius-half $border-radius-half 0 0; - } - - &[data-tags~=animated] > a:before { - @include preview-type-badge('ANIM'); - } - - &[data-file-ext=webm] > a:before { - @include preview-type-badge('WEBM'); - } -} - #edit-dialog textarea { margin-bottom: 0.25em; } -.post-preview { - &.post-status-has-children img { - border: 2px solid transparent; - border-color: $preview-has-children-color; - } - - &.post-status-has-parent img { - border: 2px solid transparent; - border-color: $preview-has-parent-color; - } - - &.post-status-has-children.post-status-has-parent img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-has-parent-color $preview-has-parent-color $preview-has-children-color; - } - - - &.post-status-deleted img { - border: 2px solid transparent; - border-color: $preview-deleted-color; - } - - &.post-status-has-children.post-status-deleted img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-deleted-color $preview-deleted-color $preview-has-children-color; - } - - &.post-status-has-parent.post-status-deleted img { - border: 2px solid transparent; - border-color: $preview-has-parent-color $preview-deleted-color $preview-deleted-color $preview-has-parent-color; - } - - &.post-status-has-children.post-status-has-parent.post-status-deleted img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-deleted-color $preview-deleted-color $preview-has-parent-color; - } - - - &.post-status-pending img, - &.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-pending-color; - } - - &.post-status-has-children.post-status-pending img, - &.post-status-has-children.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-pending-color $preview-pending-color $preview-has-children-color; - } - - &.post-status-has-parent.post-status-pending img, - &.post-status-has-parent.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-parent-color $preview-pending-color $preview-pending-color $preview-has-parent-color; - } - - &.post-status-has-children.post-status-has-parent.post-status-pending img, - &.post-status-has-children.post-status-has-parent.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-pending-color $preview-pending-color $preview-has-parent-color; - } -} - -/* Flagged posts have red borders for approvers. */ -body[data-user-can-approve-posts="true"] .post-preview { - &.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-flagged-color; - } - - &.post-status-has-children.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-flagged-color $preview-flagged-color $preview-has-children-color; - } - - &.post-status-has-parent.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-parent-color $preview-flagged-color $preview-flagged-color $preview-has-parent-color; - } - - &.post-status-has-children.post-status-has-parent.post-status-flagged img { - border: 2px solid transparent; - border-color: $preview-has-children-color $preview-flagged-color $preview-flagged-color $preview-has-parent-color; - } -} - -.post-preview.current-post { - background-color: $post-preview-highlight-background; -} - #has-parent-relationship-preview, #has-children-relationship-preview { flex-direction: row; flex-wrap: wrap; - article.post-preview { + article.thumbnail { border: none; margin: 0; padding: 5px 5px 10px; diff --git a/app/javascript/src/styles/specific/users.scss b/app/javascript/src/styles/specific/users.scss index 7e9305cb7..807ac467b 100644 --- a/app/javascript/src/styles/specific/users.scss +++ b/app/javascript/src/styles/specific/users.scss @@ -175,12 +175,6 @@ div#c-users { border-top-left-radius: 0; justify-content: flex-start; } - - article.post-preview { - flex: 0 0 154px; - margin: 0; - img { max-width: unset !important; } - } } } diff --git a/app/presenters/post_presenter.rb b/app/presenters/post_presenter.rb index 534df2170..8db0db3d7 100644 --- a/app/presenters/post_presenter.rb +++ b/app/presenters/post_presenter.rb @@ -22,8 +22,8 @@ class PostPresenter < Presenter locals = {} locals[:article_attrs] = { - "id" => "post_#{post.id}", - "class" => preview_class(post, **options).join(" ") + "id" => "post_#{post.id}", + "class" => preview_class(post, **options).join(" "), }.merge(data_attributes(post)) locals[:link_target] = options[:link_target] || post @@ -54,7 +54,7 @@ class PostPresenter < Presenter post.preview_file_url end - locals[:alt_text] = post.tag_string + locals[:alt_text] = "post ##{post.id}" locals[:has_cropped] = post.has_cropped? @@ -91,15 +91,15 @@ class PostPresenter < Presenter end def self.preview_class(post, pool: nil, size: nil, similarity: nil, **options) - klass = ["post-preview"] - klass << "post-status-pending" if post.is_pending? - klass << "post-status-flagged" if post.is_flagged? - klass << "post-status-deleted" if post.is_deleted? - klass << "post-status-has-parent" if post.parent_id - klass << "post-status-has-children" if post.has_visible_children? - klass << "post-rating-safe" if post.rating == "s" - klass << "post-rating-questionable" if post.rating == "q" - klass << "post-rating-explicit" if post.rating == "e" + klass = ["thumbnail"] + klass << "pending" if post.is_pending? + klass << "flagged" if post.is_flagged? + klass << "deleted" if post.is_deleted? + klass << "has-parent" if post.parent_id + klass << "has-children" if post.has_visible_children? + klass << "rating-safe" if post.rating == "s" + klass << "rating-questionable" if post.rating == "q" + klass << "rating-explicit" if post.rating == "e" klass << "blacklistable" unless options[:no_blacklist] klass end diff --git a/app/presenters/user_presenter.rb b/app/presenters/user_presenter.rb index 910a4512f..5a4ab4662 100644 --- a/app/presenters/user_presenter.rb +++ b/app/presenters/user_presenter.rb @@ -54,7 +54,8 @@ class UserPresenter end def uploads - Post.tag_match("user:#{user.name}").limit(8) + posts = Post.tag_match("user:#{user.name}").limit(8) + PostsDecorator.decorate_collection(posts) end def has_uploads? @@ -63,7 +64,8 @@ class UserPresenter def favorites ids = Favorite.where(user_id: user.id).order(created_at: :desc).limit(50).pluck(:post_id)[0..7] - Post.where(id: ids).sort_by { |post| ids.index(post.id) } + posts = Post.where(id: ids).sort_by { |post| ids.index(post.id) } + PostsDecorator.decorate_collection(posts) end def has_favorites? diff --git a/app/views/favorites/index.html.erb b/app/views/favorites/index.html.erb index 41d0b28ea..8e54b2bf1 100644 --- a/app/views/favorites/index.html.erb +++ b/app/views/favorites/index.html.erb @@ -18,14 +18,12 @@
-

Favorites

- <%= render "posts/partials/index/edit" %>
-
+
<%= @favorite_set.presenter.post_previews_html(self) %> -
+
<%= numbered_paginator(@favorite_set.posts) %> diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 3e4ab7fba..45a2d2727 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -63,13 +63,13 @@