posts: factor out post navbar into component.
* Factor out the post navbar into a component. The post navbar is the part of the post containing the current search, the list of pools, and the list of favgroups, along with next/prev navigation links. * Change navbar markup: remove various unused CSS classes/IDs, change pools to use same markup as favgroups, replace nested <div>'s with flat <ul>/<li> list. * Use CSS to truncate long searches/pool names/favgroup names if they're too wide for the screen (especially on mobile).
This commit is contained in:
evazion
39
app/components/post_navbar_component.rb
Normal file
39
app/components/post_navbar_component.rb
Normal file
@@ -0,0 +1,39 @@
|
||||
class PostNavbarComponent < ApplicationComponent
|
||||
extend Memoist
|
||||
|
||||
attr_reader :post, :current_user, :search, :pool_id, :favgroup_id
|
||||
|
||||
def initialize(post:, current_user:, search: nil, pool_id: nil, favgroup_id: nil)
|
||||
@post = post
|
||||
@current_user = current_user
|
||||
@search = search.presence || "status:any"
|
||||
@pool_id = pool_id&.to_i
|
||||
@favgroup_id = favgroup_id&.to_i
|
||||
end
|
||||
|
||||
def render?
|
||||
has_search_navbar? || pools.any? || favgroups.any?
|
||||
end
|
||||
|
||||
def pools
|
||||
post.pools.undeleted.sort_by do |pool|
|
||||
[pool.id == pool_id ? 0 : 1, pool.is_series? ? 0 : 1, pool.name]
|
||||
end
|
||||
end
|
||||
|
||||
def favgroups
|
||||
current_user.favorite_groups.for_post(post.id).sort_by do |favgroup|
|
||||
[favgroup.id == favgroup_id ? 0 : 1, favgroup.name]
|
||||
end
|
||||
end
|
||||
|
||||
def has_search_navbar?
|
||||
!has_order_metatag? && pool_id.blank? && favgroup_id.blank?
|
||||
end
|
||||
|
||||
def has_order_metatag?
|
||||
PostQueryBuilder.new(search).has_metatag?(:order, :ordfav, :ordpool)
|
||||
end
|
||||
|
||||
memoize :pools, :favgroups
|
||||
end
|
||||
@@ -0,0 +1,69 @@
|
||||
<ul class="notice post-notice post-notice-search">
|
||||
<% if has_search_navbar? %>
|
||||
<li class="search-navbar" data-selected="true">
|
||||
<%= link_to "‹ prev", show_seq_post_path(post, q: search, seq: "prev"), rel: "nofollow prev", class: "prev" %>
|
||||
<span class="search-name">Search: <%= link_to search, posts_path(tags: search), rel: "nofollow" %></span>
|
||||
<%= link_to "next ›", show_seq_post_path(post, q: search, seq: "next"), rel: "nofollow next", class: "next" %>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<% pools.each do |pool| %>
|
||||
<% selected = pool_id == pool.id %>
|
||||
<% first_post_id = pool.post_ids.first %>
|
||||
<% last_post_id = pool.post_ids.last %>
|
||||
<% previous_post_id = pool.previous_post_id(post.id) %>
|
||||
<% next_post_id = pool.next_post_id(post.id) %>
|
||||
|
||||
<%= tag.li class: "pool-navbar pool-category-#{pool.category}", "data-selected": selected do %>
|
||||
<span class="first">
|
||||
<%= link_to_unless first_post_id == post.id, "«", post_path(first_post_id, pool_id: pool.id), rel: "nofollow", title: "to page 1" %>
|
||||
</span>
|
||||
|
||||
<span class="prev">
|
||||
<%= link_to_if previous_post_id, "‹ prev", post_path(previous_post_id.to_i, pool_id: pool.id), rel: ["nofollow", ("prev" if selected)], title: "to page #{pool.page_number(previous_post_id)}" %>
|
||||
</span>
|
||||
|
||||
<span class="pool-name">
|
||||
<%= link_to "Pool: #{pool.pretty_name}", pool, title: "page #{pool.page_number(post.id)}/#{pool.post_count}" %>
|
||||
</span>
|
||||
|
||||
<span class="next">
|
||||
<%= link_to_if next_post_id, "next ›", post_path(next_post_id.to_i, pool_id: pool.id), rel: ["nofollow", ("next" if selected)], title: "to page #{pool.page_number(next_post_id)}" %>
|
||||
</span>
|
||||
|
||||
<span class="last">
|
||||
<%= link_to_unless last_post_id == post.id, "»", post_path(last_post_id, pool_id: pool.id), rel: "nofollow", title: "to page #{pool.post_count}" %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% favgroups.each do |favgroup| %>
|
||||
<% selected = favgroup_id == favgroup.id %>
|
||||
<% first_post_id = favgroup.post_ids.first %>
|
||||
<% last_post_id = favgroup.post_ids.last %>
|
||||
<% previous_post_id = favgroup.previous_post_id(post.id) %>
|
||||
<% next_post_id = favgroup.next_post_id(post.id) %>
|
||||
|
||||
<%= tag.li class: "favgroup-navbar", "data-selected": selected do %>
|
||||
<span class="first">
|
||||
<%= link_to_unless first_post_id == post.id, "«", post_path(first_post_id, favgroup_id: favgroup.id), rel: "nofollow" %>
|
||||
</span>
|
||||
|
||||
<span class="prev">
|
||||
<%= link_to_if previous_post_id, "‹ prev", post_path(previous_post_id.to_i, favgroup_id: favgroup.id), rel: ["nofollow", ("prev" if selected)] %>
|
||||
</span>
|
||||
|
||||
<span class="favgroup-name">
|
||||
<%= link_to "Favgroup: #{favgroup.pretty_name}", favgroup %>
|
||||
</span>
|
||||
|
||||
<span class="next">
|
||||
<%= link_to_if next_post_id, "next ›", post_path(next_post_id.to_i, favgroup_id: favgroup.id), rel: ["nofollow", ("next" if selected)] %>
|
||||
</span>
|
||||
|
||||
<span class="last">
|
||||
<%= link_to_unless last_post_id == post.id, "»", post_path(last_post_id, favgroup_id: favgroup.id), rel: "nofollow" %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
@@ -0,0 +1,31 @@
|
||||
.post-notice-search {
|
||||
li {
|
||||
display: flex;
|
||||
|
||||
&[data-selected="true"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.first, .prev, .next, .last {
|
||||
flex: 0;
|
||||
margin: 0 0.25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.first, .last {
|
||||
flex-basis: 1em;
|
||||
}
|
||||
|
||||
&.search-navbar .prev, &.search-navbar .next {
|
||||
margin: 0 1.75em;
|
||||
}
|
||||
|
||||
.pool-name, .favgroup-name, .search-name {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user