Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

fix broken "Pagination 101" link

closes #102
  • Loading branch information...
commit 09c91df38fae74416b55d1b12a35b9b1c6df48bc 1 parent df4ab5e
Mislav Marohnić mislav authored committed

Showing 3 changed files with 128 additions and 149 deletions. Show diff stats Hide diff stats

  1. +1 1  README.rdoc
  2. +59 59 examples/index.haml
  3. +68 89 examples/index.html
2  README.rdoc
Source Rendered
@@ -98,7 +98,7 @@ are {showcased online here}[http://mislav.uniqpath.com/will_paginate/].
98 98
99 99 More reading about pagination as design pattern:
100 100
101   -* {Pagination 101}[http://kurafire.net/log/archive/2007/06/22/pagination-101]
  101 +* {Pagination 101}[https://gist.github.com/622561]
102 102 * {Pagination gallery}[http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/]
103 103 * {Pagination on Yahoo Design Pattern Library}[http://developer.yahoo.com/ypatterns/parent.php?pattern=pagination]
104 104
118 examples/index.haml
... ... @@ -1,69 +1,69 @@
1 1 !!!
2 2 %html
3   -%head
4   - %title Samples of pagination styling for will_paginate
5   - %link{ :rel => 'stylesheet', :type => 'text/css', :href => 'pagination.css' }
6   - %style{ :type => 'text/css' }
7   - :sass
8   - html
9   - :margin 0
10   - :padding 0
11   - :background #999
12   - :font normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif
13   - body
14   - :margin 2em
15   - :padding 2em
16   - :border 2px solid gray
17   - :background white
18   - :color #222
19   - h1
20   - :font-size 2em
21   - :font-weight normal
22   - :margin 0 0 1em 0
23   - h2
24   - :font-size 1.4em
25   - :margin 1em 0 .5em 0
26   - pre
27   - :font-size 13px
28   - :font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace
  3 + %head
  4 + %title Samples of pagination styling for will_paginate
  5 + %link{ :rel => 'stylesheet', :type => 'text/css', :href => 'pagination.css' }
  6 + %style{ :type => 'text/css' }
  7 + :sass
  8 + html
  9 + :margin 0
  10 + :padding 0
  11 + :background #999
  12 + :font normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif
  13 + body
  14 + :margin 2em
  15 + :padding 2em
  16 + :border 2px solid gray
  17 + :background white
  18 + :color #222
  19 + h1
  20 + :font-size 2em
  21 + :font-weight normal
  22 + :margin 0 0 1em 0
  23 + h2
  24 + :font-size 1.4em
  25 + :margin 1em 0 .5em 0
  26 + pre
  27 + :font-size 13px
  28 + :font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace
29 29
30   -- 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>'
31   -- pagination_no_page_links = '<span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>'
  30 + - 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>'
  31 + - pagination_no_page_links = '<span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>'
32 32
33   -%body
34   - %h1 Samples of pagination styling for will_paginate
35   - %p
36   - Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
37   - There is a Sass version of it for all you sassy people.
38   - %p
39   - Read about good rules for pagination:
40   - %a{ :href => 'http://kurafire.net/log/archive/2007/06/22/pagination-101' } Pagination 101
41   - %p
42   - %em Warning:
43   - page links below don't lead anywhere (so don't click on them).
  33 + %body
  34 + %h1 Samples of pagination styling for will_paginate
  35 + %p
  36 + Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
  37 + There is a Sass version of it for all you sassy people.
  38 + %p
  39 + Read about good rules for pagination:
  40 + %a{ :href => 'https://gist.github.com/622561' } Pagination 101
  41 + %p
  42 + %em Warning:
  43 + page links below don't lead anywhere (so don't click on them).
44 44
45   - %h2 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
46   - %div= pagination
  45 + %h2 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
  46 + %div= pagination
47 47
48   - %h2 Digg.com
49   - .digg_pagination= pagination
  48 + %h2 Digg.com
  49 + .digg_pagination= pagination
50 50
51   - %h2 Digg-style, no page links
52   - .digg_pagination= pagination_no_page_links
53   - %p Code that renders this:
54   - %pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '&lt;').gsub('>', '&gt;')
  51 + %h2 Digg-style, no page links
  52 + .digg_pagination= pagination_no_page_links
  53 + %p Code that renders this:
  54 + %pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '&lt;').gsub('>', '&gt;')
55 55
56   - %h2 Digg-style, extra content
57   - .digg_pagination
58   - .page_info Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
59   - = pagination
60   - %p Code that renders this:
61   - %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;')
  56 + %h2 Digg-style, extra content
  57 + .digg_pagination
  58 + .page_info Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
  59 + = pagination
  60 + %p Code that renders this:
  61 + %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;')
62 62
63   - %h2 Apple.com store
64   - .apple_pagination= pagination
  63 + %h2 Apple.com store
  64 + .apple_pagination= pagination
65 65
66   - %h2 Flickr.com
67   - .flickr_pagination
68   - = pagination
69   - .page_info (118 photos)
  66 + %h2 Flickr.com
  67 + .flickr_pagination
  68 + = pagination
  69 + .page_info (118 photos)
157 examples/index.html
... ... @@ -1,92 +1,71 @@
1 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 2 <html>
3   -</html>
4   -<head>
5   - <title>Samples of pagination styling for will_paginate</title>
6   - <link href='pagination.css' rel='stylesheet' type='text/css' />
7   - <style type='text/css'>
8   - html {
9   - margin: 0;
10   - padding: 0;
11   - background: #999;
12   - font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
13   -
14   - body {
15   - margin: 2em;
16   - padding: 2em;
17   - border: 2px solid gray;
18   - background: white;
19   - color: #222; }
20   -
21   - h1 {
22   - font-size: 2em;
23   - font-weight: normal;
24   - margin: 0 0 1em 0; }
25   -
26   - h2 {
27   - font-size: 1.4em;
28   - margin: 1em 0 .5em 0; }
29   -
30   - pre {
31   - font-size: 13px;
32   - font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
33   - </style>
34   -</head>
35   -<body>
36   - <h1>Samples of pagination styling for will_paginate</h1>
37   - <p>
38   - Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
39   - There is a Sass version of it for all you sassy people.
40   - </p>
41   - <p>
42   - Read about good rules for pagination:
43   - <a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a>
44   - </p>
45   - <p>
46   - <em>Warning:</em>
47   - page links below don't lead anywhere (so don't click on them).
48   - </p>
49   - <h2>
50   - Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
51   - </h2>
52   - <div>
53   - <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>
54   - </div>
55   - <h2>Digg.com</h2>
56   - <div class='digg_pagination'>
57   - <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>
58   - </div>
59   - <h2>Digg-style, no page links</h2>
60   - <div class='digg_pagination'>
61   - <span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
62   - </div>
63   - <p>Code that renders this:</p>
64   - <pre>
65   - <code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code>
66   - </pre>
67   - <h2>Digg-style, extra content</h2>
68   - <div class='digg_pagination'>
69   - <div class='page_info'>
70   - Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
  3 + <head>
  4 + <title>Samples of pagination styling for will_paginate</title>
  5 + <link href='pagination.css' rel='stylesheet' type='text/css' />
  6 + <style type='text/css'>
  7 + html {
  8 + margin: 0;
  9 + padding: 0;
  10 + background: #999999;
  11 + font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
  12 +
  13 + body {
  14 + margin: 2em;
  15 + padding: 2em;
  16 + border: 2px solid gray;
  17 + background: white;
  18 + color: #222222; }
  19 +
  20 + h1 {
  21 + font-size: 2em;
  22 + font-weight: normal;
  23 + margin: 0 0 1em 0; }
  24 +
  25 + h2 {
  26 + font-size: 1.4em;
  27 + margin: 1em 0 0.5em 0; }
  28 +
  29 + pre {
  30 + font-size: 13px;
  31 + font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
  32 + </style>
  33 + </head>
  34 + <body>
  35 + <h1>Samples of pagination styling for will_paginate</h1>
  36 + <p>
  37 + Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
  38 + There is a Sass version of it for all you sassy people.
  39 + </p>
  40 + <p>
  41 + Read about good rules for pagination:
  42 + <a href='https://gist.github.com/622561'>Pagination 101</a>
  43 + </p>
  44 + <p>
  45 + <em>Warning:</em>
  46 + page links below don't lead anywhere (so don't click on them).
  47 + </p>
  48 + <h2>Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span></h2>
  49 + <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>
  50 + <h2>Digg.com</h2>
  51 + <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>
  52 + <h2>Digg-style, no page links</h2>
  53 + <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>
  54 + <p>Code that renders this:</p>
  55 + <pre><code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code></pre>
  56 + <h2>Digg-style, extra content</h2>
  57 + <div class='digg_pagination'>
  58 + <div class='page_info'>Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total</div>
  59 + <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>
  60 + </div>
  61 + <p>Code that renders this:</p>
  62 + <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>
  63 + <h2>Apple.com store</h2>
  64 + <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>
  65 + <h2>Flickr.com</h2>
  66 + <div class='flickr_pagination'>
  67 + <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>
  68 + <div class='page_info'>(118 photos)</div>
71 69 </div>
72   - <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>
73   - </div>
74   - <p>Code that renders this:</p>
75   - <pre>
76   - <code>&lt;div class="digg_pagination"&gt;
77   - &lt;div clas="page_info"&gt;
78   - &lt;%= page_entries_info @posts %&gt;
79   - &lt;/div&gt;
80   - &lt;%= will_paginate @posts, :container =&gt; false %&gt;
81   - &lt;/div&gt;</code>
82   - </pre>
83   - <h2>Apple.com store</h2>
84   - <div class='apple_pagination'>
85   - <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>
86   - </div>
87   - <h2>Flickr.com</h2>
88   - <div class='flickr_pagination'>
89   - <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>
90   - <div class='page_info'>(118 photos)</div>
91   - </div>
92   -</body>
  70 + </body>
  71 +</html>

0 comments on commit 09c91df

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