forked from mislav/will_paginate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move what were previously will_paginate examples to the project page
- Loading branch information
Showing
5 changed files
with
320 additions
and
11 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
!!! | ||
%html | ||
%head | ||
%title Samples of pagination styling for will_paginate | ||
%link{ :rel => 'stylesheet', :type => 'text/css', :href => 'pagination.css' } | ||
%style{ :type => 'text/css' } | ||
:sass | ||
html | ||
:margin 0 | ||
:padding 0 | ||
:background #999 | ||
:font normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif | ||
body | ||
:margin 4em | ||
:padding 2em | ||
:border 2px solid gray | ||
:background white | ||
:color #222 | ||
h1 | ||
:font-size 2em | ||
:font-weight normal | ||
:margin 0 0 1em 0 | ||
h2 | ||
:font-size 1.4em | ||
:margin 1em 0 .5em 0 | ||
pre | ||
:font-size 13px | ||
:font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace | ||
|
||
- pagination = '<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>' | ||
- pagination_no_page_links = '<span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a>' | ||
|
||
%body | ||
%h1 Samples of pagination styling for will_paginate | ||
%p | ||
Find these styles in <b>"gh-pages"</b> branch of the will_paginate repository. | ||
There is a Sass version of it for all you sassy people. | ||
%p | ||
Read about good rules for pagination: | ||
%a{ :href => 'http://kurafire.net/log/archive/2007/06/22/pagination-101' } Pagination 101 | ||
%p | ||
%em Warning: | ||
page links below don't lead anywhere (so don't click on them). | ||
%h2 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span> | ||
%div= pagination | ||
%h2 Digg.com | ||
.digg_pagination= pagination | ||
%h2 Digg-style, no page links | ||
.digg_pagination= pagination_no_page_links | ||
%p Code that renders this: | ||
%pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '<').gsub('>', '>') | ||
%h2 Digg-style, extra content | ||
.digg_pagination | ||
.page_info Displaying entries <b>1 - 6</b> of <b>180</b> in total | ||
= pagination | ||
%p Code that renders this: | ||
%pre= '<code>%s</code>' % %[<div class="digg_pagination">\n <div clas="page_info">\n <%= page_entries_info @posts %>\n </div>\n <%= will_paginate @posts, :container => false %>\n</div>].gsub('<', '<').gsub('>', '>') | ||
%h2 Apple.com store | ||
.apple_pagination= pagination | ||
%h2 Flickr.com | ||
.flickr_pagination | ||
= pagination | ||
.page_info (118 photos) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,70 @@ | ||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
<html> | ||
<head> | ||
<title>will_paginate library</title> | ||
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"> | ||
</head> | ||
<body> | ||
<h1>will_paginate library</h1> | ||
<p>This is the future website for will_paginate.</p> | ||
</body> | ||
</html> | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
<html></html> | ||
<head> | ||
<title>Samples of pagination styling for will_paginate</title> | ||
<link href='pagination.css' rel='stylesheet' type='text/css' /> | ||
<style type='text/css'> | ||
html { | ||
margin: 0; | ||
padding: 0; | ||
background: #999; | ||
font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; } | ||
|
||
body { | ||
margin: 4em; | ||
padding: 2em; | ||
border: 2px solid gray; | ||
background: white; | ||
color: #222; } | ||
|
||
h1 { | ||
font-size: 2em; | ||
font-weight: normal; | ||
margin: 0 0 1em 0; } | ||
|
||
h2 { | ||
font-size: 1.4em; | ||
margin: 1em 0 .5em 0; } | ||
|
||
pre { | ||
font-size: 13px; | ||
font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; } | ||
</style> | ||
</head> | ||
<body> | ||
<h1>Samples of pagination styling for will_paginate</h1> | ||
<p> | ||
Find these styles in <b>"gh-pages"</b> branch of the <i>will_paginate</i> repository. | ||
There is a Sass version of it for all you sassy people. | ||
</p> | ||
<p> | ||
Read about good rules for pagination: | ||
<a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a> | ||
</p> | ||
<p> | ||
<em>Warning:</em> | ||
page links below don't lead anywhere (so don't click on them). | ||
</p> | ||
<h2>Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span></h2> | ||
<div><span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a></div> | ||
<h2>Digg.com</h2> | ||
<div class='digg_pagination'><span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a></div> | ||
<h2>Digg-style, no page links</h2> | ||
<div class='digg_pagination'><span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a></div> | ||
<p>Code that renders this:</p> | ||
<pre><code><%= will_paginate @posts, :page_links => false %></code></pre> | ||
<h2>Digg-style, extra content</h2> | ||
<div class='digg_pagination'> | ||
<div class='page_info'>Displaying entries <b>1 - 6</b> of <b>180</b> in total</div> | ||
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a> | ||
</div> | ||
<p>Code that renders this:</p> | ||
<pre><code><div class="digg_pagination">
 <div clas="page_info">
 <%= page_entries_info @posts %>
 </div>
 <%= will_paginate @posts, :container => false %>
</div></code></pre> | ||
<h2>Apple.com store</h2> | ||
<div class='apple_pagination'><span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a></div> | ||
<h2>Flickr.com</h2> | ||
<div class='flickr_pagination'> | ||
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a> | ||
<div class='page_info'>(118 photos)</div> | ||
</div> | ||
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
.digg_pagination { | ||
background: white; | ||
/* self-clearing method: */ } | ||
.digg_pagination a, .digg_pagination span { | ||
padding: .2em .5em; | ||
display: block; | ||
float: left; | ||
margin-right: 1px; } | ||
.digg_pagination span.disabled { | ||
color: #999; | ||
border: 1px solid #DDD; } | ||
.digg_pagination span.current { | ||
font-weight: bold; | ||
background: #2E6AB1; | ||
color: white; | ||
border: 1px solid #2E6AB1; } | ||
.digg_pagination a { | ||
text-decoration: none; | ||
color: #105CB6; | ||
border: 1px solid #9AAFE5; } | ||
.digg_pagination a:hover, .digg_pagination a:focus { | ||
color: #003; | ||
border-color: #003; } | ||
.digg_pagination .page_info { | ||
background: #2E6AB1; | ||
color: white; | ||
padding: .4em .6em; | ||
width: 22em; | ||
margin-bottom: .3em; | ||
text-align: center; } | ||
.digg_pagination .page_info b { | ||
color: #003; | ||
background: #6aa6ed; | ||
padding: .1em .25em; } | ||
.digg_pagination:after { | ||
content: "."; | ||
display: block; | ||
height: 0; | ||
clear: both; | ||
visibility: hidden; } | ||
* html .digg_pagination { | ||
height: 1%; } | ||
*:first-child+html .digg_pagination { | ||
overflow: hidden; } | ||
|
||
.apple_pagination { | ||
background: #F1F1F1; | ||
border: 1px solid #E5E5E5; | ||
text-align: center; | ||
padding: 1em; } | ||
.apple_pagination a, .apple_pagination span { | ||
padding: .2em .3em; } | ||
.apple_pagination span.disabled { | ||
color: #AAA; } | ||
.apple_pagination span.current { | ||
font-weight: bold; | ||
background: transparent url(apple-circle.gif) no-repeat 50% 50%; } | ||
.apple_pagination a { | ||
text-decoration: none; | ||
color: black; } | ||
.apple_pagination a:hover, .apple_pagination a:focus { | ||
text-decoration: underline; } | ||
|
||
.flickr_pagination { | ||
text-align: center; | ||
padding: .3em; } | ||
.flickr_pagination a, .flickr_pagination span { | ||
padding: .2em .5em; } | ||
.flickr_pagination span.disabled { | ||
color: #AAA; } | ||
.flickr_pagination span.current { | ||
font-weight: bold; | ||
color: #FF0084; } | ||
.flickr_pagination a { | ||
border: 1px solid #DDDDDD; | ||
color: #0063DC; | ||
text-decoration: none; } | ||
.flickr_pagination a:hover, .flickr_pagination a:focus { | ||
border-color: #003366; | ||
background: #0063DC; | ||
color: white; } | ||
.flickr_pagination .page_info { | ||
color: #aaa; | ||
padding-top: .8em; } | ||
.flickr_pagination .prev_page, .flickr_pagination .next_page { | ||
border-width: 2px; } | ||
.flickr_pagination .prev_page { | ||
margin-right: 1em; } | ||
.flickr_pagination .next_page { | ||
margin-left: 1em; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
.digg_pagination | ||
:background white | ||
a, span | ||
:padding .2em .5em | ||
:display block | ||
:float left | ||
:margin-right 1px | ||
span.disabled | ||
:color #999 | ||
:border 1px solid #DDD | ||
span.current | ||
:font-weight bold | ||
:background #2E6AB1 | ||
:color white | ||
:border 1px solid #2E6AB1 | ||
a | ||
:text-decoration none | ||
:color #105CB6 | ||
:border 1px solid #9AAFE5 | ||
&:hover, &:focus | ||
:color #003 | ||
:border-color #003 | ||
.page_info | ||
:background #2E6AB1 | ||
:color white | ||
:padding .4em .6em | ||
:width 22em | ||
:margin-bottom .3em | ||
:text-align center | ||
b | ||
:color #003 | ||
:background = #2E6AB1 + 60 | ||
:padding .1em .25em | ||
|
||
/* self-clearing method: | ||
&:after | ||
:content "." | ||
:display block | ||
:height 0 | ||
:clear both | ||
:visibility hidden | ||
* html & | ||
:height 1% | ||
*:first-child+html & | ||
:overflow hidden | ||
|
||
.apple_pagination | ||
:background #F1F1F1 | ||
:border 1px solid #E5E5E5 | ||
:text-align center | ||
:padding 1em | ||
a, span | ||
:padding .2em .3em | ||
span.disabled | ||
:color #AAA | ||
span.current | ||
:font-weight bold | ||
:background transparent url(apple-circle.gif) no-repeat 50% 50% | ||
a | ||
:text-decoration none | ||
:color black | ||
&:hover, &:focus | ||
:text-decoration underline | ||
|
||
.flickr_pagination | ||
:text-align center | ||
:padding .3em | ||
a, span | ||
:padding .2em .5em | ||
span.disabled | ||
:color #AAA | ||
span.current | ||
:font-weight bold | ||
:color #FF0084 | ||
a | ||
:border 1px solid #DDDDDD | ||
:color #0063DC | ||
:text-decoration none | ||
&:hover, &:focus | ||
:border-color #003366 | ||
:background #0063DC | ||
:color white | ||
.page_info | ||
:color #aaa | ||
:padding-top .8em | ||
.prev_page, .next_page | ||
:border-width 2px | ||
.prev_page | ||
:margin-right 1em | ||
.next_page | ||
:margin-left 1em |