Permalink
Browse files

update markup, styles

  • Loading branch information...
1 parent de7b479 commit 4a1911136205605472251bc440a47c4e9fc007a6 @mislav mislav committed Jul 28, 2011
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
@@ -0,0 +1 @@
+.sass-cache
View
@@ -20,45 +20,72 @@
: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
%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 Unstyled pagination
+ .unstyled_pagination= pagination
+
+ %p That's horrible. Don't leave your pagination looking like this.
%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;')
+ %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
@@ -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,21 +21,36 @@
font-size: 2em;
font-weight: normal;
margin: 0 0 1em 0; }
+ h1 a {
+ color: inherit; }
h2 {
font-size: 1.4em;
margin: 1em 0 0.5em 0; }
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
@@ -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; }
Oops, something went wrong.

0 comments on commit 4a19111

Please sign in to comment.