Have a news story display, similar to HackerNews, that uses an <ol> tag for numbering and vote ranking. When trying to paginate using the Kaminari gem the <li> numbers of each article get reset to 1-20 on every page.
I've tried using CSS counter-reset and counter-increment, but I cannot get it to work yet. I also tried manually adding counter-reset for each page, but if the site somehow sees more than 5 pages, I'll have to manually encode the increments, which isn't possible.
I'm wondering if there's a js solution.
Here's the index method of my stories_controller:
def index
if params[:sort] && params[:sort].to_sym == :newest
@stories = Story.order("created_at DESC").page(params[:page]).per(20)
else
@stories = Story.order('karma DESC').page(params[:page]).per(20)
end
end
Here's my Story index.html.haml:
%ol
- @stories.each do |story|
= render partial: 'story', locals: { story: story, tag_type: :li }
= paginate @stories
And the _story.html.haml partial off the above:
= content_tag defined?(tag_type) ? tag_type : :div, class: 'story' do
= link_to "⇧", upvote_story_url(story), class: 'upvote', method: :post
%div
.title
= link_to story.title.titlecase, story.url
%span.link-domain (#{story.url_domain})
.metadata
= statusline story
|
= link_to 'comments', story, class: 'comments-link'
= "(#{story.comments.all.count})"
And finally my relevant CSS:
ul, ol {
margin: 0 1.5em 1.5em 0;
padding-left: 2.0em;
counter-reset: section;
li {
margin: 10px;
}
}
li {
float: top;
counter-increment: section;
}
Thanks in advance for any help or new ideas!
EDIT:
Fixed this by taking out the Ordered List tag and switching to a Unordered List with list-style-type set to none to remove the bullet.
Here's the code I used in the haml view:
- if params[:page].nil? || params[:page] == "0" || params[:page] == "1"
- x = 0
- else
- page = params[:page].to_i - 1
- x = page * 15
- @stories.each_with_index do |story, index|
= content_tag defined?(tag_type) ? tag_type : :div, class: 'story' do
%li
.title
.story_number
= index + x + 1
= etc...
