Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

move what were previously will_paginate examples to the project page

  • Loading branch information...
commit f6fd2779ace1b1e9f1cf390e254ef08423954bb1 1 parent f4a38ba
Mislav Marohnić authored January 09, 2009
BIN  apple-circle.gif
69  index.haml
... ...
@@ -0,0 +1,69 @@
  1
+!!!
  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 4em
  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
+
  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
+
  33
+%body
  34
+  %h1 Samples of pagination styling for will_paginate
  35
+  %p
  36
+    Find these styles in <b>"gh-pages"</b> branch of the will_paginate repository.
  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).
  44
+    
  45
+  %h2 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
  46
+  %div= pagination
  47
+  
  48
+  %h2 Digg.com
  49
+  .digg_pagination= pagination
  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;')
  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;')
  62
+  
  63
+  %h2 Apple.com store
  64
+  .apple_pagination= pagination
  65
+  
  66
+  %h2 Flickr.com
  67
+  .flickr_pagination
  68
+    = pagination
  69
+    .page_info (118 photos)
81  index.html
... ...
@@ -1,11 +1,70 @@
1  
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2  
-<html>
3  
-  <head>
4  
-    <title>will_paginate library</title>
5  
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
6  
-  </head>
7  
-  <body>
8  
-    <h1>will_paginate library</h1>
9  
-    <p>This is the future website for will_paginate.</p>
10  
-  </body>
11  
-</html>
  1
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2
+<html></html>
  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: #999;
  11
+      font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
  12
+    
  13
+    body {
  14
+      margin: 4em;
  15
+      padding: 2em;
  16
+      border: 2px solid gray;
  17
+      background: white;
  18
+      color: #222; }
  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 .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>"gh-pages"</b> branch of the <i>will_paginate</i> repository.
  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='http://kurafire.net/log/archive/2007/06/22/pagination-101'>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>
  69
+  </div>
  70
+</body>
90  pagination.css
... ...
@@ -0,0 +1,90 @@
  1
+.digg_pagination {
  2
+  background: white;
  3
+  /* self-clearing method: */ }
  4
+  .digg_pagination a, .digg_pagination span {
  5
+    padding: .2em .5em;
  6
+    display: block;
  7
+    float: left;
  8
+    margin-right: 1px; }
  9
+  .digg_pagination span.disabled {
  10
+    color: #999;
  11
+    border: 1px solid #DDD; }
  12
+  .digg_pagination span.current {
  13
+    font-weight: bold;
  14
+    background: #2E6AB1;
  15
+    color: white;
  16
+    border: 1px solid #2E6AB1; }
  17
+  .digg_pagination a {
  18
+    text-decoration: none;
  19
+    color: #105CB6;
  20
+    border: 1px solid #9AAFE5; }
  21
+    .digg_pagination a:hover, .digg_pagination a:focus {
  22
+      color: #003;
  23
+      border-color: #003; }
  24
+  .digg_pagination .page_info {
  25
+    background: #2E6AB1;
  26
+    color: white;
  27
+    padding: .4em .6em;
  28
+    width: 22em;
  29
+    margin-bottom: .3em;
  30
+    text-align: center; }
  31
+    .digg_pagination .page_info b {
  32
+      color: #003;
  33
+      background: #6aa6ed;
  34
+      padding: .1em .25em; }
  35
+  .digg_pagination:after {
  36
+    content: ".";
  37
+    display: block;
  38
+    height: 0;
  39
+    clear: both;
  40
+    visibility: hidden; }
  41
+  * html .digg_pagination {
  42
+    height: 1%; }
  43
+  *:first-child+html .digg_pagination {
  44
+    overflow: hidden; }
  45
+
  46
+.apple_pagination {
  47
+  background: #F1F1F1;
  48
+  border: 1px solid #E5E5E5;
  49
+  text-align: center;
  50
+  padding: 1em; }
  51
+  .apple_pagination a, .apple_pagination span {
  52
+    padding: .2em .3em; }
  53
+  .apple_pagination span.disabled {
  54
+    color: #AAA; }
  55
+  .apple_pagination span.current {
  56
+    font-weight: bold;
  57
+    background: transparent url(apple-circle.gif) no-repeat 50% 50%; }
  58
+  .apple_pagination a {
  59
+    text-decoration: none;
  60
+    color: black; }
  61
+    .apple_pagination a:hover, .apple_pagination a:focus {
  62
+      text-decoration: underline; }
  63
+
  64
+.flickr_pagination {
  65
+  text-align: center;
  66
+  padding: .3em; }
  67
+  .flickr_pagination a, .flickr_pagination span {
  68
+    padding: .2em .5em; }
  69
+  .flickr_pagination span.disabled {
  70
+    color: #AAA; }
  71
+  .flickr_pagination span.current {
  72
+    font-weight: bold;
  73
+    color: #FF0084; }
  74
+  .flickr_pagination a {
  75
+    border: 1px solid #DDDDDD;
  76
+    color: #0063DC;
  77
+    text-decoration: none; }
  78
+    .flickr_pagination a:hover, .flickr_pagination a:focus {
  79
+      border-color: #003366;
  80
+      background: #0063DC;
  81
+      color: white; }
  82
+  .flickr_pagination .page_info {
  83
+    color: #aaa;
  84
+    padding-top: .8em; }
  85
+  .flickr_pagination .prev_page, .flickr_pagination .next_page {
  86
+    border-width: 2px; }
  87
+  .flickr_pagination .prev_page {
  88
+    margin-right: 1em; }
  89
+  .flickr_pagination .next_page {
  90
+    margin-left: 1em; }
91  pagination.sass
... ...
@@ -0,0 +1,91 @@
  1
+.digg_pagination
  2
+  :background white
  3
+  a, span
  4
+    :padding .2em .5em
  5
+    :display block
  6
+    :float left
  7
+    :margin-right 1px
  8
+  span.disabled
  9
+    :color #999
  10
+    :border 1px solid #DDD
  11
+  span.current
  12
+    :font-weight bold
  13
+    :background #2E6AB1
  14
+    :color white
  15
+    :border 1px solid #2E6AB1
  16
+  a
  17
+    :text-decoration none
  18
+    :color #105CB6
  19
+    :border 1px solid #9AAFE5
  20
+    &:hover, &:focus
  21
+      :color #003
  22
+      :border-color #003
  23
+  .page_info
  24
+    :background #2E6AB1
  25
+    :color white
  26
+    :padding .4em .6em
  27
+    :width 22em
  28
+    :margin-bottom .3em
  29
+    :text-align center
  30
+    b
  31
+      :color #003
  32
+      :background = #2E6AB1 + 60
  33
+      :padding .1em .25em
  34
+    
  35
+  /* self-clearing method:
  36
+  &:after
  37
+    :content "."
  38
+    :display block
  39
+    :height 0
  40
+    :clear both
  41
+    :visibility hidden
  42
+  * html &
  43
+    :height 1%
  44
+  *:first-child+html &
  45
+    :overflow hidden
  46
+
  47
+.apple_pagination
  48
+  :background #F1F1F1
  49
+  :border 1px solid #E5E5E5
  50
+  :text-align center
  51
+  :padding 1em
  52
+  a, span
  53
+    :padding .2em .3em
  54
+  span.disabled
  55
+    :color #AAA
  56
+  span.current
  57
+    :font-weight bold
  58
+    :background transparent url(apple-circle.gif) no-repeat 50% 50%
  59
+  a
  60
+    :text-decoration none
  61
+    :color black
  62
+    &:hover, &:focus
  63
+      :text-decoration underline
  64
+
  65
+.flickr_pagination
  66
+  :text-align center
  67
+  :padding .3em
  68
+  a, span
  69
+    :padding .2em .5em
  70
+  span.disabled
  71
+    :color #AAA
  72
+  span.current
  73
+    :font-weight bold
  74
+    :color #FF0084
  75
+  a
  76
+    :border 1px solid #DDDDDD
  77
+    :color #0063DC
  78
+    :text-decoration none
  79
+    &:hover, &:focus
  80
+      :border-color #003366
  81
+      :background #0063DC
  82
+      :color white
  83
+  .page_info
  84
+    :color #aaa
  85
+    :padding-top .8em
  86
+  .prev_page, .next_page
  87
+    :border-width 2px
  88
+  .prev_page
  89
+    :margin-right 1em
  90
+  .next_page
  91
+    :margin-left 1em

0 notes on commit f6fd277

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