Merge pull request #3778 from r888888888/switch-to-flexbox

Switch to flexbox

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 {

app/assets/stylesheets/common/paginator.scss

@@ -10,22 +10,17 @@ 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 {
       background: white;
       color: $link_color;
     }
 
-    a.current {
-      border: 1px solid #AAA;
-    }
-
     a:hover {
       background: $link_color;
       color: white;

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;

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,27 @@
     }
   }
 
+  #posts #posts-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
   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 +173,23 @@
     }
   }
 
+  .user-disable-cropped-false {
+    article.post-preview {
+      width: 33.3%;
+      height: 33.3vw;
+    }
+
+    img {
+      width: 100%;
+      height: 33.3vw;
+
+      &.has-cropped-false {
+        width: 33.3vw;
+        object-fit: cover;
+      }
+    }
+  }
+
   img#image {
     margin-top: 5px;
   }

app/helpers/pagination_helper.rb

@@ -29,9 +29,9 @@ def numbered_paginator(records, switch_to_sequential = true)
     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 @@ def numbered_paginator(records, switch_to_sequential = true)
     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 @@ def numbered_paginator_item(page, current_page)
     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'>"

app/presenters/post_presenter.rb

@@ -21,15 +21,13 @@ def self.preview(post, options = {})
     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 @@ def self.preview(post, options = {})
     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" class="has-cropped-#{post.has_cropped?}" src="#{post.preview_file_url}" title="#{h(tooltip)}" alt="#{h(post.tag_string)}">}
+    html << %{</picture>}
     html << %{</a>}
 
     if options[:pool]

app/presenters/post_set_presenters/base.rb

@@ -12,7 +12,7 @@ def post_previews_html(template, options = {})
       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
 

app/presenters/post_set_presenters/post.rb

@@ -11,6 +11,10 @@ def tag_set_presenter
       @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

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>

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-<%= Danbooru.config.enable_image_cropping && CurrentUser.user.disable_cropped_thumbnails? %>">
+  <div id="posts-container">
     <%= post_set.presenter.post_previews_html(self) %>
   </div>
 

db/populate.rb

@@ -127,7 +127,7 @@ def rand_document(n, unique = false)
 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 @@ def rand_document(n, unique = false)
     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