basic mobile usecases: shows, notes, memes

app/controllers/memes_controller.rb

@@ -1,6 +1,6 @@
 class MemesController < InheritedResources::Base
   belongs_to :show, :finder => :find_by_number!, :optional => true
-  custom_actions :collection => [:stats], :member => [:stat]
+  custom_actions :collection => [:stats,:top], :member => [:stat]
   respond_to :html, :json, :xml
 
   include Navd::Chartable
@@ -13,4 +13,8 @@ def stat
     render :json => to_chartable_structure(resource.stat_over_time,Meme::STAT_CHART_TEMPLATE).to_json
   end
 
+  def top
+    @memes = Meme.topn
+    top!
+  end
 end

app/models/meme.rb

@@ -3,9 +3,10 @@ class Meme < ActiveRecord::Base
   has_many :notes, :dependent => :destroy
   has_many :shows, :through => :notes, :uniq => true, :order => 'number desc'
 
+  default_scope order('memes.name')
   scope :select_listing, order(:name)
 
-  scope :topn, lambda { |limit=10|
+  scope :topn, lambda { |limit = AppConstants.number_of_trending_memes|
     unscoped.where(Meme.arel_table[:id].in(topn_arel(limit)))
   }
 
@@ -15,7 +16,7 @@ class Meme < ActiveRecord::Base
     joins(:shows).
     where(Meme.arel_table[:id].in((meme_id ? meme_id : topn_arel))).
     group(:"memes.name", :"shows.number").
-    order('memes.name, shows.number')
+    reorder('memes.name, shows.number')
   }
 
   # Gets the stats over time for the current meme

app/models/note.rb

@@ -2,5 +2,7 @@ class Note < ActiveRecord::Base
   belongs_to :show
   belongs_to :meme
 
-  scope :show_meme_note_order, includes(:show).includes(:meme).order('shows.number desc, memes.name asc, notes.name asc')
+  default_scope order('notes.name')
+  scope :show_meme_note_order, includes(:show).includes(:meme).reorder('shows.number desc, memes.name asc, notes.name asc')
+
 end

app/models/show.rb

@@ -2,7 +2,8 @@ class Show < ActiveRecord::Base
   has_many :notes, :dependent => :destroy
   has_many :memes, :through => :notes, :uniq => true, :order => :name
 
-  scope :select_listing, where(:published => true).order('number desc')
+  default_scope order('shows.number desc')
+  scope :select_listing, where(:published => true)
 
   # TODO: there's a better query construct possible than this=>
   scope :meme_stats, lambda { |show_id=nil|
@@ -13,7 +14,7 @@ class Show < ActiveRecord::Base
     joins(:memes).
     where(n[:meme_id].not_in(Meme.non_trending_arel)).
     group(:"memes.name").
-    order('count(notes.id)')
+    reorder('count(notes.id)')
   }
 
   class << self
@@ -52,4 +53,5 @@ def to_param
   def meme_stat
     self.class.meme_stats(self.id)
   end
+
 end

app/stylesheets/mobile/_base.scss

@@ -3,4 +3,16 @@ body {
 .clearpanel {
   clear: both;
   height: 15px;
-}
+}
+.content {
+  .name {
+    font-weight: bold;
+  }
+  .cover_art {
+    width: 100px;
+    margin: 10px auto 0;
+    img {
+      height: 100px;
+    }
+  }
+}

app/views/dashboards/menu.mobile.haml

@@ -4,17 +4,17 @@
   %h2= t('site.short_title')
   %ul.rounded
     %li
-      %a
+      %a.touch_load{'data-url' => top_memes_path, 'data-transition' => 'pop-in'}
         %img.icon.greenbox{ :src => "/images/mobile/tabs/flag.png" }
         = t('stats.top_memes.title', :n => AppConstants.number_of_trending_memes)
         %span.arrow
     %li
-      %a
+      %a.touch_load{'data-url' => memes_path, 'data-transition' => 'slide-left'}
         %img.icon.greenbox{ :src => "/images/mobile/tabs/aim.png" }
         = t('memes.index.title')
         %span.arrow
     %li
-      %a
+      %a.touch_load{'data-url' => shows_path, 'data-transition' => 'slide-left'}
         %img.icon.greenbox{ :src => "/images/mobile/tabs/note.png" }
         = t('shows.index.title')
         %span.arrow

app/views/memes/_table.mobile.haml

@@ -0,0 +1,6 @@
+%ul.rounded
+  - collection.each do |item|
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([item,:notes]), 'data-transition' => 'slide-left'}
+        = item.name
+        %span.count= item.notes.count

app/views/memes/index.mobile.haml

@@ -1,11 +1,5 @@
 .toolbar
-  %h1
-    Memes
+  %h1= t('.title')
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
 .content
-  %h2
-    Main Menu
-  %ul.rounded
-    %li
-      %a
-        %img.icon.greenbox{ :src => "/images/mobile/tabs/flag.png" }
-        %span.arrow
+  = render :partial => 'memes/table'

app/views/memes/top.mobile.haml

@@ -0,0 +1,5 @@
+.toolbar
+  %h1= t('stats.top_memes.short_title', :n => AppConstants.number_of_trending_memes)
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
+.content
+  = render :partial => 'memes/table'

app/views/notes/_table.mobile.haml

@@ -0,0 +1,6 @@
+%ul.rounded
+  - collection.each do |item|
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([item]), 'data-transition' => 'slide-left'}
+        = item.name
+        %span.arrow

app/views/notes/index.mobile.haml

@@ -0,0 +1,5 @@
+.toolbar
+  %h1= t('.title')
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
+.content
+  = render :partial => 'notes/table'

app/views/notes/show.mobile.haml

@@ -0,0 +1,23 @@
+.toolbar
+  %h1= t('.title')
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
+.content
+  .name= resource.name
+  %ul.rounded
+    - if resource.url?
+      %li
+        %a.touch_load{'data-url' => resource.url, 'data-transition' => 'slide-left'}
+          %img.icon.greenbox{ :src => "/images/mobile/tabs/aim.png" }
+          = t(:link)
+          %span.arrow
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([resource.meme,:notes]), 'data-transition' => 'slide-left'}
+        %img.icon.greenbox{ :src => "/images/mobile/tabs/aim.png" }
+        = resource.meme.name
+        %span.arrow
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([resource.show]), 'data-transition' => 'slide-left'}
+        %img.icon.greenbox{ :src => "/images/mobile/tabs/note.png" }
+        = resource.show.short_title
+        %span.arrow
+  .description= resource.description

app/views/pages/_technoexperts.html.haml

@@ -3,8 +3,8 @@
     %h2 TECHNO EXPERTS!!
     %p
       The NoAgenda Dashboard works best on late model Chrome/Firefox/Safari/IE browsers
-      It also works pretty darn good on the iPad. A special version for Android and iPhone devices
-      is in the works.
+      It also works pretty darn good on the iPad. If you are using an Android or iPhone
+      device, it serves a special mobile-friendly version.
     %p
       We're currently only loading show details since show number
       = AppConstants.earliest_show_to_load

app/views/pages/technoexperts.mobile.haml

@@ -1 +1,5 @@
-= render :partial => 'pages/technoexperts.html'
+.toolbar
+  %h1= t('pages.technoexperts.title')
+  %a.button.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'flip-right' }= t(:done)
+.content
+  = render :partial => 'pages/technoexperts.html'

app/views/shows/_table.mobile.haml

@@ -0,0 +1,6 @@
+%ul.rounded
+  - collection.each do |item|
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([item]), 'data-transition' => 'slide-left'}
+        = item.short_title
+        %span.count= item.notes.count

app/views/shows/index.mobile.haml

@@ -1,12 +1,5 @@
 .toolbar
-  %h1
-    Shows
+  %h1= t('.title')
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
 .content
-  %h2
-    Main Menu
-  %ul.rounded
-    %li
-      %a
-        %img.icon.greenbox{ :src => "/images/mobile/tabs/flag.png" }
-        %span.arrow
-  .clearpanel
+  = render :partial => 'shows/table'

app/views/shows/show.mobile.haml

@@ -0,0 +1,21 @@
+.toolbar
+  %h1= resource.short_title
+  %a.button.back.touch_load{'data-url' => menu_dashboard_path, 'data-transition' => 'pop-out' }= t(:done)
+.content
+  %h2= resource.name
+  - if resource.cover_art_url?
+    .cover_art= image_tag(resource.cover_art_url)
+  %ul.rounded
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([resource,:memes]), 'data-transition' => 'slide-left'}
+        %img.icon.greenbox{ :src => "/images/mobile/tabs/aim.png" }
+        = t('memes.index.title')
+        %span.arrow
+    %li
+      %a.touch_load{'data-url' => polymorphic_path([resource,:notes]), 'data-transition' => 'slide-left'}
+        %img.icon.greenbox{ :src => "/images/mobile/tabs/note.png" }
+        = t('notes.index.title')
+        %span.arrow
+  - if resource.credits?
+    %h2= resource_class.human_attribute_name(:credits)
+    %div= raw resource.credits

config/locales/en.yml

@@ -41,8 +41,10 @@ en:
       show: Episode
   back: Back
   book_of_knowledge: Book of Knowledge
+  done: Done
   donor:
     title: Be a Donor not a Boner!
+  link: On the web..
   memes:
     index:
       title: Memes
@@ -51,6 +53,8 @@ en:
   notes:
     index:
       title: Show Notes
+    show:
+      title: Show Note
   pages:
     technoexperts:
       title: TECHNO EXPERTS
@@ -67,3 +71,4 @@ en:
   stats:
     top_memes:
       title: 'Top %{n} Trending Memes'
+      short_title: 'Top %{n} Memes'

config/routes.rb

@@ -8,7 +8,10 @@
   resources :notes, :only => [:index,:show]
   resources :memes, :only => [:index,:show] do
     resources :notes, :only => [:index,:show]
-    get :stats, :on => :collection
+    collection do
+      get :stats
+      get :top
+    end
     get :stat, :on => :member
   end
   resources :shows, :only => [:index,:show] do

public/javascripts/application.js

@@ -38,6 +38,7 @@ var NAVD = {
     $(document.body).append('<div id="mobileMain" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"></div>');
     NAVD.mobileMain = jsTouch.init('mobileMain', { width: 320,  page: '/dashboard/menu' } );
     NAVD.mobile_resize();
+    NAVD.enableSmartphonePageLoad();
     document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
     document.addEventListener('orientationchange', NAVD.mobile_resize, false);
     window.addEventListener('resize', NAVD.mobile_resize, false);
@@ -54,6 +55,17 @@ var NAVD = {
   	jsTouch.resize();
   },
 
+  enableSmartphonePageLoad: function() {
+    $('.touch_load').live('click', function() {
+      var url = $(this).data('url') || $(this).attr('href');
+      var transition = $(this).data('transition') || 'slide-left';
+      if (url != "") {
+        jsTouch.loadPage(url, { transition: transition });
+      }
+      return false;
+    });
+  },
+
   enableScroller: function() {
     if ( NAVD.config.mobile ) {
       NAVD.mainScroller = new iScroll('container');

public/stylesheets/compiled/mobile.css

@@ -923,3 +923,17 @@ div.jsTouch div.content input {
   clear: both;
   height: 15px;
 }
+
+/* line 8, ../../../app/stylesheets/mobile/_base.scss */
+.content .name {
+  font-weight: bold;
+}
+/* line 11, ../../../app/stylesheets/mobile/_base.scss */
+.content .cover_art {
+  width: 100px;
+  margin: 10px auto 0;
+}
+/* line 14, ../../../app/stylesheets/mobile/_base.scss */
+.content .cover_art img {
+  height: 100px;
+}

spec/controllers/memes/mobile_spec.rb

@@ -0,0 +1,23 @@
+require 'spec_helper'
+
+describe MemesController do
+  render_views
+  let!(:show) { Factory(:show) }
+  let!(:meme) { Factory(:meme) }
+  let!(:note) { Factory(:note, :meme => meme, :show => show) }
+
+  before do
+    Browser.any_instance.stub(:iphone?).and_return(true)
+  end
+
+  describe "GET index" do
+    subject { get :index }
+    it { should be_success }
+  end
+
+  describe "GET top" do
+    subject { get :top }
+    it { should be_success }
+  end
+
+end

spec/controllers/notes/mobile_spec.rb

@@ -0,0 +1,24 @@
+require 'spec_helper'
+
+describe NotesController do
+  render_views
+  let!(:show) { Factory(:show) }
+  let!(:meme) { Factory(:meme) }
+  let!(:note) { Factory(:note, :meme => meme, :show => show) }
+  let(:resource) { note }
+
+  before do
+    Browser.any_instance.stub(:iphone?).and_return(true)
+  end
+
+  describe "GET index" do
+    subject { get :index }
+    it { should be_success }
+  end
+
+  describe "GET show" do
+    subject { get :show, :id => resource.id }
+    it { should be_success }
+  end
+
+end