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
2021-01-29 18:36:15 -06:00
parent 151a9b026e
commit 1e778dbbf6
16 changed files with 203 additions and 186 deletions

View File

@@ -1,34 +0,0 @@
<div id="favgroup-nav">
<ul>
<% favgroups = favgroups.sort_by { |favgroup| [(favgroup.id == params[:favgroup_id].to_i) ? 0 : 1, favgroup.name] } %>
<% favgroups.each do |favgroup| %>
<% selected = favgroup.id == params[:favgroup_id].to_i %>
<%= tag.li id: "nav-link-for-favgroup-#{favgroup.id}", "data-selected": selected do %>
<span class="first">
<%= link_to_unless favgroup.first_post?(post.id), "«", post_path(favgroup.post_ids.first, favgroup_id: favgroup.id) %>
</span>
<% favgroup.previous_post_id(post.id).tap do |previous_post_id| %>
<span class="prev">
<%= link_to_if previous_post_id, " prev", post_path(previous_post_id.to_i, favgroup_id: favgroup.id), rel: ("prev" if selected) %>
</span>
<% end %>
<span class="favgroup-name">
<%= link_to "Favorite group: #{favgroup.pretty_name}", favgroup %>
</span>
<% favgroup.next_post_id(post.id).tap do |next_post_id| %>
<span class="next">
<%= link_to_if next_post_id, "next ", post_path(next_post_id.to_i, favgroup_id: favgroup.id), rel: ("next" if selected) %>
</span>
<% end %>
<span class="last">
<%= link_to_unless favgroup.last_post?(post.id), "»", post_path(favgroup.post_ids.last, favgroup_id: favgroup.id) %>
</span>
<% end %>
<% end %>
</ul>
</div>

View File

@@ -1,15 +0,0 @@
<% if (position == "bottom" && CurrentUser.user.new_post_navigation_layout) || (position == "top" && !CurrentUser.user.new_post_navigation_layout) %>
<div id="nav-links" class="notice post-notice post-notice-search">
<% if post.presenter.has_sequential_navigation?(params) %>
<%= render "posts/partials/show/search_seq", :post => post %>
<% end %>
<% if post.pools.undeleted.present? %>
<%= render "posts/partials/show/pool_list", post: post, pools: post.pools.undeleted %>
<% end %>
<% if CurrentUser.user.favorite_groups.for_post(post.id).present? %>
<%= render "posts/partials/show/favorite_groups", post: post, favgroups: CurrentUser.user.favorite_groups.for_post(post.id).order(name: :asc) %>
<% end %>
</div>
<% end %>

View File

@@ -1,8 +0,0 @@
<div id="pool-nav">
<ul>
<% pools = pools.sort_by { |pool| [is_pool_selected?(pool) ? 0 : 1, pool.is_series? ? 0 : 1, pool.name] } %>
<% pools.each do |pool| %>
<%= render "posts/partials/show/pool_list_item", pool: pool, post: post, selected: is_pool_selected?(pool) %>
<% end %>
</ul>
</div>

View File

@@ -1,33 +0,0 @@
<%= tag.li id: "nav-link-for-pool-#{pool.id}", class: "pool-category-#{pool.category}", "data-selected": selected do -%>
<% if !pool.first_post?(post.id) && pool.post_ids.first -%>
<%= link_to("&laquo;".html_safe, post_path(pool.post_ids.first, pool_id: pool.id), class: "first", title: "to page 1") %>
<% else -%>
<span class="first">&laquo;</span>
<% end -%>
<% pool.previous_post_id(post.id).tap do |previous_post_id| -%>
<% if previous_post_id %>
<%= link_to "&lsaquo;&thinsp;prev".html_safe, post_path(previous_post_id, pool_id: pool.id), rel: selected ? "prev" : nil, class: "prev", title: "to page #{pool.page_number(previous_post_id)}" -%>
<% else -%>
<span class="prev">&lsaquo;&thinsp;prev</span>
<% end %>
<% end -%>
<span class="pool-name">
<%= link_to("Pool: #{pool.pretty_name}", pool_path(pool), title: "page #{pool.page_number(post.id)}/#{pool.post_count}") -%>
</span>
<% pool.next_post_id(post.id).tap do |next_post_id| -%>
<% if next_post_id %>
<%= link_to("next&thinsp;&rsaquo;".html_safe, post_path(next_post_id, pool_id: pool.id), rel: selected ? "next" : nil, class: "next", title: "to page #{pool.page_number(next_post_id)}") -%>
<% else -%>
<span class="next">next&thinsp;&rsaquo;</span>
<% end -%>
<% end -%>
<% if !pool.last_post?(post.id) && pool.post_ids.last -%>
<%= link_to("&raquo;".html_safe, post_path(pool.post_ids.last, pool_id: pool.id), class: "last", title: "to page #{pool.post_count}") -%>
<% else -%>
<span class="last">&raquo;</span>
<% end -%>
<% end -%>

View File

@@ -1,9 +0,0 @@
<div id="search-seq-nav">
<ul>
<li data-selected="true">
<%= link_to "&lsaquo;&thinsp;prev".html_safe, show_seq_post_path(post, q: params[:q], seq: "prev"), rel: "prev", class: "prev" %>
<span class="search-name">Search: <%= params[:q].presence || "status:any" %></span>
<%= link_to "next&thinsp;&rsaquo;".html_safe, show_seq_post_path(post, q: params[:q], seq: "next"), rel: "next", class: "next" %>
</li>
</ul>
</div>

View File

@@ -38,8 +38,8 @@
<% end %>
<% content_for(:content) do %>
<% if @post.presenter.has_nav_links?(self) %>
<%= render "posts/partials/show/nav_links", :post => @post, :position => "top" %>
<% if !CurrentUser.user.new_post_navigation_layout %>
<%= render_post_navbar(@post, current_user: CurrentUser.user, search: params[:q], pool_id: params[:pool_id], favgroup_id: params[:favgroup_id]) %>
<% end %>
<%= render "posts/partials/show/notices", :post => @post %>
@@ -82,8 +82,8 @@
</div>
<% end %>
<% if @post.presenter.has_nav_links?(self) %>
<%= render "posts/partials/show/nav_links", :post => @post, :position => "bottom" %>
<% if CurrentUser.user.new_post_navigation_layout %>
<%= render_post_navbar(@post, current_user: CurrentUser.user, search: params[:q], pool_id: params[:pool_id], favgroup_id: params[:favgroup_id]) %>
<% end %>
<menu id="post-sections">