switch post previews to use flexbox, add better styling for cropped thumbnails

2018-07-05 16:51:10 -07:00
parent ec44aa84fa
commit a610111658
11 changed files with 62 additions and 64 deletions
--- 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 {
--- 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;
--- 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;
--- 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;
  }
--- 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 << "<li class='arrow'>" + link_to("<<", nav_params_for(records.current_page - 1), :rel => "prev") + "</li>"
+      html << "<li class='arrow'>" + link_to(content_tag(:i, nil, class: "fas fa-chevron-left"), nav_params_for(records.current_page - 1), :rel => "prev") + "</li>"
    else
-      html << "<li class='arrow'><span>" + "&lt;&lt;" + "</span></li>"
+      html << "<li class='arrow'><span>" + content_tag(:i, nil, class: "fas fa-chevron-left") + "</span></li>"
    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 << "<li class='arrow'>" + link_to(">>", nav_params_for(records.current_page + 1), :rel => "next") + "</li>"
+      html << "<li class='arrow'>" + link_to(content_tag(:i, nil, class: "fas fa-chevron-right"), nav_params_for(records.current_page + 1), :rel => "next") + "</li>"
    else
-      html << "<li class='arrow'><span>" + "&gt;&gt;" + "</span></li>"
+      html << "<li class='arrow'><span>" + content_tag(:i, nil, class: "fas fa-chevron-right") + "</span></li>"
    end

    html << "</menu></div>"
@@ -92,7 +92,7 @@ module PaginationHelper
    html = []
    if page == "..."
      html << "<li class='more'>"
-      html << "..."
+      html << content_tag(:i, nil, class: "fas fa-ellipsis-h")
      html << "</li>"      
    elsif page == current_page
      html << "<li class='current-page'>"
--- 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 =  %{<article itemscope itemtype="http://schema.org/ImageObject" id="post_#{post.id}" class="#{imgClass} #{preview_class(post, options[:pool], options)}" #{data_attributes(post)}>}
+    html =  %{<article itemscope itemtype="http://schema.org/ImageObject" id="post_#{post.id}" class="#{preview_class(post, options[:pool], options)}" #{data_attributes(post)}>}
    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 << %{<a href="#{path}/#{post.id}#{tag_param}">}

    tooltip = "#{post.tag_string} rating:#{post.rating} score:#{post.score}"
-    html << %{<img class="#{imgClass}" itemprop="thumbnailUrl" src="#{src}" title="#{h(tooltip)}" alt="#{h(post.tag_string)}">}
+    html << %{<picture>}
+    html << %{<source media="(max-width: 660px)" srcset="#{cropped_src}">}
+    html << %{<source media="(min-width: 660px)" srcset="#{post.preview_file_url}">}
+    html << %{<img itemprop="thumbnailUrl" src="#{post.preview_file_url}" title="#{h(tooltip)}" alt="#{h(post.tag_string)}">}
+    html << %{</picture>}
    html << %{</a>}

    if options[:pool]
--- 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

--- 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
--- a/app/views/posts/partials/common/_search.html.erb
+++ b/app/views/posts/partials/common/_search.html.erb
@@ -6,14 +6,13 @@
 <section id="search-box">
  <h1>Search</h1>
  <%= form_tag(path, :method => "get") do %>
-    <%= text_field_tag("tags", tags, :size => 30, :id => tags_dom_id, :data => { :autocomplete => "tag-query" }) %>
    <% if params[:raw] %>
      <%= hidden_field_tag :raw, params[:raw] %>
    <% end %>
    <% if params[:random] %>
      <%= hidden_field_tag :random, params[:random] %>
    <% end %>
-    <%= submit_tag "Go", :name => nil, :class => "ui-button ui-widget ui-corner-all tiny gradient" %>
+    <%= text_field_tag("tags", tags, :id => tags_dom_id, :data => { :autocomplete => "tag-query" }) %><%= content_tag "button", content_tag("i", nil, class: "fas fa-search"), type: "submit" %>
    <%= hidden_field_tag "ms", "1" %>
  <% end %>
 </section>
--- a/app/views/posts/partials/index/_posts.html.erb
+++ b/app/views/posts/partials/index/_posts.html.erb
@@ -1,5 +1,5 @@
-<div id="posts">
-  <div style="overflow: hidden;">
+<div id="posts" class="user-disable-cropped-<%= CurrentUser.user.disable_cropped_thumbnails? %>">
+  <div id="posts-container">
    <%= post_set.presenter.post_previews_html(self) %>
  </div>

--- 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