Permalink
Browse files

WIP

  • Loading branch information...
1 parent 0dc195c commit 5109461d8c8e11100e577560471414d582028c28 @benjreinhart benjreinhart committed Jun 18, 2014
View
@@ -42,6 +42,9 @@ bundle:
compile-stylus:
@$(STYLUS) < public/stylus/main.styl > public/css/main.css
+watch-stylus:
+ @$(STYLUS) --watch public/stylus --out public/css
+
test: build-for-test
@$(MOCHA) --reporter spec --recursive --colors --harmony-generators
@@ -0,0 +1,24 @@
+/** @jsx React.DOM */
+
+module.exports = React.createClass({
+ render: function() {
+ return (
+ <section className="pagination">
+ <ul className="pagination-main">
+ <li><a href="">&larr; prev</a></li>
+ <li className="pages">
+ <ul>
+ <li><a href="">1</a></li>
+ <li>2</li>
+ <li><a href="">3</a></li>
+ <li>. . .</li>
+ <li><a href="">166</a></li>
+ <li><a href="">167</a></li>
+ </ul>
+ </li>
+ <li><a href="">next &rarr;</a></li>
+ </ul>
+ </section>
+ );
+ }
+});
@@ -4,11 +4,13 @@ module.exports = React.createClass({
render: function() {
var props = this.props
, Header = props.Header
+ , Pagination = props.Pagination
, Result = props.Result
, results = props.results;
return (
<section className="results">
<Header results={results} />
+ <Pagination results={results} />
<ul>
{
results.results.map(function(result){
@@ -1,4 +1,5 @@
var Backbone = require('backbone')
+ , Pagination = require('./react/pagination')
, Result = require('./react/result')
, Results = require('./react/results')
, ResultHeader = require('./react/result_header');
@@ -17,6 +18,7 @@ module.exports = Backbone.View.extend({
var props = {
Header: ResultHeader,
+ Pagination: Pagination,
Result: Result,
results: results
};
View
@@ -2087,153 +2087,6 @@ fieldset[disabled] .form-control + .input-icon,
.pager li > span span + [class*="fui-"] {
margin-left: 8px;
}
-.pagination {
- position: relative;
-}
-.pagination ul {
- background: #d6dbdf;
- color: #ffffff;
- padding: 0;
- margin: 0;
- display: inline-block;
- border-radius: 6px;
-}
-.pagination ul li {
- display: inline-block;
- margin-right: -3px;
- vertical-align: middle;
-}
-.pagination ul li:first-child {
- border-radius: 6px 0 0 6px;
-}
-.pagination ul li:first-child.previous + li > a,
-.pagination ul li:first-child.previous + li > span {
- border-left-width: 5px;
-}
-.pagination ul li:last-child {
- border-radius: 0 6px 6px 0;
- margin-right: 0;
-}
-.pagination ul li.previous > a,
-.pagination ul li.next > a,
-.pagination ul li.previous > span,
-.pagination ul li.next > span {
- background: transparent;
- border: none;
- border-right: 2px solid #e4e7ea;
- font-size: 16px;
- margin: 0 9px 0 0;
- padding: 12px 17px;
- border-radius: 6px 0 0 6px;
-}
-.pagination ul li.previous > a,
-.pagination ul li.next > a,
-.pagination ul li.previous > span,
-.pagination ul li.next > span,
-.pagination ul li.previous > a:hover,
-.pagination ul li.next > a:hover,
-.pagination ul li.previous > span:hover,
-.pagination ul li.next > span:hover,
-.pagination ul li.previous > a:focus,
-.pagination ul li.next > a:focus,
-.pagination ul li.previous > span:focus,
-.pagination ul li.next > span:focus {
- border-color: #e4e7ea !important;
-}
-@media (max-width: 480px) {
- .pagination ul li.previous > a,
- .pagination ul li.next > a,
- .pagination ul li.previous > span,
- .pagination ul li.next > span {
- margin-right: 0;
- }
-}
-.pagination ul li.next {
- margin-left: 9px;
-}
-.pagination ul li.next > a,
-.pagination ul li.next > span {
- border-left: 2px solid #e4e7ea;
- border-right: none;
- margin: 0;
- border-radius: 0 6px 6px 0;
-}
-.pagination ul li.active > a,
-.pagination ul li.active > span {
- background-color: #ffffff;
- border-color: #ffffff;
- border-width: 2px !important;
- color: #d6dbdf;
- margin: 10px 5px 9px;
-}
-.pagination ul li.active > a:hover,
-.pagination ul li.active > span:hover,
-.pagination ul li.active > a:focus,
-.pagination ul li.active > span:focus {
- background-color: #ffffff;
- border-color: #ffffff;
- color: #d6dbdf;
-}
-.pagination ul li.active.previous,
-.pagination ul li.active.next {
- border-color: #e4e7ea;
-}
-.pagination ul li.active.previous {
- margin-right: 6px;
-}
-.pagination ul li > a,
-.pagination ul li > span {
- display: inline-block;
- background: #ffffff;
- border: 5px solid #d6dbdf;
- color: #ffffff;
- font-size: 14px;
- line-height: 16px;
- margin: 7px 2px 6px;
- min-width: 0;
- min-height: 16px;
- padding: 0 4px;
- border-radius: 50px;
- -webkit-transition: background .2s ease-out, border-color 0s ease-out, color .2s ease-out;
- transition: background .2s ease-out, border-color 0s ease-out, color .2s ease-out;
-}
-.pagination ul li > a:hover,
-.pagination ul li > span:hover,
-.pagination ul li > a:focus,
-.pagination ul li > span:focus {
- background-color: #1abc9c;
- border-color: #1abc9c;
- color: #ffffff;
- -webkit-transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
- transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
-}
-.pagination ul li > a:active,
-.pagination ul li > span:active {
- background-color: #16a085;
- border-color: #16a085;
-}
-.pagination > .btn.previous,
-.pagination > .btn.next {
- margin-right: 8px;
- font-size: 14px;
- line-height: 1.429;
- padding-left: 23px;
- padding-right: 23px;
-}
-.pagination > .btn.previous [class*="fui-"],
-.pagination > .btn.next [class*="fui-"] {
- font-size: 16px;
- margin-left: -2px;
- margin-top: -2px;
-}
-.pagination > .btn.next {
- margin-left: 8px;
- margin-right: 0;
-}
-.pagination > .btn.next [class*="fui-"] {
- margin-right: -2px;
- margin-left: 4px;
-}
.tooltip {
font-size: 14px;
line-height: 1.286;
View
@@ -10,10 +10,12 @@
metalic-gray = #f5f8fa
border-gray = #e1e8ed
+border-gray-dark = #999
main-font-color = #354A55
dark-red = #C0392B
light-red = #E74C3C
-
+light-blue = #3498DB
+dark-blue = #2980B9
/**
* Others
@@ -94,12 +96,12 @@ ul
padding: 0
a, a:visited, a:active
- color: dark-red
+ color: dark-blue
a:hover
transition: .25s linear
- color: light-red
- border-bottom: 1px dotted light-red
+ color: light-blue
+ border-bottom: 1px dotted light-blue
/**
@@ -219,7 +221,6 @@ form
.results
max-width: 600px
margin: 0 auto
- // font-weight: 300
ul
list-style: none
@@ -239,8 +240,9 @@ form
border-top-left-radius: 3px
h5
- font-weight: 300
+ display: inline-block
font-size: 20px
+ font-weight: 300
.date, .location
text-align: center
@@ -256,6 +258,60 @@ form
font-weight: normal
font-size: 16px
+ .pagination
+ background-color: white
+ border-left: 1px solid border-gray
+ border-right: 1px solid border-gray
+ height: 40px
+ padding: 0
+
+ .pagination-main, .pages ul
+ list-style: none
+
+ .pagination-main
+ width: 600px
+
+ .pagination-main li, .pages li
+ display: inline-block
+ border: none
+ border-bottom: 1px solid border-gray
+ font-size: 14px
+ padding: 0
+ text-align: center
+
+ .pagination-main li
+ width: 74px
+ line-height: 40px
+
+ .pagination-main li a
+ display: block
+
+ .pagination-main li a:hover
+ text-decoration: none
+ border-bottom: none
+
+ .pagination-main .pages
+ display: inline-block
+ width: 450px
+ border-left: 1px solid border-gray
+ border-right: 1px solid border-gray
+
+ li
+ border: none
+ width: 35px
+ line-height: 40px
+ margin: 0 2px
+
+ a
+ line-height: 20px
+ border: 1px solid border-gray
+
+ a:hover
+ border: 1px solid border-gray-dark
+
+
+
+
/**

0 comments on commit 5109461

Please sign in to comment.