post tooltips: add header bar with more post info.

Add a header bar containing the following information:

* Uploader + top tagger + upload date
* Score, favorite count, comment count
* Rating
* Source (Pixiv, Twitter, etc)
* Image dimensions

Also list series pools with tags.

app/assets/stylesheets/specific/post_tooltips.scss

@@ -56,7 +56,11 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
   border-color: #767676;
 
   .qtip-content {
-    padding: 4px 6px;
+    padding: 0;
+
+    > * {
+      padding: 2px 6px;
+    }
 
     .post-tooltip-body {
       @include thin-scrollbar;
@@ -68,16 +72,41 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
       }
     }
 
-    .post-tooltip-footer {
-      .post-tooltip-disable {
-        float: right;
-        margin-top: 2px;
+    .post-tooltip-header {
+      background-color: $menu_color;
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+
+      .post-tooltip-header-left {
+        flex: 1;
       }
+
+      .post-tooltip-header-right {
+        flex: 1;
+        text-align: right;
+      }
+
+      .fa-xs {
+        vertical-align: baseline;
+      }
+
+      .post-tooltip-disable {
+        margin-left: 0.5em;
+      }
+    }
+
+    .post-tooltip-info {
+      margin-left: 0.5em;
+      color: #555;
+      font-size: 10px;
     }
   }
 
-  &:not(:hover) a {
-    color: #666666;
+  &:not(:hover) {
+    a, span {
+      color: #777 !important;
+    }
   }
 
   &.post-tooltip-loading {

app/helpers/application_helper.rb

@@ -83,9 +83,11 @@ module ApplicationHelper
     raw content_tag(:time, duration, datetime: datetime, title: title)
   end
 
-  def time_ago_in_words_tagged(time)
+  def time_ago_in_words_tagged(time, compact: false)
     if time.past?
-      raw time_tag(time_ago_in_words(time) + " ago", time)
+      text = time_ago_in_words(time) + " ago"
+      text = text.gsub(/almost|about|over/, "") if compact
+      raw time_tag(text, time)
     else
       raw time_tag("in " + distance_of_time_in_words(Time.now, time), time)
     end

app/models/post.rb

@@ -509,6 +509,15 @@ class Post < ApplicationRecord
         source
       end
     end
+
+    def source_domain
+      return "" unless source =~ %r!\Ahttps?://!i
+
+      url = Addressable::URI.parse(normalized_source)
+      url.domain
+    rescue
+      ""
+    end
   end
 
   module TagMethods

app/views/posts/show.html+tooltip.erb

@@ -1,14 +1,50 @@
+<div class="post-tooltip-header">
+  <span class="post-tooltip-header-left">
+    <% if CurrentUser.is_moderator? && @post.uploader != @post.keeper %>
+      <%= link_to_user @post.uploader %> +
+    <% end %>
+
+    <%= link_to_user @post.keeper %>
+
+    <%= link_to time_ago_in_words_tagged(@post.created_at, compact: true), posts_path(tags: "date:#{@post.created_at.strftime("%Y-%m-%d")}"), class: "post-tooltip-date post-tooltip-info" %>
+
+    <span class="post-tooltip-favorites post-tooltip-info">
+      <span><%= @post.fav_count %></span>
+      <i class="far fa-star fa-xs"></i>
+    </span>
+
+    <span class="post-tooltip-score post-tooltip-info">
+      <span><%= @post.score %></span>
+      <i class="far fa-thumbs-up fa-xs"></i>
+    </span>
+
+    <% if @post.last_commented_at.present? %>
+      <span class="post-tooltip-comments post-tooltip-info">
+        <span><%= @post.comments.count %></span>
+        <i class="far fa-comments fa-xs"></i>
+      </span>
+    <% end %>
+  </span>
+
+  <span class="post-tooltip-header-right">
+    <%= link_to @post.source_domain, @post.normalized_source, class: "post-tooltip-source post-tooltip-info" if @post.source_domain.present? %>
+    <%= link_to "#{@post.pretty_rating.downcase}", posts_path(tags: "rating:#{@post.rating}"), class: "post-tooltip-rating post-tooltip-info" %>
+    <%= link_to "#{@post.image_width}x#{@post.image_height}", @post.file_url, class: "post-tooltip-dimensions post-tooltip-info" %>
+
+    <%= link_to "#", class: "post-tooltip-disable", title: "Disable enhanced tooltips" do %>
+      <i class="fas fa-times-circle"></i>
+    <% end %>
+  </span>
+</div>
+
 <div class="post-tooltip-body">
+  <div class="post-tooltip-pools">
+    <% @post.pools.series.undeleted.each do |pool| %>
+      <%= link_to pool, class: "pool-category-#{pool.category}" do %>
+        <%= "pool:#{pool.pretty_name} [#{pool.page_number(@post.id)}/#{pool.post_count}]" %>
+      <% end %>
+    <% end %>
+  </div>
+
   <%= @post.presenter.inline_tag_list_html(self, humanize_tags: false) %>
 </div>
-
-<div class="post-tooltip-footer">
-  <%= link_to_search "user:#{@post.uploader_name}" if CurrentUser.is_moderator? %>
-  <%= link_to "toptagger:#{@post.keeper.name}", user_path(@post.keeper) %>
-  <%= link_to_search "rating:#{@post.pretty_rating.downcase}" %>
-  <%= link_to_search "score:#{@post.score}" %>
-
-  <%= link_to "#", class: "post-tooltip-disable", title: "Disable enhanced tooltips" do %>
-    <i class="fas fa-times-circle"></i>
-  <% end %>
-</div>