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

posts: factor out post navbar into component.

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

69
app/components/post_navbar_component/post_navbar_component.html.erb Normal file
View File

@@ -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>

31
app/components/post_navbar_component/post_navbar_component.scss Normal file
View File

@@ -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;
}
}
}