Skip to content

Commit

Permalink
move what were previously will_paginate examples to the project page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mislav
mislav committed Jan 8, 2009
1 parent f4a38ba commit f6fd277
Show file tree
Hide file tree
Showing 5 changed files with 320 additions and 11 deletions.
Binary file added apple-circle.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions index.haml
View file
@@ -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">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>'
- pagination_no_page_links = '<span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</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('<', '&lt;').gsub('>', '&gt;')
%h2 Digg-style, extra content
.digg_pagination
.page_info Displaying entries <b>1&nbsp;-&nbsp;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('<', '&lt;').gsub('>', '&gt;')
%h2 Apple.com store
.apple_pagination= pagination
%h2 Flickr.com
.flickr_pagination
= pagination
.page_info (118 photos)
81 changes: 70 additions & 11 deletions index.html
View file
@@ -1,11 +1,70 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <html></html>
<head> <head>
<title>will_paginate library</title> <title>Samples of pagination styling for will_paginate</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <link href='pagination.css' rel='stylesheet' type='text/css' />
</head> <style type='text/css'>
<body> html {
<h1>will_paginate library</h1> margin: 0;
<p>This is the future website for will_paginate.</p> padding: 0;
</body> background: #999;
</html> 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">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a></div>
<h2>Digg.com</h2>
<div class='digg_pagination'><span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a></div>
<h2>Digg-style, no page links</h2>
<div class='digg_pagination'><span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a></div>
<p>Code that renders this:</p>
<pre><code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code></pre>
<h2>Digg-style, extra content</h2>
<div class='digg_pagination'>
<div class='page_info'>Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total</div>
<span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
</div>
<p>Code that renders this:</p>
<pre><code>&lt;div class="digg_pagination"&gt;&#x000A; &lt;div clas="page_info"&gt;&#x000A; &lt;%= page_entries_info @posts %&gt;&#x000A; &lt;/div&gt;&#x000A; &lt;%= will_paginate @posts, :container =&gt; false %&gt;&#x000A;&lt;/div&gt;</code></pre>
<h2>Apple.com store</h2>
<div class='apple_pagination'><span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a></div>
<h2>Flickr.com</h2>
<div class='flickr_pagination'>
<span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
<div class='page_info'>(118 photos)</div>
</div>
</body>
90 changes: 90 additions & 0 deletions pagination.css
View file
@@ -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; }
91 changes: 91 additions & 0 deletions pagination.sass
View file
@@ -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

0 comments on commit f6fd277

Please sign in to comment.