Better styles + pagination

Gemfile

@@ -10,6 +10,7 @@ gem 'omniauth'
 gem 'omniauth-twitter'
 gem 'omniauth-github'
 gem 'bzip2-ruby'
+gem 'kaminari'
 
 # Gems used only for assets and not required
 # in production environments by default.

Gemfile.lock

@@ -94,6 +94,10 @@ GEM
       thor (~> 0.14)
     json (1.6.5)
     json_pure (1.6.5)
+    kaminari (0.13.0)
+      actionpack (>= 3.0.0)
+      activesupport (>= 3.0.0)
+      railties (>= 3.0.0)
     libnotify (0.7.2)
     linecache19 (0.5.12)
       ruby_core_source (>= 0.1.4)
@@ -216,6 +220,7 @@ DEPENDENCIES
   jasmine
   jasminerice
   jquery-rails
+  kaminari
   libnotify
   mysql2
   omniauth

app/assets/stylesheets/application.css

@@ -4,5 +4,6 @@
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require_self
  *= require reset
+ *= require main
  *= require_tree .
 */

app/assets/stylesheets/asciicasts.css.scss

@@ -2,9 +2,31 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+$color1: #00A0B0;
+$color2: #6A4A3C;
+$color3: #CC333F;
+$color4: #EB6841;
+$color5: #EDC951;
+
+.asciicasts {
+  list-style: none;
+
+  .asciicast-preview {
+    h3 {
+      font-size: 16px;
+
+      a {
+        color: $color1;
+      }
+    }
+
+    margin-bottom: 30px;
+  }
+}
+
 .asciicast {
-  width: 100%;
-  background-color: #222;
+  // width: 100%;
+  // background-color: #222;
 
   .player {
     /* border: 1px solid #777;*/
@@ -12,7 +34,7 @@
     float: left;
     display: block;
     padding: 0px;
-    margin: 0px 0px 30px 20px;
+    // margin: 0px 0px 30px 20px;
     position: relative;
 
     .terminal {
@@ -22,7 +44,7 @@
       font-family: 'Droid Sans Mono', Monospace;
       white-space: pre;
       background-color: black;
-      line-height: 1.2em;
+      // line-height: 1.2em;
       color: #ccc;
       overflow: auto;
       overflow-x: hidden;
@@ -53,37 +75,39 @@
       bottom: 0px;
       height: 30px;
       color: white;
+      font-weight: bold;
+      font-family: monospace;
 
       -webkit-transition: opacity 0.3s ease-in-out;
 
       .toggle {
-        background-color: blue;
+        background-color: $color1;
         width: 30px;
         height: 100%;
         float: left;
         cursor: pointer;
 
         &.paused {
-          background-color: orange;
+          background-color: $color4;
         }
       }
 
       .progress {
-        background-color: black;
+        background-color: $color2;
         width: 60%;
         height: 100%;
         float: left;
-        cursor: pointer;
+        // cursor: pointer;
 
         .gutter {
-          background-color: #333;
+          background-color: $color5;
           width: 0px;
           height: 100%;
         }
       }
 
       .time {
-        background-color: green;
+        background-color: $color3;
         width: 30%;
         height: 100%;
         float: left;
@@ -636,13 +660,9 @@
   .bg255 { background-color: #eeeeee }
 
   .description {
-    color: #666;
+    color: #3e3e3e;
     font-family: arial, helvetica;
-    font-size: 16px;
-    margin: 20px;
-  }
-
-  .description p {
-    margin-bottom: 20px;
+    font-size: 18px;
+    margin: 20px 0;
   }
 }

app/assets/stylesheets/main.css.scss

@@ -4,86 +4,109 @@
   visibility: hidden;
 }
 
+// color pallette: http://www.colourlovers.com/palette/580974/Adrift_in_Dreams
+
+$color1: #00A0B0;
+$color2: #6A4A3C;
+$color3: #CC333F;
+$color4: #EB6841;
+$color5: #EDC951;
+
 body {
-  background-color: #E7E7DE;
+  background-color: #f0f0f0;
   margin: 0;
   padding: 0;
 }
 
 body, div, p {
   font-family: arial, helvetica;
-  font-size: 12px;
+  font-size: 14px;
 }
 
-/* 325A66 */
-/* DEA140 */
-/* A32B26 */
-/* 590D0B */
+header {
+  background-color: $color5;
+  height: 40px;
 
-h1 {
-  color: #3e3e3e;
-  font-family: 'Trebuchet MS';
-  font-size: 42px;
-  padding: 15px 0;
-}
+  nav {
+    height: 100%;
 
-h2 {
-  color: #3e3e3e;
-  font-family: 'Trebuchet MS';
-  font-size: 26px;
-  padding: 15px 15px 40px 15px;
-}
+    h1 {
+      height: 100%;
+      float: left;
+      background-color: black;
+      font-family: 'Trebuchet MS';
+      font-size: 26px;
+      padding-right: 10px;
 
-#top {
-  position: relative;
-  height: 80px;
-}
+      a {
+        color: white;
+        vertical-align: middle;
+        margin: 6px 0 0 0;
+        display: block;
+      }
+    }
 
-#logo {
-  display: block;
-  width: 300px;
-  position: absolute;
-  top: 0;
-  left: 0;
+    ul {
+      list-style: none;
+      height: 100%;
+      float: right;
+      background-color: $color1;
+
+      li {
+        color: #eee;
+        display: inline-block;
+        margin-right: 20px;
+        height: 100%;
+      }
+
+      .avatar {
+        height: 100%;
+      }
+    }
+  }
 }
 
-#topnav {
-  display: block;
-  width: 300px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 11px;
-  font-family: Verdana;
+a {
+  text-decoration: none;
+  color: $color2;
 }
 
-#session-info {
-  background-color: #172322;
-  list-style: none;
-  padding: 10px;
-  border-bottom-left-radius: 10px;
+p {
+  margin-bottom: 20px;
+}
 
-  li {
-    color: #eee;
-    display: inline-block;
-    margin-right: 20px;
-  }
+// a.logout {
+//   background-image: url(image-path("logout.png"));
+//   background-repeat: no-repeat;
+// }
 
-  .avatar {
-    width: 24px;
-    height: 24px;
-  }
+.flash {
+  vertical-align: middle;
+  padding: 10px 0 10px 10px;
+  font-weight: bold;
 }
 
-#all {
-  margin: 0 auto;
-  width: 980px;
-  text-align: left;
+.flash#notice {
+  color: black;
+  background-color: white;
 }
 
-#main {
+.flash#alert {
+  color: red;
   background-color: white;
-  width: 980px;
-  font-size: 11px;
-  border-top-left-radius: 10px;
+}
+
+h2 {
+  // color: #3e3e3e;
+  color: $color3;
+  font-family: monospace;
+  font-size: 20px;
+  padding: 15px 0px 30px 0px;
+}
+
+#content {
+  width: 960px;
+  text-align: left;
+  font-size: 12px;
+  padding: 20px;
 }

app/controllers/asciicasts_controller.rb

@@ -1,8 +1,10 @@
 class AsciicastsController < ApplicationController
+  PER_PAGE = 20
+
   respond_to :html, :json
 
   def index
-    @asciicasts = Asciicast.order("created_at DESC")
+    @asciicasts = Asciicast.order("created_at DESC").page(params[:page]).per(PER_PAGE)
   end
 
   def show

app/helpers/asciicasts_helper.rb

@@ -1,5 +1,15 @@
 module AsciicastsHelper
 
+  def asciicast_title(asciicast)
+    if asciicast.title.present?
+      asciicast.title
+    elsif asciicast.command.present?
+      "$ #{asciicast.command}"
+    else
+      "##{asciicast.id}"
+    end
+  end
+
   def player_script(asciicast)
     return <<EOS.html_safe
 <script>

app/models/asciicast.rb

@@ -7,6 +7,8 @@ class Asciicast < ActiveRecord::Base
   validates :stdout, :stdout_timing, :presence => true
   validates :terminal_columns, :terminal_lines, :duration, :presence => true
 
+  attr_reader :description
+
   def meta=(file)
     data = JSON.parse(file.tempfile.read)
 

app/views/asciicasts/_preview.html.erb

@@ -0,0 +1,6 @@
+<li class="asciicast-preview">
+  <h3><%= link_to asciicast_title(asciicast), asciicast %></h3>
+  <% if asciicast.description.present? %>
+    <p class="description"><%= asciicast.description %></p>
+  <% end %>
+</li>

app/views/asciicasts/index.html.erb

@@ -1,9 +1,7 @@
-<h2>Some title</h2>
+<h2>Recent asciicasts</h2>
 
 <ul class="asciicasts">
-  <% @asciicasts.each do |asciicast| %>
-    <li class="asciicast">
-      <a href="/<%= asciicast.id %>"><%= asciicast.id %></a>
-    </li>
-  <% end %>
+  <%= render :partial => "asciicasts/preview", :collection => @asciicasts, :as => :asciicast %>
 </ul>
+
+<%= paginate @asciicasts %>

app/views/asciicasts/show.html.erb

@@ -1,16 +1,15 @@
-<h2>#<%= @asciicast.id %> <%= @asciicast.title %></h2>
+<h2><%= asciicast_title(@asciicast) %></h2>
 
 <div class="asciicast">
-  <div class="player">
-    <%# <pre class="term"></pre> %>
-    <%# <div class="hud">--------------========</div> %>
+  <div class="wrapper">
+    <div class="player"></div>
+    <div class="clear"></div>
   </div>
-  <div class="clear"></div>
-</div>
 
-<div class="description">
-  <p>I’ve been doing some reflecting this week on how I can work smarter (instead of harder), and one of the things I came up with was adding a few more tools to my Vim repertoire. I spend more than half of my engineering time in Vim (the other half usually being in a web browser), so I figured that a few minutes here and there would eventually add up in a big way.</p>
-  <p>But like anything else with Vim, there are always multiple ways of accomplishing the very same thing, so I make no guarantees that there aren’t simpler ways of getting this done — but I can say that this way gets the job done, and is pretty easy to get working on your own system.</p>
+  <div class="description">
+    <p>I’ve been doing some reflecting this week on how I can work smarter (instead of harder), and one of the things I came up with was adding a few more tools to my Vim repertoire. I spend more than half of my engineering time in Vim (the other half usually being in a web browser), so I figured that a few minutes here and there would eventually add up in a big way.</p>
+    <p>But like anything else with Vim, there are always multiple ways of accomplishing the very same thing, so I make no guarantees that there aren’t simpler ways of getting this done — but I can say that this way gets the job done, and is pretty easy to get working on your own system.</p>
+  </div>
 </div>
 
 <%= player_script(@asciicast) %>

app/views/layouts/_session_info.html.erb

@@ -2,7 +2,7 @@
   <% if current_user %>
     <li>
       <%= avatar_img current_user %>
-      <%= link_to "Log out", logout_path %>
+      <%= link_to "Log out", logout_path, :class => "logout" %>
     </li>
   <% else %>
     <li><%= link_to "Log in", login_path %></li>

app/views/layouts/application.html.erb

@@ -9,27 +9,26 @@
 </head>
 <body>
 
-  <div id="all">
-    <div id="top">
-      <div id="logo">
-        <h1>ascii.io</h1>
-      </div>
-      <div id="topnav">
-        <%= render :partial => 'layouts/session_info' %>
-      </div>
-    </div>
-    <div id="main">
-      <% if notice %>
-        <p id="notice" ><%= notice %></p>
-        <% elsif alert %>
-        <p id="alert" ><%= alert %></p>
-      <% end %>
+  <header>
+    <nav>
+      <h1>
+        <%= link_to "ascii.io", "/", :class => "home" %>
+      </h1>
+      <%= render :partial => 'layouts/session_info' %>
+    </nav>
+  </header>
 
-      <%= yield %>
+  <div id="content">
+    <% if notice %>
+      <p id="notice" class="flash"><%= notice %></p>
+      <% elsif alert %>
+      <p id="alert" class="flash"><%= alert %></p>
+    <% end %>
 
-      <div class="clear"></div>
-    </div>
+    <%= yield %>
   </div>
 
+  <footer>
+  </footer>
 </body>
 </html>