Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

update markup, styles

  • Loading branch information...
commit 4a1911136205605472251bc440a47c4e9fc007a6 1 parent de7b479
@mislav mislav authored
Showing with 210 additions and 134 deletions.
  1. +1 −0  .gitignore
  2. +36 −9 index.haml
  3. +35 −14 index.html
  4. +54 −40 pagination.css
  5. +84 −71 pagination.sass
View
1  .gitignore
@@ -0,0 +1 @@
+.sass-cache
View
45 index.haml
@@ -20,21 +20,35 @@
:font-size 2em
:font-weight normal
:margin 0 0 1em 0
+ a
+ color: inherit
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
+ :background #eee
+ :padding .5em 1em
+ :max-width 40em
+ code
+ display: block
-- 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>'
+ a
+ color: darkblue
+
+ h2
+ margin-top: 2.5em
+ div[class$="_pagination"]
+ margin: 1.5em 0
+
+- pagination = '<span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</a>'
+- pagination_no_page_links = '<span class="disabled previous_page">&#8592; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &#8594;</a>'
%body
- %h1 Samples of pagination styling for will_paginate
+ %h1 Samples of pagination styles for <a href="https://github.com/mislav/will_paginate">will_paginate</a>
%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.
+ Download these styles: <a href="pagination.css">CSS</a>, <a href="pagination.sass">Sass</a>
%p
Read about good rules for pagination:
%a{ :href => 'https://gist.github.com/622561' } Pagination 101
@@ -42,8 +56,10 @@
%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 Unstyled pagination
+ .unstyled_pagination= pagination
+
+ %p That's horrible. Don't leave your pagination looking like this.
%h2 Digg.com
.digg_pagination= pagination
@@ -51,14 +67,25 @@
%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;')
+ %pre
+ %code
+ :escaped
+ <%= will_paginate @posts, :page_links => false %>
%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;')
+ %pre
+ %code
+ :escaped
+ <div class="digg_pagination">
+ <div clas="page_info">
+ <%= page_entries_info @posts %>
+ </div>
+ <%= will_paginate @posts, :container => false %>
+ </div>
%h2 Apple.com store
.apple_pagination= pagination
View
49 index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
<html></html>
<head>
<title>Samples of pagination styling for will_paginate</title>
- <link href='pagination.css' rel='stylesheet' type='text/css' />
+ <link href='pagination.css' rel='stylesheet' type='text/css'>
<style type='text/css'>
html {
margin: 0;
@@ -21,6 +21,8 @@
font-size: 2em;
font-weight: normal;
margin: 0 0 1em 0; }
+ h1 a {
+ color: inherit; }
h2 {
font-size: 1.4em;
@@ -28,14 +30,27 @@
pre {
font-size: 13px;
- font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
+ font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace;
+ background: #eeeeee;
+ padding: 0.5em 1em;
+ max-width: 40em; }
+ pre code {
+ display: block; }
+
+ a {
+ color: darkblue; }
+
+ h2 {
+ margin-top: 2.5em; }
+
+ div[class$="_pagination"] {
+ margin: 1.5em 0; }
</style>
</head>
<body>
- <h1>Samples of pagination styling for will_paginate</h1>
+ <h1>Samples of pagination styles for <a href="https://github.com/mislav/will_paginate">will_paginate</a></h1>
<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.
+ Download these styles: <a href="pagination.css">CSS</a>, <a href="pagination.sass">Sass</a>
</p>
<p>
Read about good rules for pagination:
@@ -45,26 +60,32 @@
<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>Unstyled pagination</h2>
+ <div class='unstyled_pagination'><span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</a></div>
+ <p>That's horrible. Don't leave your pagination looking like this.</p>
<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>
+ <div class='digg_pagination'><span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</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>
+ <div class='digg_pagination'><span class="disabled prev_page">&#8592; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &#8594;</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>
+ <span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</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>
+ <pre><code>&lt;div class=&quot;digg_pagination&quot;&gt;
+ &lt;div clas=&quot;page_info&quot;&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>
+ <div class='apple_pagination'><span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</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>
+ <span class="disabled previous_page">&#8592; Previous</span> <em class="current">1</em> <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 &#8594;</a>
<div class='page_info'>(118 photos)</div>
</div>
</body>
View
94 pagination.css
@@ -1,37 +1,39 @@
.digg_pagination {
background: white;
+ cursor: default;
/* self-clearing method: */ }
- .digg_pagination a, .digg_pagination span {
- padding: .2em .5em;
+ .digg_pagination a, .digg_pagination span, .digg_pagination em {
+ padding: 0.2em 0.5em;
display: block;
float: left;
margin-right: 1px; }
- .digg_pagination span.disabled {
- color: #999;
- border: 1px solid #DDD; }
- .digg_pagination span.current {
+ .digg_pagination .disabled {
+ color: #999999;
+ border: 1px solid #dddddd; }
+ .digg_pagination .current {
+ font-style: normal;
font-weight: bold;
- background: #2E6AB1;
+ background: #2e6ab1;
color: white;
- border: 1px solid #2E6AB1; }
+ border: 1px solid #2e6ab1; }
.digg_pagination a {
text-decoration: none;
- color: #105CB6;
- border: 1px solid #9AAFE5; }
+ color: #105cb6;
+ border: 1px solid #9aafe5; }
.digg_pagination a:hover, .digg_pagination a:focus {
- color: #003;
- border-color: #003; }
+ color: #000033;
+ border-color: #000033; }
.digg_pagination .page_info {
- background: #2E6AB1;
+ background: #2e6ab1;
color: white;
- padding: .4em .6em;
+ padding: 0.4em 0.6em;
width: 22em;
- margin-bottom: .3em;
+ margin-bottom: 0.3em;
text-align: center; }
.digg_pagination .page_info b {
- color: #003;
+ color: #000033;
background: #6aa6ed;
- padding: .1em .25em; }
+ padding: 0.1em 0.25em; }
.digg_pagination:after {
content: ".";
display: block;
@@ -40,21 +42,31 @@
visibility: hidden; }
* html .digg_pagination {
height: 1%; }
- *:first-child+html .digg_pagination {
+ *:first-child + html .digg_pagination {
overflow: hidden; }
.apple_pagination {
- background: #F1F1F1;
- border: 1px solid #E5E5E5;
+ background: #f1f1f1;
+ border: 1px solid #e5e5e5;
text-align: center;
- padding: 1em; }
+ padding: 1em;
+ cursor: default; }
.apple_pagination a, .apple_pagination span {
- padding: .2em .3em; }
- .apple_pagination span.disabled {
- color: #AAA; }
- .apple_pagination span.current {
+ padding: 0.2em 0.3em; }
+ .apple_pagination .disabled {
+ color: #aaaaaa; }
+ .apple_pagination .current {
+ font-style: normal;
font-weight: bold;
- background: transparent url(apple-circle.gif) no-repeat 50% 50%; }
+ background-color: #bebebe;
+ display: inline-block;
+ width: 1.4em;
+ height: 1.4em;
+ line-height: 1.5;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
.apple_pagination a {
text-decoration: none;
color: black; }
@@ -63,28 +75,30 @@
.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 {
+ padding: 0.3em;
+ cursor: default; }
+ .flickr_pagination a, .flickr_pagination span, .flickr_pagination em {
+ padding: 0.2em 0.5em; }
+ .flickr_pagination .disabled {
+ color: #aaaaaa; }
+ .flickr_pagination .current {
+ font-style: normal;
font-weight: bold;
- color: #FF0084; }
+ color: #ff0084; }
.flickr_pagination a {
- border: 1px solid #DDDDDD;
- color: #0063DC;
+ border: 1px solid #dddddd;
+ color: #0063dc;
text-decoration: none; }
.flickr_pagination a:hover, .flickr_pagination a:focus {
border-color: #003366;
- background: #0063DC;
+ background: #0063dc;
color: white; }
.flickr_pagination .page_info {
- color: #aaa;
- padding-top: .8em; }
- .flickr_pagination .prev_page, .flickr_pagination .next_page {
+ color: #aaaaaa;
+ padding-top: 0.8em; }
+ .flickr_pagination .previous_page, .flickr_pagination .next_page {
border-width: 2px; }
- .flickr_pagination .prev_page {
+ .flickr_pagination .previous_page {
margin-right: 1em; }
.flickr_pagination .next_page {
margin-left: 1em; }
View
155 pagination.sass
@@ -1,91 +1,104 @@
.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
+ background: white
+ cursor: default
+ a, span, em
+ padding: 0.2em 0.5em
+ display: block
+ float: left
+ margin-right: 1px
+ .disabled
+ color: #999999
+ border: 1px solid #dddddd
+ .current
+ font-style: normal
+ font-weight: bold
+ background: #2e6ab1
+ color: white
+ border: 1px solid #2e6ab1
a
- :text-decoration none
- :color #105CB6
- :border 1px solid #9AAFE5
+ text-decoration: none
+ color: #105cb6
+ border: 1px solid #9aafe5
&:hover, &:focus
- :color #003
- :border-color #003
+ color: #000033
+ border-color: #000033
.page_info
- :background #2E6AB1
- :color white
- :padding .4em .6em
- :width 22em
- :margin-bottom .3em
- :text-align center
+ background: #2e6ab1
+ color: white
+ padding: 0.4em 0.6em
+ width: 22em
+ margin-bottom: 0.3em
+ text-align: center
b
- :color #003
- :background = #2E6AB1 + 60
- :padding .1em .25em
-
+ color: #000033
+ background: #2e6ab1 + 60
+ padding: 0.1em 0.25em
/* self-clearing method:
&:after
- :content "."
- :display block
- :height 0
- :clear both
- :visibility hidden
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
* html &
- :height 1%
+ height: 1%
*:first-child+html &
- :overflow hidden
+ overflow: hidden
.apple_pagination
- :background #F1F1F1
- :border 1px solid #E5E5E5
- :text-align center
- :padding 1em
+ background: #f1f1f1
+ border: 1px solid #e5e5e5
+ text-align: center
+ padding: 1em
+ cursor: default
a, span
- :padding .2em .3em
- span.disabled
- :color #AAA
- span.current
- :font-weight bold
- :background transparent url(apple-circle.gif) no-repeat 50% 50%
+ padding: 0.2em 0.3em
+ .disabled
+ color: #aaaaaa
+ .current
+ font-style: normal
+ font-weight: bold
+ background-color: darken(#f1f1f1, 20)
+ display: inline-block
+ width: 1.4em
+ height: 1.4em
+ line-height: 1.5
+ -moz-border-radius: 1em
+ -webkit-border-radius: 1em
+ border-radius: 1em
+ text-shadow: rgba(white, .8) 1px 1px 1px
a
- :text-decoration none
- :color black
+ text-decoration: none
+ color: black
&:hover, &:focus
- :text-decoration underline
+ 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
+ text-align: center
+ padding: 0.3em
+ cursor: default
+ a, span, em
+ padding: 0.2em 0.5em
+ .disabled
+ color: #aaaaaa
+ .current
+ font-style: normal
+ font-weight: bold
+ color: #ff0084
a
- :border 1px solid #DDDDDD
- :color #0063DC
- :text-decoration none
+ border: 1px solid #dddddd
+ color: #0063dc
+ text-decoration: none
&:hover, &:focus
- :border-color #003366
- :background #0063DC
- :color white
+ 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
+ color: #aaaaaa
+ padding-top: 0.8em
+ .previous_page, .next_page
+ border-width: 2px
+ .previous_page
+ margin-right: 1em
.next_page
- :margin-left 1em
+ margin-left: 1em
Please sign in to comment.
Something went wrong with that request. Please try again.