Skip to content
Browse files

add examples of pagination links styling

  • Loading branch information...
1 parent 8fe31cb commit 4d7de72f8df3b75069973b755231660b07783524 @mislav committed Apr 7, 2008
View
0 README → README.rdoc
File renamed without changes.
View
8 Rakefile
@@ -53,15 +53,17 @@ end
desc 'Generate RDoc documentation for the will_paginate plugin.'
Rake::RDocTask.new(:rdoc) do |rdoc|
- files = ['README', 'LICENSE', FileList.new('lib/**/*.rb').exclude('lib/**/named_scope*')]
+ files = ['README.rdoc', 'LICENSE']
+ files << FileList.new('lib/**/*.rb').exclude('lib/will_paginate/named_scope*').exclude('lib/will_paginate/array.rb')
rdoc.rdoc_files.add(files)
- rdoc.main = "README" # page to start on
- rdoc.title = "will_paginate"
+ rdoc.main = "README.rdoc" # page to start on
+ rdoc.title = "will_paginate documentation"
templates = %w[/Users/chris/ruby/projects/err/rock/template.rb /var/www/rock/template.rb]
rdoc.template = templates.find { |t| File.exists? t }
rdoc.rdoc_dir = 'doc' # rdoc output folder
rdoc.options << '--inline-source'
rdoc.options << '--charset=UTF-8'
+ rdoc.options << '--webcvs="http://github.com/mislav/will_paginate/tree/master/%s"'
end
View
BIN examples/apple-circle.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
69 examples/index.haml
@@ -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">&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">Next &raquo;</a>'
+- pagination_no_page_links = '<span class="disabled">&laquo; Previous</span> <a href="./?page=2" rel="next">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
92 examples/index.html
@@ -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">&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">Next &raquo;</a>
+ </div>
+ <h2>Digg.com</h2>
+ <div class='digg-pagination'>
+ <span class="disabled">&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">Next &raquo;</a>
+ </div>
+ <h2>Digg-style, no page links</h2>
+ <div class='digg-pagination'>
+ <span class="disabled">&laquo; Previous</span> <a href="./?page=2" rel="next">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">&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">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">&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">Next &raquo;</a>
+ </div>
+ <h2>Flickr.com</h2>
+ <div class='flickr-pagination'>
+ <span class="disabled">&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">Next &raquo;</a>
+ <div class='page-info'>(118 photos)</div>
+ </div>
+</body>
View
86 examples/pagination.css
@@ -0,0 +1,86 @@
+.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 a[rel="next"] {
+ border-width: 2px; }
+ .flickr-pagination .page-info {
+ color: #aaa;
+ padding-top: .8em; }
View
87 examples/pagination.sass
@@ -0,0 +1,87 @@
+.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
+ &[rel="next"]
+ :border-width 2px
+ .page-info
+ :color #aaa
+ :padding-top .8em

0 comments on commit 4d7de72

Please sign in to comment.
Something went wrong with that request. Please try again.