will_paginate added to plugins

This commit is contained in:
Eugene Korbut 2009-02-10 04:13:08 +10:00
parent 8f0577bf56
commit ce40b31f7a
60 changed files with 4016 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 B

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 2em
: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>"examples/pagination.css"</b> of <i>will_paginate</i> library.
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)

View file

@ -0,0 +1,92 @@
<!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: 2em;
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>"examples/pagination.css"</b> of <i>will_paginate</i> library.
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;
&lt;div clas="page_info"&gt;
&lt;%= page_entries_info @posts %&gt;
&lt;/div&gt;
&lt;%= will_paginate @posts, :container =&gt; false %&gt;
&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>

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

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