jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

post tooltips: fix long usernames causing header to overflow.

Browse Source 
* Make tooltips wider.
* Abbreviate ratings.
* Truncate long usernames.
This commit is contained in:
evazion
2020-07-16 12:48:59 -05:00
parent 9f53c459c8
commit ce61202d14
3 changed files with 51 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/src/javascripts/post_tooltips.js
View File

@@ -9,7 +9,6 @@ PostTooltip.POST_SELECTOR = "*:not(.ui-sortable-handle) > .post-preview img, .dt
PostTooltip.SHOW_DELAY = 500;
PostTooltip.HIDE_DELAY = 125;
PostTooltip.DURATION = 250;
PostTooltip.MAX_WIDTH = 400;
PostTooltip.initialize = function () {
if (PostTooltip.disabled()) {
@@ -22,7 +21,7 @@ PostTooltip.initialize = function () {
delay: [PostTooltip.SHOW_DELAY, PostTooltip.HIDE_DELAY],
duration: PostTooltip.DURATION,
interactive: true,
maxWidth: PostTooltip.MAX_WIDTH,
maxWidth: "none",
target: PostTooltip.POST_SELECTOR,
theme: "common-tooltip post-tooltip",
touch: false,

39
app/javascript/src/styles/specific/post_tooltips.scss
View File

@@ -46,7 +46,8 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
}
.tippy-box[data-theme~="post-tooltip"] {
min-width: 200px;
min-width: 20em;
max-width: 40em !important;
font-size: 11px;
line-height: $tooltip-line-height;
@@ -80,34 +81,32 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
.post-tooltip-body-right { flex: 1; }
}
.post-tooltip-header {
div.post-tooltip-header {
background-color: var(--post-tooltip-header-background-color);
display: flex;
white-space: nowrap;
overflow: hidden;
align-items: center;
.post-tooltip-header-left {
flex: 1;
.post-tooltip-info {
margin-right: 0.5em;
color: var(--post-tooltip-info-color);
font-size: 10px;
flex: 0;
}
.post-tooltip-header-right {
a.user {
margin-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
max-width: 11em;
}
.post-tooltip-source {
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: var(--post-tooltip-info-color);
font-size: 10px;
}
}
}

61
app/views/posts/show.html+tooltip.erb
View File

@@ -1,38 +1,39 @@
<div class="post-tooltip-header">
<span class="post-tooltip-header-left">
<%= link_to_user @post.uploader %>
<%= link_to_user @post.uploader %>
<span class="post-tooltip-favorites post-tooltip-info">
<span><%= @post.fav_count %></span>
<i class="far fa-heart 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 %>
<%= link_to posts_path(tags: "date:#{@post.created_at.strftime("%Y-%m-%d")}"), class: "post-tooltip-date post-tooltip-info" do %>
<%= time_ago_in_words_tagged(@post.created_at, compact: true) %> ago
<% end %>
<span class="post-tooltip-favorites post-tooltip-info">
<span><%= @post.fav_count %></span>
<i class="far fa-heart fa-xs"></i>
</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 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 %>
<%= link_to posts_path(tags: "date:#{@post.created_at.strftime("%Y-%m-%d")}"), class: "post-tooltip-date post-tooltip-info" do %>
<%= time_ago_in_words_tagged(@post.created_at, compact: true) %> ago
<% end %>
<% if @post.source_domain.present? %>
<%= link_to @post.source_domain, @post.normalized_source, class: "post-tooltip-source post-tooltip-info" %>
<% else %>
<%= link_to "no source", posts_path(tags: "source:none"), class: "post-tooltip-source post-tooltip-info" %>
<% end %>
<%= link_to "#{@post.rating.upcase}", posts_path(tags: "rating:#{@post.pretty_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 %>
</div>
<div class="post-tooltip-body <%= "has-preview" if params[:preview].truthy? %>">