carte-server 0.0.26 → 0.0.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 62dd6b63cb3dc76b0ec49dc9eb0e1218947c3d9d
-  data.tar.gz: cfc482d9f3834d61ad601a2b341b1ae5f58c19f0
+  metadata.gz: d5d689a6bbbfaebcc4b2317306ece56bc01860d9
+  data.tar.gz: 62c6865bd68b8fba5ab18230aed5a11f917b5cb5
 SHA512:
-  metadata.gz: a35116bcb9945a1fe83a566db288c5189eb85f9ce71047ef70ad73aa3f1622d21d596bc2b609e24e4dbcb59a5fc7792c6d14928d8f7f4a75f613af00826cf57d
-  data.tar.gz: e38cc8e0f86b9f68d88f44b0b2bbea58e6cb7334538c8df289e3397df6a3a7cbb54aa9cccb714292b2ad02ce61d133ccee7c89f4f4762f3e7ff6be703b7710c3
+  metadata.gz: 4822231b9c7e7bd40fe3a55278bec3c6ff5df2d0600315ecffb799979db1b078625585cdf55ea7113ce57cef67113ba1b0aafc2857f56af2f89e0857dc24eb1d
+  data.tar.gz: ad53d1b291851888f3f41951f18575c2d83cb473b048a45ed1a45c5d8f0618185eac927584ea591d362917c4610d0af94e66be46dd9617e12aa0565d8f8cce3e

data/Gemfile.lock

@@ -10,7 +10,6 @@ PATH
       mongoid_auto_increment_id (= 0.6.5)
       pry
       redcarpet
-      rspec
       sinatra
       sinatra-contrib
       will_paginate_mongoid
@@ -117,4 +116,5 @@ DEPENDENCIES
   carte-server!
   httparty
   rake (~> 10.0)
+  rspec
   shotgun

data/README.md

@@ -33,13 +33,6 @@ Japanese introduction is [here](http://tily.tumblr.com/post/117678137942/carte).
 
 [![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy?template=https://github.com/tily/carte-sandbox)
 
-```
-## change title and description
-$ vi config.json
-## replace brand icon
-$ cp ~/Desktop/icon.png public/images/icon.png 
-```
-
 **Docker**
 
 ```bash

data/carte.gemspec

@@ -21,7 +21,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "bundler", "~> 1.7"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "shotgun"
-  #spec.add_development_dependency "rspec"
+  spec.add_development_dependency "rspec"
   spec.add_development_dependency "httparty"
   
   spec.add_dependency "sinatra"
@@ -35,5 +35,4 @@ Gem::Specification.new do |spec|
   spec.add_dependency "mongoid-geospatial"
   spec.add_dependency "redcarpet"
   spec.add_dependency "pry"
-  spec.add_dependency "rspec"
 end

data/gulpfile.coffee

@@ -1,3 +1,3 @@
 gulp = require 'gulp'
-Carte = require './lib/carte'
-new Carte().install(gulp, __dirname + '/config.json')
+Tasks = require('./lib/carte').Tasks
+(new Tasks).install(gulp, __dirname + '/config.json')

data/lib/carte.coffee

@@ -1,78 +1,9 @@
-fs = require 'fs-extra'
-path = require 'path'
-gulp = require 'gulp'
-gulpUtil = require 'gulp-util'
-gulpIf = require 'gulp-if'
-sourceStream = require 'vinyl-source-stream'
-browserify = require 'browserify'
-watchify = require 'watchify'
-uglify = require 'gulp-uglify'
-streamify = require 'gulp-streamify'
-coffeeReactify = require 'coffee-reactify'
-browserifyCss = require 'browserify-css'
-_ = require 'lodash'
-jade = require 'gulp-jade'
-rename = require 'gulp-rename'
-
-module.exports = class Carte
-  watching: false
-
-  install: (gulp, config)->
-    custom = require(config)
-    fs.writeFileSync(__dirname + '/carte/shared/custom.json', JSON.stringify(custom))
-
-    gulp.task 'watching', => @watching = true
-    gulp.task 'build', ['build:html', 'build:script']
-    gulp.task 'watch', ['watching', 'build:html', 'build:script']
-
-    gulp.task 'build:html', =>
-      _config = require('./carte/client/config')
-      gulp.src(__dirname + '/carte/client.jade')
-        .pipe jade(locals: {config: _config}, pretty: true)
-        .pipe rename(_config.html_path)
-        .pipe gulp.dest(_config.root_dir)
-
-    gulp.task 'build:script', =>
-      @buildScript config: config
-
-  buildScript: (options)->
-    config = require(options.config)
-    fs.writeFileSync(__dirname + '/carte/shared/custom.json', JSON.stringify(config))
-    dir = config.root_dir
-    file = path.basename config.script_path
-    browserify = browserify
-      cache: {}
-      packageCache: {}
-      fullPaths: true
-      entries: [__dirname + '/carte/client.coffee']
-      extensions: ['.coffee', '.js', '.cjsx', '.css']
-    browserify
-      .transform coffeeReactify
-      .transform browserifyCss,
-        rootDir: 'public'
-        processRelativeUrl: (relativeUrl)->
-          stripQueryStringAndHashFromPath = (url)-> url.split('?')[0].split('#')[0]
-          rootDir = path.resolve(process.cwd(), 'public')
-          relativePath = stripQueryStringAndHashFromPath(relativeUrl)
-          queryStringAndHash = relativeUrl.substring(relativePath.length)
-          prefix = '../node_modules/'
-          if (_.startsWith(relativePath, prefix))
-            vendorPath = 'vendor/' + relativePath.substring(prefix.length)
-            source = path.join(rootDir, relativePath)
-            target = path.join(rootDir, vendorPath)
-            gulpUtil.log('Copying file from ' + JSON.stringify(source) + ' to ' + JSON.stringify(target))
-            fs.copySync(source, target)
-            return vendorPath + queryStringAndHash
-          relativeUrl
-    if @watching
-      watchified = watchify(browserify)
-      watchified.on 'update', ()=> @bundle(browserify, dir, file)
-      watchified.on 'log', gulpUtil.log
-    @bundle(browserify, dir, file)
-  
-  bundle: (browserify, dir, file)->
-    browserify
-      .bundle()
-      .pipe sourceStream file
-      .pipe gulpIf(!@watching, streamify(uglify(compress: {drop_console: !@watching})))
-      .pipe gulp.dest dir
+Tasks = require './carte/client/tasks'
+Card = require './carte/client/models/card'
+Cards = require './carte/client/models/cards'
+
+module.exports =
+  Tasks: Tasks
+  Models:
+    Card: Card
+    Cards: Cards

data/lib/carte/client.css

@@ -15,22 +15,120 @@
 .tools a:visited,
 .tools a:active
 {
-  color: #333333 !important;
+  color: #333 !important;
   text-decoration: none !important;
 }
 
+ul.nav-pills li a {
+  padding: 6px 12px;
+}
+
 .card ul,ol {
   padding-left: 20px;
 }
 
+.col-sm-4 {
+  padding: 0px;
+}
+
+.col-sm-12 {
+  padding: 0px;
+}
+
+.alert {
+  padding: 5px;
+}
+
+.alert ul {
+  padding-left: 20px;
+}
+
+.list-group {
+  margin: 0px;
+  padding: 5px;
+}
+
+.list-group-item {
+  height: 200px;
+}
+
+.navbar {
+  padding: 0px;
+  background-color: white;
+  margin-bottom: 5px;
+}
+
+.badge {
+  color: #333;
+  background-color: #eee;
+}
+
+.modal-body .form-group:last-child {
+  padding-bottom: 17px;
+}
+
+.navbar-brand:first-child {
+  padding-top: 10px; 
+}
+
+/* carte original definitions */
+.carte-content {
+  padding: 0px 20px;
+}
+
+.carte-hidden {
+  visibility: hidden;
+}
+
+.carte-card-header {
+  margin-bottom: 10px;
+}
+
+.carte-card-header .glyphicon-star {
+  margin-right: 5px;
+}
+
+.carte-card-content {
+  overflow: hidden;
+  width: 100%;
+  height: 73%;
+  word-wrap: break-word;
+}
+
+.carte-pagination .carte-pagination-curr {
+  width: 7.5em;
+  text-align: center;
+}
+
+.carte-list {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.carte-slideshow {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  position : absolute;
+}
+
+/* http://stackoverflow.com/questions/24511887/css-animation-works-in-chrome-but-not-in-firefox-resolved */
 .glyphicon-refresh-animate {
-  -animation: spin .7s infinite linear;
-  -webkit-animation: spin2 .7s infinite linear;
+  -moz-animation: spin-moz .7s infinite linear;
+  -webkit-animation: spin-webkit .7s infinite linear;
+  animation: spin .7s infinite linear;
+}
+
+@-moz-keyframes spin-moz {
+  from { -moz-transform: rotate(0deg);}
+  to { -moz-transform: rotate(360deg);}
 }
-@-webkit-keyframes spin2 {
+
+@-webkit-keyframes spin-webkit {
   from { -webkit-transform: rotate(0deg);}
   to { -webkit-transform: rotate(360deg);}
 }
+
 @keyframes spin {
   from { transform: scale(1) rotate(0deg);}
   to { transform: scale(1) rotate(360deg);}

data/lib/carte/client/tasks.coffee

@@ -0,0 +1,78 @@
+fs = require 'fs-extra'
+path = require 'path'
+gulp = require 'gulp'
+gulpUtil = require 'gulp-util'
+gulpIf = require 'gulp-if'
+sourceStream = require 'vinyl-source-stream'
+browserify = require 'browserify'
+watchify = require 'watchify'
+uglify = require 'gulp-uglify'
+streamify = require 'gulp-streamify'
+coffeeReactify = require 'coffee-reactify'
+browserifyCss = require 'browserify-css'
+_ = require 'lodash'
+jade = require 'gulp-jade'
+rename = require 'gulp-rename'
+
+module.exports = class Carte
+  watching: false
+
+  install: (gulp, config)->
+    custom = require(config)
+    fs.writeFileSync(__dirname + '/../shared/custom.json', JSON.stringify(custom))
+
+    gulp.task 'watching', => @watching = true
+    gulp.task 'build', ['build:html', 'build:script']
+    gulp.task 'watch', ['watching', 'build:html', 'build:script']
+
+    gulp.task 'build:html', =>
+      _config = require('./config')
+      gulp.src(__dirname + '/../client.jade')
+        .pipe jade(locals: {config: _config}, pretty: true)
+        .pipe rename(_config.html_path)
+        .pipe gulp.dest(_config.root_dir)
+
+    gulp.task 'build:script', =>
+      @buildScript config: config
+
+  buildScript: (options)->
+    config = require(options.config)
+    fs.writeFileSync(__dirname + '/../shared/custom.json', JSON.stringify(config))
+    dir = config.root_dir
+    file = path.basename config.script_path
+    browserify = browserify
+      cache: {}
+      packageCache: {}
+      fullPaths: true
+      entries: [__dirname + '/../client.coffee']
+      extensions: ['.coffee', '.js', '.cjsx', '.css']
+    browserify
+      .transform coffeeReactify
+      .transform browserifyCss,
+        rootDir: 'public'
+        processRelativeUrl: (relativeUrl)->
+          stripQueryStringAndHashFromPath = (url)-> url.split('?')[0].split('#')[0]
+          rootDir = path.resolve(process.cwd(), 'public')
+          relativePath = stripQueryStringAndHashFromPath(relativeUrl)
+          queryStringAndHash = relativeUrl.substring(relativePath.length)
+          prefix = '../node_modules/'
+          if (_.startsWith(relativePath, prefix))
+            vendorPath = 'vendor/' + relativePath.substring(prefix.length)
+            source = path.join(rootDir, relativePath)
+            target = path.join(rootDir, vendorPath)
+            gulpUtil.log('Copying file from ' + JSON.stringify(source) + ' to ' + JSON.stringify(target))
+            fs.copySync(source, target)
+            return vendorPath + queryStringAndHash
+          relativeUrl
+    if @watching
+      watchified = watchify(browserify)
+      watchified.on 'update', ()=> @bundle(browserify, dir, file)
+      watchified.on 'log', gulpUtil.log
+    @bundle(browserify, dir, file)
+  
+  bundle: (browserify, dir, file)->
+    browserify
+      .bundle()
+      .pipe sourceStream file
+      .pipe gulpIf(!@watching, streamify(uglify(compress: {drop_console: !@watching})))
+      .pipe gulp.dest dir

data/lib/carte/client/views/app.cjsx

@@ -15,8 +15,6 @@ module.exports = React.createClass
     Button = require('react-bootstrap/lib/Button')
     <div>
       <Header key='header' router={@props.router} />
-      <div style={padding:"0px 20px"}>
-        <Content key='content' router={@props.router} />
-      </div>
+      <Content key='content' router={@props.router} />
     </div>
 

data/lib/carte/client/views/card.cjsx

@@ -4,6 +4,7 @@ Edit = require('./edit')
 ModalTrigger = require('react-bootstrap/lib/ModalTrigger')
 markdownIt = require('markdown-it')(linkify: true)
 helpers = require('../helpers')
+classnames = require('classnames')
 
 module.exports = React.createClass
   displayName: 'Card'
@@ -24,18 +25,21 @@ module.exports = React.createClass
   onMouseLeave: ()->
     @setState showTools: false
 
+  showTools: ()->
+    helpers.isMobile() || @state.showTools
+
   render: ->
-    <div className='col-sm-4 col-xs-12 list-group' style={marginBottom:'0px',padding:"5px"} onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
-        <div className='list-group-item' style={height:'200px'}>
-          <div style={marginBottom:'10px'}>
+    <div className='col-sm-4 col-xs-12 list-group' onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
+        <div className='list-group-item'>
+          <div className="carte-card-header">
             {
               if @props.card.get('focused')
-                <i className='glyphicon glyphicon-star' style={marginRight:'5px'} />
+                <i className='glyphicon glyphicon-star' />
             }
             <strong>
               {@props.card.get('title')}
             </strong>
-            <span className='pull-right tools' style={{visibility: if helpers.isMobile() || @state.showTools then 'visible' else 'hidden'}}>
+            <span className={classnames('pull-right': true, 'tools': true, 'carte-hidden': !@showTools())}>
               <ModalTrigger modal={<Edit card={@props.card} />}>
                 <a href="javascript:void(0)">
                   <i className='glyphicon glyphicon-edit' />
@@ -48,14 +52,20 @@ module.exports = React.createClass
               </a>
             </span>
           </div>
-          <div className="card" style={overflow:'hidden',width:'100%',height:'73%',wordWrap:'break-word'}>
+          <div className="carte-card-content">
             <div dangerouslySetInnerHTML={__html: markdownIt.render @props.card.get('content')} />
           </div>
-          <div style={{visibility: if helpers.isMobile() || @state.showTools then 'visible' else 'hidden'}}>
+          <div className={classnames('carte-hidden': !@showTools())}>
           {
             if @props.card.get("tags")
               @props.card.get("tags").map (tag)->
-                <span className="pull-right tools">&nbsp;&nbsp;<a href={"#/?tags=" + tag}><i className="glyphicon glyphicon-tag" />&nbsp;{tag}</a></span>
+                <span className="pull-right tools">
+                  &nbsp;&nbsp;
+                  <a href={"#/?tags=" + tag}>
+                    <i className="glyphicon glyphicon-tag" />
+                    &nbsp;{tag}
+                  </a>
+                </span>
           }
           </div>
       </div>

data/lib/carte/client/views/content.cjsx

@@ -20,40 +20,54 @@ module.exports = React.createClass
     @props.router.off "route", @callback
 
   render: ->
-    switch @props.router.current
-      when "list"
-        cards = new CardCollection()
-        cards.query = $.extend {}, config.default_query, @props.router.query
-        cards.fetching = true
-        cards.fetch success: ()-> cards.fetching = false
-        #title = []
-        #for k, v of cards.query
-        #  title.push(String(k).capitalize() + ': ' + v)
-        #title = title.join(', ')
-        #title = config.title + ' (' + title + ')'
-        #document.title = title
-        document.title = config.title
-        <List key='list' router={@props.router} cards={cards} />
-      when "show"
-        cards = new CardCollection()
-        cards.fetching = true
-        card = new CardModel(title: @props.router.title)
-        card.fetch
-          success: (card)->
-            for left in card.get("lefts")
-              cardModel = new CardModel(left)
-              cardModel.set 'focused', false
-              cards.add cardModel
-            card.set 'focused', true
-            cards.add card
-            for right in card.get("rights")
-              cardModel = new CardModel(right)
-              cardModel.set 'focused', false
-              cards.add cardModel
-            cards.fetching = false
-          error: (card, response)=>
-            cards.fetching = false
-        document.title = config.title + '、' + card.get('title')
-        <List key='show' cards={cards} card={card} />
-      else
-        <div>Loading ...</div>
+    <div className="carte-content">
+      {
+        switch @props.router.current
+          when "list"
+            cards = new CardCollection()
+            cards.query = $.extend {}, config.default_query, @props.router.query
+            cards.fetching = true
+            cards.fetch success: ()-> cards.fetching = false
+            #title = []
+            #for k, v of cards.query
+            #  title.push(String(k).capitalize() + ': ' + v)
+            #title = title.join(', ')
+            #title = config.title + ' (' + title + ')'
+            #document.title = title
+            document.title = config.title
+            <List key='list' router={@props.router} cards={cards} />
+          when "show"
+            cards = new CardCollection()
+            cards.fetching = true
+            card = new CardModel(title: @props.router.title)
+            card.fetch
+              success: (card)->
+                for left in card.get("lefts")
+                  cardModel = new CardModel(left)
+                  cardModel.set 'focused', false
+                  cards.add cardModel
+                card.set 'focused', true
+                cards.add card
+                for right in card.get("rights")
+                  cardModel = new CardModel(right)
+                  cardModel.set 'focused', false
+                  cards.add cardModel
+                cards.fetching = false
+              error: (card, response)=>
+                cards.fetching = false
+            document.title = config.title + '、' + card.get('title')
+            <List key='show' cards={cards} card={card} />
+          when "slideshow"
+            console.log 'slideshow', @props.router.query
+            cards = new CardCollection()
+            cards.query = $.extend {}, config.default_query, @props.router.query
+            cards.fetching = true
+            cards.fetch success: ()-> cards.fetching = false
+            document.title = config.title + '、スライドショー'
+            e = React.createElement(Slideshow, cards: cards)
+            React.render(e, document.body)
+            #<Slideshow key='slideshow' router={@props.router} cards={cards} />
+          else
+            <div>Loading ...</div>
+      }
+    </div>

data/lib/carte/client/views/edit.cjsx

@@ -64,17 +64,17 @@ module.exports = React.createClass
       <div className='modal-body'>
         {
           if @state.errors
-            <div className="alert alert-danger" role="alert" style={padding:'5px'}>
-              <ul style={paddingLeft:"20px"}>
-              {
-                for key, errors of @state.errors
-                  for error in errors
-                    <li>{key + ' ' + error}</li>
-              }
+            <div className="alert alert-danger" role="alert">
+              <ul>
+                {
+                  for key, errors of @state.errors
+                    for error in errors
+                      <li>{key + ' ' + error}</li>
+                }
               </ul>
             </div>
           else if @state.createSuccess
-            <div className="alert alert-success" role="alert" style={padding:'5px'}>
+            <div className="alert alert-success" role="alert">
               <i className="glyphicon glyphicon-info-sign" />&nbsp;
               You created a card successfully. Let's create next one.
             </div>
@@ -99,7 +99,7 @@ module.exports = React.createClass
               </label>
             </div>
         }
-        <div className="form-group" style={{paddingBottom:'17px'}}>
+        <div className="form-group">
           <button className="btn btn-default pull-right" onClick={@onClickOk} disabled={@state.updating}>
             &nbsp;
             OK

data/lib/carte/client/views/footer.cjsx

@@ -5,5 +5,4 @@ module.exports = React.createClass
   displayName: 'Footer'
 
   render: ->
-    <div style={{paddingTop:'0px',paddingBottom:'100px',paddingRight:"30px",paddingLeft:'30px'}}>
-    </div>
+    <div />

data/lib/carte/client/views/header.cjsx

@@ -70,10 +70,10 @@ module.exports = React.createClass
     location.hash = '/?' + $.param(query)
 
   render: ->
-    <nav className="navbar navbar-default" style={{padding:"0px",backgroundColor:"white",marginBottom:"5px"}}>
+    <nav className="navbar navbar-default">
       <div className="container-fluid">
         <div className="navbar-header">
-          <a className="navbar-brand" onClick={helpers.reload if !config.icon_link} href={if config.icon_link then config.icon_link else "#/"} style={{paddingTop:"10px"}}>
+          <a className="navbar-brand" onClick={helpers.reload if !config.icon_link} href={if config.icon_link then config.icon_link else "#/"}>
             <img alt="Brand" src={config.root_path + config.icon_path} width="30" height="30" />
           </a>
           <a className="navbar-brand" onClick={helpers.reload} href="#/">

data/lib/carte/client/views/list.cjsx

@@ -38,48 +38,79 @@ module.exports = React.createClass
     $.param(query)
 
   render: ->
-    <div className="container" style={{paddingLeft:"5px",paddingRight:"5px"}}>
+    <div className="container carte-list">
       {if !@props.card
         <div className="row">
-          <div className="col-sm-4" style={{padding:"0px"}}>
+          <div className="col-sm-4">
             <ul className="nav nav-pills">
               {
                 for menuItem in config.menu_items
                   switch menuItem
                     when 'atoz'
-                      <li><a onClick={helpers.reload} href={"#/?" + @atozParam()} style={{padding:'6px 12px',fontWeight: if @props.cards.query.sort == 'title' and @props.cards.query.order != 'random' then 'bold' else 'normal'}}>A to Z</a></li>
+                      <li key='atoz'>
+                        <a onClick={helpers.reload} href={"#/?" + @atozParam()}>
+                          {
+                            if @props.cards.query.sort == 'title' and @props.cards.query.order != 'random'
+                              <strong>A to Z</strong>
+                            else
+                              <span>A to Z</span>
+                          }
+                        </a>
+                      </li>
                     when 'latest'
-                      <li><a onClick={helpers.reload} href={"#/?" + @latestParam()} style={{padding:'6px 12px',fontWeight: if @props.cards.query.sort == 'updated_at' and @props.cards.query.order != 'random' then 'bold' else 'normal'}}>Latest</a></li>
+                      <li key='latest'>
+                        <a onClick={helpers.reload} href={"#/?" + @latestParam()}>
+                          {
+                            if @props.cards.query.sort == 'updated_at' and @props.cards.query.order != 'random'
+                              <strong>Latest</strong>
+                            else
+                              <span>Latest</span>
+                          }
+                        </a>
+                      </li>
                     when 'random'
-                      <li><a onClick={helpers.reload} href={"#/?" + @randomParam()} style={{padding:'6px 12px',fontWeight: if @props.cards.query.order == 'random' then 'bold' else 'normal'}}>Random</a></li>
+                      <li key='random'>
+                        <a onClick={helpers.reload} href={"#/?" + @randomParam()}>
+                          {
+                            if @props.cards.query.order == 'random'
+                              <strong>Random</strong>
+                            else
+                              <span>Random</span>
+                          }
+                        </a>
+                      </li>
               }
-              <li><a href={config.root_path + config.api_path + "/cards.xml?" + @queryParam({}, [])} style={{padding:'6px 12px'}}><i className="fa fa-rss" /></a></li>
+              <li>
+                <a href={config.root_path + config.api_path + "/cards.xml?" + @queryParam({}, [])}>
+                  <i className="fa fa-rss" />
+                </a>
+              </li>
             </ul>
           </div>
-          <div className="col-sm-4" style={{padding:"0px"}}>
-            <a href="javascript:void(0)" className="center-block text-center" style={padding:'6px 12px'}>
-              <span className="badge text-center" style={color:'#333',backgroundColor:'#eee'}>
-                {
-                  if @props.cards.pagination
-                    @props.cards.pagination.total_entries
-                  else
-                    <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" />
-                }
-              </span>
-            </a>
+          <div className="col-sm-4">
+                <a href="javascript:void(0)" className="center-block text-center">
+                  <span className="badge">
+                    {
+                      if @props.cards.pagination
+                        @props.cards.pagination.total_entries
+                      else
+                        <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" />
+                    }
+                  </span>
+                </a>
           </div>
-          <div className="col-sm-4" style={{padding:"0px"}}>
+          <div className="col-sm-4">
             {
               if @props.cards.query.order == 'random'
                 <ul className="nav nav-pills pull-right">
                   <li>
                     {
                       if @props.cards.pagination
-                        <a onClick={helpers.reload} href={"#/?" + @randomParam()} style={{padding:'6px 12px'}}>
+                        <a onClick={helpers.reload} href={"#/?" + @randomParam()}>
                           <i className="glyphicon glyphicon-refresh" />
                         </a>
                       else
-                        <a href="javascript:void(0)" style={{padding:'6px 12px'}}>
+                        <a href="javascript:void(0)">
                           <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" />
                         </a>
                     }
@@ -92,9 +123,15 @@ module.exports = React.createClass
         </div>
       else
         <div className="row">
-          <div className="col-sm-12" style={{padding:"0px"}}>
+          <div className="col-sm-12">
             <ul className="nav nav-pills">
-              <li><a href={"#/" + @props.card.get('title')} style={padding:'6px 12px',fontWeight:'bold'}>{@props.card.get('title')}</a></li>
+              <li>
+                <a href={"#/" + @props.card.get('title')}>
+                  <strong>
+                    {@props.card.get('title')}
+                  </strong>
+                </a>
+              </li>
             </ul>
           </div>
         </div>
@@ -103,7 +140,7 @@ module.exports = React.createClass
       {
         if !@props.card && helpers.isMobile()
           <div className="row">
-            <div className="col-sm-12" style={{padding:"0px"}}>
+            <div className="col-sm-12">
               <Pagination cards={@props.cards} />
             </div>
           </div>

data/lib/carte/client/views/message.cjsx

@@ -9,9 +9,9 @@ module.exports = React.createClass
     <div className='row'>
       {
         for i in [1..9]
-          <div className='col-sm-4' style={padding:'5px'} onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave}>
-            <div className='list-group'style={margin:'0px',padding:'0px'}>
-              <div className='list-group-item' style={height:'200px'}>
+          <div key={i} className='col-sm-4'>
+            <div className='list-group'>
+              <div className='list-group-item'>
                 {@props.children}
               </div>
             </div>

data/lib/carte/client/views/pagination.cjsx

@@ -13,8 +13,8 @@ module.exports = React.createClass
     $.param(query)
 
   render: ->
-    <ul className="nav nav-pills pull-right">
-      <li>
+    <ul className="nav nav-pills pull-right carte-pagination">
+      <li className="carte-pagination-prev">
         {
           if @props.cards.pagination
             if @props.cards.pagination.current_page > 1
@@ -23,24 +23,24 @@ module.exports = React.createClass
               href = "#/?" + @pageParam(@props.cards.pagination.total_pages)
           else
             href = "javascript:void(0)"
-          <a href={href} aria-label="Previous" style={{padding:'6px 12px'}}>
+          <a href={href} aria-label="Previous">
             <span aria-hidden="true">&laquo;</span>
           </a>
         }
       </li>
-      <li style={width:'7.5em',textAlign:'center'}>
+      <li className="carte-pagination-curr">
         {
           if @props.cards.pagination
-            <a href={"#/?" + @pageParam(@props.cards.pagination.current_page)} onClick={helpers.reload} style={{padding:'6px 12px'}}>
+            <a href={"#/?" + @pageParam(@props.cards.pagination.current_page)} onClick={helpers.reload}>
               {@props.cards.pagination.current_page} / {@props.cards.pagination.total_pages}
             </a>
           else
-            <a href="javascript:void(0)" style={{padding:'6px 12px'}}>
+            <a href="javascript:void(0)">
               <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" />
             </a>
         }
       </li>
-      <li>
+      <li className="carte-pagination-next">
         {
           if @props.cards.pagination
             if @props.cards.pagination.current_page < @props.cards.pagination.total_pages
@@ -49,7 +49,7 @@ module.exports = React.createClass
               href = "#/?" + @pageParam(1)
           else
             href = "javascript:void(0)"
-          <a href={href} aria-label="Next" style={{padding:'6px 12px'}}>
+          <a href={href} aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
           </a>
         }

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carte-client",
   "description": "something like dictionary, wiki, or information card",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "main": "lib/carte.coffee",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -22,6 +22,7 @@
     "bootstrap": "^3.3.4",
     "browserify": "^9.0.8",
     "browserify-css": "^0.6.1",
+    "classnames": "^2.1.1",
     "coffee-reactify": "^3.0.0",
     "coffee-script": "^1.9.2",
     "coffeeify": "^1.0.0",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: carte-server
 version: !ruby/object:Gem::Version
-  version: 0.0.26
+  version: 0.0.27
 platform: ruby
 authors:
 - tily
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-10 00:00:00.000000000 Z
+date: 2015-05-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -52,6 +52,20 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: httparty
   requirement: !ruby/object:Gem::Requirement
@@ -220,20 +234,6 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: rspec
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '>='
-      - !ruby/object:Gem::Version
-        version: '0'
 description: something like dictionary, wiki, or information card
 email:
 - tidnlyam@gmail.com
@@ -266,6 +266,7 @@ files:
 - lib/carte/client/models/card.coffee
 - lib/carte/client/models/cards.coffee
 - lib/carte/client/router.coffee
+- lib/carte/client/tasks.coffee
 - lib/carte/client/views/app.cjsx
 - lib/carte/client/views/card.cjsx
 - lib/carte/client/views/cards.cjsx