bloating myself... mobile interface

nikolaiwarner · Mar 10, 2011 · 4714d1a · 4714d1a
1 parent 99a7fbd
commit 4714d1a
Show file tree

Hide file tree

Showing 21 changed files with 151 additions and 44 deletions.
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -1,8 +1,22 @@
 class ApplicationController < ActionController::Base
   protect_from_forgery
+
+  layout :detect_browser
 
   rescue_from CanCan::AccessDenied do |exception|
     redirect_to root_url, :alert => exception.message
   end
 
+
+private
+
+  def detect_browser
+    agent = request.headers["HTTP_USER_AGENT"].downcase
+    ["android", "ipod", "opera mini", "blackberry", "kindle", "mobile"].each do |m|
+      return "application.mobile" if agent.match(m)
+    end
+    return "application"
+  end
+
+
 end
diff --git a/app/views/frequencies/index.html.haml b/app/views/frequencies/index.html.haml
@@ -1,4 +1,5 @@
-%h1 interaction frequencies
+%h1
+  = h content_for(:title, "interaction frequencies")
 
 .nav
   = link_to 'new frequency', new_frequency_path

diff --git a/app/views/friends/index.html.haml b/app/views/friends/index.html.haml
@@ -1,11 +1,14 @@
-%h1 your friends
+%h1
+  = h content_for(:title, "your friends")
 
-.nav
-  = link_to "new friend", new_friend_path 
-  |
-  = link_to "best friends", best_friends_path 
-  |
-  = link_to "learn your friends", learn_friends_path 
+.nav(data-role="navbar")
+  %ul
+    %li
+      = link_to "new friend", new_friend_path, {"data-role" => "button"}
+    %li
+      = link_to "best friends", best_friends_path, {"data-role" => "button"} 
+    %li
+      = link_to "learn your friends", learn_friends_path, {"data-role" => "button"}
 
 = render 'friends/name_list', :friends => @friends     
 

diff --git a/app/views/friends/learn.html.haml b/app/views/friends/learn.html.haml
@@ -1,17 +1,21 @@
+%h1
+  = h content_for(:title, "learn")
+
+
 .learn_page
 
-  .nav
-    %a{ :href=>"#", :onclick=>"sociallatio.learning.reveal_info();" }
+  .nav(data-role="controlgroup" data-type="horizontal")
+    %a{ :href=>"#", :onclick=>"sociallatio.learning.reveal_info();", "data-role" => "button"}
       who is this?
-    |
-    = link_to "next", learn_friends_path
+    %a{ :href=>"#", :onclick=>"location.reload();", "data-role" => "button", "data-iconpos" => "right"}
+      next
 
   .info
-    .portrait
+    .friend_portrait
       = image_tag(@friend.portrait_url) if @friend.portrait?
 
   .hidden
-    %h1
+    %h2
       = @friend.name
     .nav
       = link_to 'view friend', friend_path(@friend)
diff --git a/app/views/friends/new.html.haml b/app/views/friends/new.html.haml
@@ -1,3 +1,4 @@
-%h1 add a new friend
-= render 'form'
-= link_to 'Back', friends_path
+%h1
+  = h content_for(:title, "add a new friend")
+
+= render 'form'
diff --git a/app/views/friends/show.html.haml b/app/views/friends/show.html.haml
@@ -1,8 +1,9 @@
+%h1
+  = h content_for(:title, @friend.name )
+
 .friend_page
-  %h1
-    = @friend.name 
   .info
-    .portrait
+    .friend_portrait
       = image_tag(@friend.portrait_url) if @friend.portrait?
     .status
       #{pluralize @friend.score, 'point'}
@@ -21,4 +22,4 @@
     = paginate @interactions      
 
   .nav
-    = link_to "edit #{@friend.name}", edit_friend_path(@friend)
+    = link_to "edit #{@friend.name}", edit_friend_path(@friend), {"data-role" => "button"}
diff --git a/app/views/interactions/_list.html.haml b/app/views/interactions/_list.html.haml
@@ -1,10 +1,10 @@
 - interactions.each do |interaction|
-  .interaction
-    .date       
+  .interaction(class='ui-grid-c')
+    .date(class='ui-block-a')
       = raw link_to("#{time_ago_in_words(interaction.datetime)} ago", edit_interaction_path(interaction)) if interaction.datetime
-    .name
+    .name(class='ui-block-b')
       = interaction.interaction_type.name
-    .friend
+    .friend(class='ui-block-c')
       = link_to interaction.friend.name, friend_path(interaction.friend)
-    .description
+    .description(class='ui-block-d')
       = interaction.description
diff --git a/app/views/interactions/edit.html.haml b/app/views/interactions/edit.html.haml
@@ -1,7 +1,6 @@
-%h1 edit interaction
-= render 'form'
+%h1
+  = h content_for(:title, "edit interaction")
 
-
 
 .admin
   = link_to 'delete', @interation, :confirm => 'Are you sure?', :method => :delete
diff --git a/app/views/interactions/index.html.haml b/app/views/interactions/index.html.haml
@@ -1,7 +1,8 @@
-%h1 your interactions
+%h1
+  = h content_for(:title, "your interactions")
 
 .nav
-  = link_to 'new interaction', new_interaction_path
+  = link_to 'new interaction', new_interaction_path, {"data-role" => "button"}
 
 .history
   = render 'list', :interactions => @interactions      

diff --git a/app/views/interactions/new.html.haml b/app/views/interactions/new.html.haml
@@ -1,2 +1,4 @@
-%h1 add an interaction
+%h1
+  = h content_for(:title, "add an interaction")
+
 = render 'form'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -3,11 +3,10 @@
   %head
     %title Sociallatio
 
-    = stylesheet_link_tag :all
+    = stylesheet_link_tag 'application'
     %link{ :rel => "shortcut icon", :href => '/images/favicon.png' }
     %link{ :rel => "apple-touch-icon", :href => '/images/favicon.png' }
     %link{ :media => "screen", :rel => "stylesheet", :type => "text/css", :href => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" }
-    %link{ :rel => "stylesheet", :href => "http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" }
 
     %script{ :type => "text/javascript", :src => "https://www.google.com/jsapi?key=ABQIAAAALFcVECtS_cckPZPP6gEvtBQNqA7PXSQWBnZcv0WRsLc5vt2EwhRNL4XDqi3F3gVWu6gud-eJy35NIA" }
     :javascript
@@ -20,7 +19,6 @@
             families: [ 'Neuton', 'Josefin Slab' ]
           }});
       });
-    %script{ :src => "http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" }
 
     = javascript_include_tag "rails", "jquery-ui-timepicker-addon", "application"
     = csrf_meta_tag

diff --git a/app/views/layouts/application.mobile.html.haml b/app/views/layouts/application.mobile.html.haml
@@ -0,0 +1,51 @@
+!!! 5
+%html
+  %head
+    %title Sociallatio
+
+    = stylesheet_link_tag 'mobile'
+
+    %link{ :rel => "shortcut icon", :href => '/images/favicon.png' }
+    %link{ :rel => "apple-touch-icon", :href => '/images/favicon.png' }
+
+    %link{ :rel => "stylesheet", :href => "http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" }
+
+    %script{ :type => "text/javascript", :src => "https://www.google.com/jsapi?key=ABQIAAAALFcVECtS_cckPZPP6gEvtBQNqA7PXSQWBnZcv0WRsLc5vt2EwhRNL4XDqi3F3gVWu6gud-eJy35NIA" }
+    :javascript
+      google.load("jquery", "1.5.0");
+      google.load("jqueryui", "1.8.9");
+      google.load("webfont", "1.0.18");
+      google.setOnLoadCallback(function() {
+        WebFont.load({
+          google: {
+            families: [ 'Neuton', 'Josefin Slab' ]
+          }});
+      });
+    %script{ :src => "http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" }
+
+    = csrf_meta_tag
+  %body
+    .wrapper(data-role="page")
+      .header(data-role="header" data-position="fixed")
+        %h1
+          = yield :title
+
+        - if current_user
+          = link_to "interact", new_interaction_path, {:class => "ui-btn-right"}
+      .content(data-role="content")
+        = render 'layouts/notices'
+        = yield
+      .footer(data-role="footer" data-position="fixed")
+        - if current_user
+          %div(data-role="navbar")
+            %ul
+              %li
+                = link_to("dashboard", root_path, {"data-icon" => "home"})
+              %li
+                = link_to("friends", friends_path, {"data-icon" => "star"})
+              %li
+                = link_to("interact", interactions_path, {"data-icon" => "check"}) 
+              %li
+                = link_to("settings", page_path('settings'), {"data-icon" => "gear"}) 
+        - else(data-icon="plus")
+          = link_to("sign in", new_user_session_path)
diff --git a/app/views/pages/about.html.haml b/app/views/pages/about.html.haml
@@ -0,0 +1,2 @@
+%h1
+  = h content_for(:title, "about")
diff --git a/app/views/pages/home.html.haml b/app/views/pages/home.html.haml
@@ -3,7 +3,7 @@
 
 
     %h1
-      today
+      = h content_for(:title, "today")
 
     .friends
       - if current_user.friends.length < 1

diff --git a/app/views/pages/settings.html.haml b/app/views/pages/settings.html.haml
@@ -1,5 +1,7 @@
+%h1
+  = h content_for(:title, "settings")
 
 .nav
-  = link_to 'interaction frequencies', frequencies_path
-  |
-  = link_to 'types of interactions', interaction_types_path
+  = link_to 'interaction frequencies', frequencies_path, {"data-role" => "button"}
+  %br/
+  = link_to 'types of interactions', interaction_types_path, {"data-role" => "button"}
diff --git a/config/initializers/mime_types.rb b/config/initializers/mime_types.rb
@@ -2,4 +2,4 @@
 
 # Add new mime types for use in respond_to blocks:
 # Mime::Type.register "text/richtext", :rtf
-# Mime::Type.register_alias "text/html", :iphone
+# Mime::Type.register_alias "text/html", :iphone
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -18,7 +18,7 @@ $(document).ready(function(){
   if ($('.datepicker').length > 0) {
     $('.datepicker').timepicker();
   }
-
+  
   // Autocomplete
   $(".friendname_autocomplete")
     .bind( "keydown", function( event ) {

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
@@ -193,10 +193,10 @@ a.friend_needs_interaction {
   .history .interaction .description {
     width: 350px; }
 
-.portrait {
+.friend_portrait {
   padding: 5px;
   text-align: center; }
-  .portrait img {
+  .friend_portrait img {
     outline: 1px solid #aaaaaa; }
 
 .best_friends {

diff --git a/public/stylesheets/mobile.css b/public/stylesheets/mobile.css
@@ -0,0 +1,12 @@
+.content h1 {
+  display: none; }
+
+.hidden {
+  display: none; }
+
+.pagination, .learn_page {
+  text-align: center; }
+
+.interaction {
+  padding-top: 10px;
+  padding-bottom: 10px; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
@@ -230,7 +230,7 @@ a.friend_needs_interaction
 
 
 
-.portrait
+.friend_portrait
   padding: 5px
   text-align: center
 

diff --git a/public/stylesheets/sass/mobile.sass b/public/stylesheets/sass/mobile.sass
@@ -0,0 +1,16 @@
+.content h1
+  display: none
+
+.hidden
+  display: none
+
+
+.pagination, .learn_page
+  text-align: center    
+
+
+.interaction
+  padding-top: 10px
+  padding-bottom: 10px
+
+