added html5 boilerplate meta tags to mobile; stripped functionality to add back

app/controllers/likes_controller.rb

@@ -21,6 +21,7 @@ class LikesController < ApplicationController
           format.js { render 'likes/update', :status => 201 }
           format.html { render :nothing => true, :status => 201 }
           format.mobile { redirect_to post_path(@like.post_id) }
+          format.json { render :nothing => true, :status => 201 }
         end
       else
         render :nothing => true, :status => 422
@@ -34,13 +35,15 @@ class LikesController < ApplicationController
     if @like = Like.where(:id => params[:id], :author_id => current_user.person.id).first
       current_user.retract(@like)
       respond_to do |format|
-        format.all { }
+        format.any { }
         format.js { render 'likes/update' }
+        format.json { render :nothing => true, :status => :ok}
       end
     else
       respond_to do |format|
         format.mobile { redirect_to :back }
         format.js { render :nothing => true, :status => 403 }
+        format.json { render :nothing => true, :status => 403}
       end
     end
   end

app/controllers/status_messages_controller.rb

@@ -11,18 +11,21 @@ class StatusMessagesController < ApplicationController
   # Called when a user clicks "Mention" on a profile page
   # @option [Integer] person_id The id of the person to be mentioned
   def new
-    @person = Person.find(params[:person_id])
+    if params[:person_id] && @person = Person.where(params[:person_id]).first
-    @aspect = :profile
+      @aspect = :profile
-    @contact = current_user.contact_for(@person)
+      @contact = current_user.contact_for(@person)
-    @aspects_with_person = []
+      @aspects_with_person = []
-    if @contact
+      if @contact
-      @aspects_with_person = @contact.aspects
+        @aspects_with_person = @contact.aspects
-      @aspect_ids = @aspects_with_person.map(&:id)
+        @aspect_ids = @aspects_with_person.map(&:id)
-      @contacts_of_contact = @contact.contacts
+        @contacts_of_contact = @contact.contacts
 
-      render :layout => nil
+        render :layout => nil
+      end
     else
-      redirect_to :back
+      @aspect = :all
+      @aspects = current_user.aspects
+      @aspect_ids = @aspects.map{ |a| a.id }
     end
   end
 

app/views/aspects/index.mobile.haml

@@ -2,19 +2,18 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-#aspect_header
+%h2
   - if @stream.for_all_aspects?
     = t('all_aspects')
   - else
     = @stream.aspect
-  = link_to t('.post_a_message'), '#publisher_page', :id => 'publisher_button'
+  = link_to 'Post', new_status_message_path, :id => 'publisher_button'
-
 
 #main_stream.stream
   = render 'shared/stream', :posts => @stream.posts
   -if @stream.posts.length > 0
     #pagination
       %a.more-link.paginate{:href => next_page_path}
-        %h2= t("more")
+        %h1
-- content_for :subpages do
+          = t("more")
-  = render 'shared/publisher', :aspect_ids => @stream.aspect_ids, :selected_aspects => @stream.aspects, :aspect => @stream.aspect
+

app/views/comments/_comment.mobile.haml

@@ -4,16 +4,17 @@
 
 %li.comment{:data=>{:guid=>comment.id}, :class => ("hidden" if(defined? hidden))}
   .right
-    %span.time
-      = comment.created_at ? time_ago_in_words(comment.created_at) : time_ago_in_words(Time.now)
     -#.controls
       -#= link_to image_tag('deletelabel.png'), comment, :confirm => t('are_you_sure'), :method => :delete, :class => "delete comment_delete", :title => t('delete')
 
-
-  = person_image_link(comment.author)
   .content
     .from
+      = person_image_link(comment.author)
       = person_link(comment.author)
-    %div{ :class => direction_for(comment.text) }
+      .info
+        %span.time.timeago{:datetime => comment.created_at}
+          = comment.created_at ? time_ago_in_words(comment.created_at) : time_ago_in_words(Time.now)
+
+    %div{:class => direction_for(comment.text)}
       = markdownify(comment, :youtube_maps => comment[:youtube_titles])
 

app/views/layouts/application.mobile.haml

@@ -9,16 +9,19 @@
       DIASPORA*
 
     %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
-    = include_javascripts :mobile
+    %meta{:name =>'viewport', :content => "width=device-width, minimum-scale=1, maximum-scale=1"}
-    %meta{'name' =>'viewport', 'content' => "width=device-width, minimum-scale=1, maximum-scale=1"}
+    %meta{:name => "HandheldFriendly", :content => "True"}
+    %meta{:name => "MobileOptimized", :content => "320"}
+    %meta{'http-equiv' => "cleartype", :content => 'on'}
 
+    = include_javascripts :mobile
     -if current_user
       :javascript
         Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
 
     =include_stylesheets :mobile
     = csrf_meta_tag
-    
+
     - if rtl?
       = include_stylesheets :rtl, :media => 'all'
 
@@ -26,15 +29,10 @@
 
     -if AppConfig[:google_a_site]
       :javascript
-        var _gaq = _gaq || [];
+        var _gaq=[["_setAccount","#{AppConfig[:google_a_site]}"],["_trackPageview"]];
-        _gaq.push(['_setAccount', '#{AppConfig[:google_a_site]}']);
+        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
-        _gaq.push(['_trackPageview']);
+        g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
-
+        s.parentNode.insertBefore(g,s)}(document,"script"));
-        (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-        })();
 
     -if AppConfig[:piwik_id]
       :javascript
@@ -49,64 +47,18 @@
 
 
   %body
-    #content{:data => {:role => 'page', :theme => 'c'}}
+    %header
-      #header
+      /- if current_user
-        - if current_user
+      /  /= link_to(image_tag('icons/list_white.png'), '#menu', :id => "menu_button")
-          .right
+      /  /= link_to(image_tag('icons/search_white.png'), people_path, :class => "right")
-            = link_to(image_tag('icons/list_white.png'), '#menu', :id => "menu_button")
+      = link_to(image_tag('white@2x.png', :height => 22, :width => 136, :id => 'header_title'), aspects_path)
-            = link_to(image_tag('icons/search_white.png'), people_path)
+
-        = link_to(image_tag('white@2x.png', :height => 22, :width => 136, :id => 'header_title'), aspects_path)
+    - if flash.present?
       %p
         - flash.each do |name, msg|
           = content_tag :div, msg, :id => "flash_#{name}"
 
-      = yield
+    = yield
 
-      = render :partial =>'shared/footer' if user_signed_in?
+    /= render :partial =>'shared/footer' if user_signed_in?
-
-    -if current_user
-      #menu{:data => {:role => 'page', :theme => 'c'}}
-        #header
-          .right
-            = link_to(image_tag('icons/search_white.png'), people_path)
-          = link_to(image_tag('white.png'), aspects_path)
-
-        #content{:data => {:role => 'content'}}
-
-          %h2
-            = current_user.name
-
-          %ul{:data => {:role => 'listview', :inset => 'true'}}
-            %li
-              = link_to t('notifications.index.notifications'), notifications_path
-              .ui-li-count
-                = @notification_count
-            %li
-              = link_to t('conversations.index.message_inbox'), conversations_path
-              .ui-li-count
-                = @unread_message_count
-
-
-
-          - if AppConfig[:open_invitations]
-            %h4
-              = t('shared.invitations.invite_your_friends')
-            %ul{:data => {:role => 'listview', :inset => 'true'}}
-              %li
-                = link_to t('.by_email'), new_user_invitation_path                  
-
-          %h4
-            = t('.your_aspects')
-
-          %ul{:data => {:role => 'listview', :inset => 'true'}}
-            %li
-              = link_to t('all_aspects'), aspects_path
-            - for aspect in all_aspects
-              %li
-                = link_to aspect, aspects_path('a_ids[]' => aspect.id)
-
-
-        = render :partial =>'shared/footer'
-
-  = yield :subpages
 

app/views/people/show.mobile.haml

@@ -10,10 +10,10 @@
   = person_image_tag @person, :thumb_medium
 
   .content
-    %h3
+    %h2
       = @person.name
-      .description
+    - if user_signed_in? && current_user.person == @person
-        = @person.diaspora_handle
+      = link_to t('people.profile_sidebar.edit_my_profile'), edit_profile_path, :class => 'button creation'
 
 - if user_signed_in? && !(@contact.persisted? || current_user.person == @person)
   - if @incoming_request

app/views/posts/show.mobile.haml

@@ -2,30 +2,8 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-#show_content{:data=>{:guid=>@post.id}}
+= render :partial => 'shared/stream_element',
-  = render 'shared/author_info', :person => @post.author, :post => @post
+         :locals => {:post => @post, :commenting_disabled => defined?(@commenting_disabled)}
-
-  - if @post.activity_streams?
-    = image_tag @post.image_url
-  - elsif reshare?(@post)
-    = render 'reshares/reshare', :reshare => @post, :post => @post.root
-  - else
-    %p
-      = markdownify(@post, :youtube_maps => @post[:youtube_titles])
-
-    - for photo in @post.photos
-      = link_to (image_tag photo.url(:thumb_small), :class => 'thumb_small'), photo.url(:thumb_medium)
-
-  .info
-    %span.time
-      = t('ago', :time => time_ago_in_words(@post.created_at))
-
-      %br
-      - if user_signed_in?
-        - if current_user.owns? @post
-          = link_to t('delete'), post_path(@post), :confirm => t('are_you_sure'), :method => :delete
-        - else
-          = link_to t('hide'), post_visibility_path(:id => "42", :post_id => @post.id), :confirm => t('are_you_sure'), :method => :put, :remote => true
 
 .stream.show{:data=>{:guid=>@post.id}}
   = render "comments/comments", :post => @post, :comments => @post.comments, :comments_expanded => true

app/views/reshares/_reshare.mobile.haml

@@ -8,7 +8,6 @@
     .content
       .from
         = person_link(post.author, :class => "hovercardable")
-             
 
       - if post.activity_streams?
         = link_to image_tag(post.image_url, 'data-small-photo' => post.image_url, 'data-full-photo' => post.image_url, :class => 'stream-photo'), post.object_url, :class => "stream-photo-link"

app/views/shared/_footer.mobile.haml

@@ -1,12 +1,4 @@
-#footer{:data => {:role => 'footer'}}
+%footer
-
+  = link_to t('.logged_in_as', :name => current_user.name), current_user.person
-  .inset
+  = link_to t('layouts.application.toggle'), toggle_mobile_path
-    %b= t('.your_aspects')
+  = link_to t('layouts.header.logout'), destroy_user_session_path
-    %div{:data => {:role => 'controlgroup', :type => 'horizontal'}}
-      - for aspect in all_aspects
-        = link_to aspect, aspects_path('a_ids[]' => aspect.id)
-        |
-  .ui-bar
-    = link_to t('.logged_in_as', :name => current_user.name), current_user.person
-    = link_to t('layouts.application.toggle'), toggle_mobile_path
-    = link_to t('layouts.header.logout'), destroy_user_session_path

app/views/shared/_publisher.mobile.haml

@@ -2,52 +2,26 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-:javascript
+= form_for StatusMessage.new, {:data => {:ajax => false}}  do |status|
-  $(document).ready(function(){
+  = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :style => "width:300px", :rows => 4
-    $("#status_message_text").bind("focus", function(){
-      $("#publisher fieldset:first").removeClass('hidden');
-    });
-  });
 
-#publisher_page{:data => {:role => 'page', :theme => 'c'}}
+  - for aspect_id in aspect_ids
-  #header
+    = hidden_field_tag 'aspect_ids[]', aspect_id.to_s
-    - if current_user
-      .left
-        = link_to(image_tag('icons/list_white.png'), '/aspects/#menu', :id => "menu_button")
 
-      .right
+  %fieldset
-        = link_to(image_tag('icons/search_white.png'), people_path)
+    - unless aspect == :all
-    = link_to(image_tag('white.png'), aspects_path)
+      %input{:type => 'checkbox', :name => 'status_message[public]', :id => 'public', :class => 'custom', :value => 'true'}
-  %div{:data => {:role => 'content'}}
+      %label{:for => 'public'}
-    = form_for StatusMessage.new, {:data => {:ajax => false}}  do |status|
+        = t('.make_public')
-      #publisher_text
+      - unless current_user.services.empty?
-        = t('.whats_on_your_mind')
+        %div{:data => {:role => 'fieldcontain'}}
+          %label{:for => 'services', :class => 'select'}
+            choose services
 
-      = status.text_area :text
+          - current_user.services.each do |service|
+            %input{:type => 'checkbox', :name => "services[]", :id => "#{service.provider}", :class => 'custom', :value => "#{service.provider}"}
+            %label{:for => "#{service.provider}"}
+              = "#{service.provider}"
 
-      - for aspect_id in aspect_ids
+    = status.submit t('.share')
-        = hidden_field_tag 'aspect_ids[]', aspect_id.to_s
-
-
-      %fieldset
-        - unless aspect_ids
-          %input{:type => 'checkbox', :name => 'status_message[public]', :id => 'public', :class => 'custom', :value => 'true'}
-          %label{:for => 'public'}
-            = t('.make_public')
-          - unless current_user.services.empty?
-            %div{:data => {:role => 'fieldcontain'}}
-              %label{:for => 'services', :class => 'select'}
-                choose services
-
-              - current_user.services.each do |service|
-                %input{:type => 'checkbox', :name => "services[]", :id => "#{service.provider}", :class => 'custom', :value => "#{service.provider}"}
-                %label{:for => "#{service.provider}"}
-                  = "#{service.provider}"
-              -#%select{:name => 'services', :multiple => 'multiple', :id => "services"}
-                -#%option
-                  -#Choose a Service
-                -#- current_user.services.each do |service|
-                  -#%option{:value => "#{service.provider}"}
-                    -#= service.provider.titleize
-        = status.submit t('.share'), 'data-theme' => 'c'
 

app/views/shared/_stream_element.mobile.haml

@@ -3,27 +3,49 @@
 -#   the COPYRIGHT file.
 
 .stream_element{:data=>{:guid=>post.id}}
-  = person_image_link(post.author, :size => :thumb_small)
+
+  .photo_area
+    - if post.is_a?(StatusMessage) && post.photos.size > 0
+      - photos = post.photos
+      .photo_attachments
+        .big_stream_photo
+          = link_to (image_tag photos.first.url(:thumb_large), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link"
+        - if photos.size > 1
+          - if photos.size >= 8
+            - for photo in photos[1..8]
+              = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
+          - else
+            - for photo in photos[1..photos.size]
+              = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
+    - elsif post.activity_streams?
+      = image_tag post.image_url
+
 
   .content
     .from
+      = person_image_link(post.author, :size => :thumb_small)
       = person_link(post.author)
+      .info
+        %span.time{:integer => post.created_at.to_i}
+          = t('ago', :time => time_ago_in_words(post.created_at))
+        %span.via
+          - if post.activity_streams?
+            = t('.via', :link => link_to("#{post.provider_display_name}", post.actor_url)).html_safe
 
-    - if post.activity_streams?
+    - if reshare?(post)
-      = image_tag post.image_url
-    - elsif reshare?(post)
       = render 'reshares/reshare', :reshare => post, :post => post.root
-    - else
+    - elsif post.is_a?(StatusMessage)
       = render 'status_messages/status_message', :post => post, :photos => post.photos
 
-    .info
+  .bottom_bar
-      %span.time{:integer => post.created_at.to_i}
+    .floater
-        = t('ago', :time => time_ago_in_words(post.created_at))
+      /= link_to "reshare"
-      %span.via
+      = link_to '', post_path(post), :class => "image_link comment_action"
-        - if post.activity_streams?
-          = t('.via', :link => link_to("#{post.provider_display_name}", post.actor_url)).html_safe
 
-      = link_to "#{t('comments', :count => post.comments.length)} →", post_path(post), :class => 'comment_link right'
+      - if current_user.liked?(post)
-      - if post.activity_streams?
+        = link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
-        %br
+      - else
+        = link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
+
+    = link_to "#{t('comments', :count => post.comments.length)}", post_path(post), :class => 'comment_link'
 

app/views/status_messages/_status_message.html.haml

@@ -0,0 +1,19 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+
+- if photos.size > 0
+  .photo_attachments
+    .big_stream_photo
+      = link_to (image_tag photos.first.url(:scaled_full), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link"
+    - if photos.size > 1
+      - if photos.size >= 8
+        - for photo in photos[1..8]
+          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
+      - else
+        - for photo in photos[1..photos.size]
+          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
+
+%div{:class => direction_for(post.text)}
+  != markdownify(post, :youtube_maps => post[:youtube_titles])

app/views/status_messages/_status_message.mobile.haml

@@ -0,0 +1,7 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+
+%div{:class => direction_for(post.text)}
+  != markdownify(post, :youtube_maps => post[:youtube_titles])

app/views/status_messages/new.mobile.haml

@@ -0,0 +1,5 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+= render :partial => 'shared/publisher', :locals => {:aspect => @aspects.first, :for_all_aspects => true, :aspect_ids => @aspect_ids, :selected_aspects => @aspects}

config/assets.yml

@@ -44,12 +44,12 @@ javascripts:
   mobile:
     - public/javascripts/vendor/jquery162.min.js
     - public/javascripts/custom-mobile-scripting.js
-    - public/javascripts/vendor/jquery.mobile-1.0b2.min.js
+    #- public/javascripts/vendor/jquery.mobile-1.0b2.min.js
-    - public/javascripts/jquery.infinitescroll-custom.js
+    #- public/javascripts/jquery.infinitescroll-custom.js
     - public/javascripts/diaspora.js
     - public/javascripts/helpers/i18n.js
-    - public/javascripts/widgets/infinite-scroll.js
+    #- public/javascripts/widgets/infinite-scroll.js
-    - public/javascripts/rails.js
+    #- public/javascripts/rails.js
     
   mailchimp:
     - public/javascripts/vendor/mailchimp/jquery.form.js
@@ -89,6 +89,7 @@ stylesheets:
     - public/stylesheets/rtl.css
 
   mobile:
-    - public/stylesheets/vendor/jquery.mobile-1.0b2.min.css
+    #- public/stylesheets/vendor/jquery.mobile-1.0b2.min.css
+    - public/stylesheets/vendor/html5-boilerplate-mobile.css
     - public/stylesheets/mobile.css
- 
+

public/javascripts/custom-mobile-scripting.js

@@ -3,6 +3,7 @@
 *   the COPYRIGHT file.
 */
 
+
 $(document).bind("mobileinit", function() {
    $.extend($.mobile, {
      ajaxLinksEnabled: false,
@@ -12,3 +13,40 @@ $(document).bind("mobileinit", function() {
    });
 	$.mobile.selectmenu.prototype.options.nativeMenu = false;
 });
+
+
+$(document).ready(function(){
+  $(".like_action.inactive").bind('tap', function(evt){
+    evt.preventDefault();
+    var target = $(this),
+        postId = target.data('post-id');
+
+    $.ajax({
+      url: '/posts/'+postId+'/likes.json',
+      type: 'POST',
+      complete: function(data){
+        target.addClass('inactive')
+              .removeClass('active')
+              .data('post-id', postId);
+      }
+    });
+  });
+
+  $(".like_action.active").bind('tap', function(evt){
+    evt.preventDefault();
+    var target = $(this),
+        postId = $(this).data('post-id'),
+        likeId = $(this).data('like-id');
+
+
+    $.ajax({
+      url: '/posts/'+postId+'/likes/'+likeId+'.json',
+      type: 'DELETE',
+      complete: function(data){
+        target.addClass('inactive')
+              .removeClass('active')
+              .data('like-id', '');
+      }
+    });
+  });
+});

public/stylesheets/sass/mobile.sass

@@ -13,14 +13,14 @@ a:not([role='button']):not(.arrow)
   :font
     :weight normal !important
   :-webkit-tap-highlight-color rgba(200, 200, 200, 1) !important
-a.ui-link-inherit
-  :font
-    :weight bold !important
-  :color #000 !important
 
-.ui-body-c a
+a
   :color #2489CE
 
+body
+  :background #555
+  :max-width 100%
+
 #landing_content
   :text-align center
 
@@ -58,7 +58,7 @@ a.ui-link-inherit
 .tapped
   :background
     :color rgba(100, 103, 103, .2)
-  :border-radius 5px
+  @include border-radius(3px)
 a
   :padding 2px
 .alpha-warning
@@ -73,14 +73,12 @@ a
 .message
   :padding
     :left 2px
+
 .stream_element,
-.comment
+.comments
   :overflow auto
   :position relative
 
-  :background
-    :color #fff
-
   *
     :max-width 100%
 
@@ -88,33 +86,31 @@ a
 
   .avatar
     :float left
-    :height 48px
+    :height 35px
-    :width 48px
+    :width 35px
+    :margin
+      :right 10px
 
   .from
     a
       :margin
         :left -2px
-      :color #000 !important
+      :color #aaa !important
       :font
         :weight bold !important
 
     :margin-bottom 2px
+    :height 45px
 
   .content
-    :padding
+    :padding 10px
-      :left 58px
+      :bottom 0
 
-  :border
+  :padding 10px 0
-    :bottom 1px solid #eee
-
-  :padding 10px
 
   .info
     :margin
-      :top 0.5em
+      :top 0
-    :font
-      :size smaller
 
   .photo_attachments
     :margin
@@ -125,11 +121,56 @@ a
       :weight normal
   p
     :margin 0 auto
-    :line-height 1.4em
+    :font-size 14px
+    :line-height 19px
 
   .black
     :color #333
-    
+
+  :margin 10px
+    :top 10px
+    :bottom 0
+  :padding 0 !important
+
+.comments
+  :color #ccc
+
+  .from
+    a
+      :color #888 !important
+
+.new_comment
+  :padding 10px
+
+.comment
+  :padding 4px 0
+  :border
+    :bottom 1px dotted #444
+
+
+.stream_element
+  @include border-radius(3px)
+  @include box-shadow(0,1px,5px,rgba(0,0,0,1))
+
+  :background
+    :color #fff
+  :border
+    :top 1px solid #000
+    :bottom 1px solid #000
+
+
+.photo_attachments
+  :position relative
+  :left 0
+  :top 0
+  :padding 0
+  :margin 0
+
+  img
+    :margin 0
+    :padding 0
+
+
 .reshare
   .content
     :padding
@@ -142,23 +183,28 @@ a
     :font
       :size 0.8em
 
-.comment
-  :padding
-    :top 12px
-    :bottom 12px
-
 #main_stream
   :font
     :size 0.95em
 
-.stream_element.person
+.from
-  .from
+  :font
-    :font
+    :size larger
-      :size larger
 
 .more-link
-  :line-height 4em
+  :display block
   :text-align center
+  :padding 0 10px
+  :margin 0 10px
+  :-webkit-box-shadow inset 0 1px 5px #111
+  :border-radius 3px
+  :background
+    :color #333
+
+  h1
+    :color #ccc
+    :padding 20px
+    :text-shadow 0 -2px 0 #000
 
 .time, .via
   :color #ccc
@@ -168,9 +214,13 @@ a
   a
     :color #ccc
 
+.comment
+  .time
+    :color #777
+
 .info
-  :font
+  :margin
-    :size smaller
+    :top -2px
 
 #show_content
   :padding 12px
@@ -216,34 +266,11 @@ ul
   :list
     :style none
 
-#author_info.show
-  :margin
-    :bottom 24px
-  a
-    :color #000
-    :font
-      :weight bold !important
-
-  img
-    :float left
-    :height 36px
-    :width 36px
-    :margin
-      :right 6px
-
-  :font
-    :size smaller
-
-  .diaspora_handle
-    :font
-      :size 14px
-    :color #999
-
 #author_info.profile
   :background
     :color #eee
   :border
-    :bottom 2px solid #ccc
+    :bottom 1px solid #000
   :height 90px
   :padding 6px
   :margin
@@ -264,18 +291,6 @@ ul
       :size small
     :color #999
 
-.comments
-  :border
-    :top 2px solid #D2DBE1
-  :background
-    :color #EDF5FB
-  :font
-    :size smaller
-
-  .comment
-    :background
-      :color #EDF5FB
-
 .stream_marker
   :background
     :color #eee
@@ -304,18 +319,6 @@ ul
   :margin
     :bottom 12px
 
-  #publisher
-    :text
-      :align center
-
-#publisher_text
-  :text
-    :align left
-  :font
-    :weight bold
-  :margin
-    :bottom 3px
-
 #aspect_title
   :padding 0 6px
     :bottom 6px
@@ -324,22 +327,18 @@ ul
   :text
     :align left
 
-#header
+header
-  @include linear-gradient(#222, #000)
+  @include linear-gradient(#444, #000)
+
+  :padding 12px 5px
 
-  :padding 11px 5px
-    :bottom 7px
   :border
     :bottom 1px solid #444
 
   .right
-    :position absolute
+    :float right
-    :top 0px
-    :padding 6px
-      :top 4px
-    :right 0
 
-#footer
+footer
   :background
     :color #ccc
   .inset
@@ -356,13 +355,63 @@ ul
     :weight bold
   :color #666
 
-#aspect_header
+.bottom_bar
-  :padding 4px 7px 
+  @include border-radius(0, 0, 3px, 3px)
-    :bottom 7px
+  :display block
+  :padding 10px
+  :background #eee
+  :margin
+    :top 10px
+  :border
+    :top 1px solid #ddd
+  :height 24px
   :font
-    :weight bold
+    :size larger
-  :text
+
-    :shadow none
+  img
+    :height 24px
+
+  a
+    :color #999 !important
+    :font-weight bold !important
+
+
+.floater
+  :float right
+
+.stream_element .photo_attachments
+  img
+    @include border-radius(3px, 3px, 0, 0)
+  a
+    :padding 0
+  :margin-top 0
+
+.photo_area
+  :text-align center
+
+.image_link
+  :display inline-block
   :background
-    :color #eee
+    :size 24px
-  :color #999
+    :repeat no-repeat
+    :position center
+  :height 16px
+  :width 24px
+  :padding 5px
+  :margin
+    :left 5px
+
+.like_action
+  :background-image url('/images/icons/heart_mobile_grey.png')
+  .active
+    :background-image url('/images/icons/heart_mobile_red.png')
+
+.comment_action
+  :background-image url('/images/icons/pencil_mobile_grey.png')
+
+form
+  :position relative
+  textarea,
+  input
+    :font
+      :size larger

public/stylesheets/sass/mobile.scss

@@ -0,0 +1,382 @@
+//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+@import "mixins";
+
+$blue: #3f8fba;
+
+a:not([role='button']):not(.arrow) {
+  text: {
+    decoration: none; };
+  font: {
+    weight: normal !important; };
+  -webkit-tap-highlight-color: rgba(200, 200, 200, 1) !important; }
+
+a {
+  color: #2489ce;
+  padding: 2px;
+}
+
+body {
+  background: #555555;
+  max-width: 100%;
+}
+
+#landing_content {
+  text-align: center;
+  .info_pane {
+    text-align: left;
+  }
+}
+
+#login_form {
+  padding: 15px;
+  padding-top: 0px;
+}
+
+#diaspora_description {
+  background: {
+    image: url("../images/ball_small.png");
+    repeat: no-repeat;
+    position: top center; };
+  padding: {
+    top: 195px; };
+  margin: {
+    top: -18px; };
+  font: {
+    size: 1.3em;
+    weight: bold; };
+  text-shadow: 0 1px 3px #999999;
+  line-height: 1.5;
+  p {
+    padding: 12px;
+    background: {
+      color: white; };
+    -webkit-box-shadow: 0 1px 3px #cccccc;
+    -moz-box-shadow: 0 1px 3px #cccccc;
+    box-shadow: 0 1px 3px #cccccc;
+  }
+}
+
+.login_form {
+  @include mobile-box;
+  padding: 10px;
+  label {
+    font-weight: bold; } }
+
+.message {
+  padding: {
+    left: 2px; };
+}
+
+.stream_element,
+.comments {
+  overflow: auto;
+  position: relative;
+  * {
+    max-width: 100%; }
+  min-height: 34px;
+  .avatar {
+    float: left;
+    height: 35px;
+    width: 35px;
+    margin: {
+      right: 10px; }; }
+  .from {
+    a {
+      margin: {
+        left: -2px; };
+      color: #aaaaaa !important;
+      font: {
+        weight: bold !important; }; }
+    margin-bottom: 2px;
+    height: 45px; }
+  .content {
+    padding: 10px {
+      bottom: 0; }; }
+  padding: 10px 0;
+  .info {
+    margin: {
+      top: 0; }; }
+  .photo_attachments {
+    margin: {
+      top: 6px; }; }
+  .time {
+    font: {
+      weight: normal; }; }
+  p {
+    margin: 0 auto;
+    font-size: 14px;
+    line-height: 19px; }
+  .black {
+    color: #333333; }
+  margin: 10px {
+    top: 10px;
+    bottom: 0; };
+  padding: 0 !important; }
+
+.comments {
+  color: #cccccc;
+  .from {
+    a {
+      color: #888888 !important; } } }
+
+.new_comment {
+  padding: 10px;
+}
+
+.comment {
+  padding: 4px 0;
+  border: {
+    bottom: 1px dotted #444444; };
+}
+
+.stream_element {
+  @include border-radius(3px);
+  @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
+  background: {
+    color: white; };
+  border: {
+    top: 1px solid black;
+    bottom: 1px solid black; }; }
+
+.photo_attachments {
+  position: relative;
+  left: 0;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  img {
+    margin: 0;
+    padding: 0; } }
+
+.reshare {
+  .content {
+    padding: {
+      left: 15px;
+      top: 10px; };
+    .from {
+      font: {
+        style: italic; }; } }
+  .reshare_action {
+    font: {
+      size: 0.8em; }; } }
+
+#main_stream {
+  font: {
+    size: 0.95em; }; }
+
+.from {
+  font: {
+    size: larger; }; }
+
+.more-link {
+  display: block;
+  text-align: center;
+  padding: 0 10px;
+  margin: 0 10px;
+  -webkit-box-shadow: inset 0 1px 5px #111111;
+  border-radius: 3px;
+  background: {
+    color: #333333; };
+  h1 {
+    color: #cccccc;
+    padding: 20px;
+    text-shadow: 0 -2px 0 black; } }
+
+.time, .via {
+  color: #cccccc;
+  font: {
+    size: smaller;
+    weight: bold; };
+  a {
+    color: #cccccc; } }
+
+.comment {
+  .time {
+    color: #777777; } }
+
+.info {
+  margin: {
+    top: -2px; }; }
+
+#show_content {
+  padding: 12px {
+    bottom: 24px; };
+  border: {
+    bottom: 1px solid #bbbbbb; };
+  background: {
+    color: white; };
+  font: {
+    size: larger; };
+  img {
+    max-width: 100%; }
+  .photo {
+    text-align: center; }
+  .controls {
+    font: {
+      size: smaller; }; }
+  &.photo {
+    background: {
+      color: black; }; } }
+
+#photo_controls {
+  margin: {
+    bottom: -42px; }; }
+
+.arrow {
+  color: white !important;
+  font: {
+    size: 26pt; };
+  text: {
+    shadow: 0 1px 2px #333333;
+    decoration: none; };
+  padding: 0; }
+
+ul {
+  margin: 0;
+  padding: 0;
+  list: {
+    style: none; }; }
+
+#author_info.profile {
+  background: {
+    color: #eeeeee; };
+  border: {
+    bottom: 1px solid black; };
+  height: 90px;
+  padding: 6px;
+  margin: {
+    bottom: 6px; };
+  img {
+    float: left;
+    height: 90px;
+    width: 90px; }
+  .content {
+    padding: {
+      left: 100px; }; }
+  .description {
+    font: {
+      weight: normal;
+      size: small; };
+    color: #999999; } }
+
+.stream_marker {
+  background: {
+    color: #eeeeee; };
+  border: {
+    bottom: 1px solid #aaaaaa;
+    top: 1px solid #cccccc; };
+  font: {
+    weight: bold;
+    size: smaller; };
+  color: #666666;
+  padding: 3px 6px; }
+
+.right {
+  float: right; }
+
+.hidden {
+  display: none; }
+
+.grey_back {
+  background: {
+    color: #eeeeee; };
+  border: {
+    bottom: 1px solid #999999; };
+  padding: 8px {
+    top: 3px; };
+  margin: {
+    bottom: 12px; }; }
+
+#aspect_title {
+  padding: 0 6px {
+    bottom: 6px; };
+  font: {
+    weight: bold; };
+  text: {
+    align: left; }; }
+
+header {
+  @include linear-gradient(#444444, black);
+  padding: 12px 5px;
+  border: {
+    bottom: 1px solid #444444; };
+  .right {
+    float: right; } }
+
+footer {
+  background: {
+    color: #cccccc; };
+  .inset {
+    padding: 10px; } }
+
+.notification_day_header {
+  padding: 6px;
+  background: {
+    color: #eeeeee; };
+  border: {
+    top: 1px solid #dddddd;
+    bottom: 1px solid #cccccc; };
+  font: {
+    weight: bold; };
+  color: #666666; }
+
+.bottom_bar {
+  @include border-radius(0, 0, 3px, 3px);
+  display: block;
+  padding: 10px;
+  background: #eeeeee;
+  margin: {
+    top: 10px; };
+  border: {
+    top: 1px solid #dddddd; };
+  height: 24px;
+  font: {
+    size: larger; };
+  img {
+    height: 24px; }
+  a {
+    color: #999999 !important;
+    font-weight: bold !important; } }
+
+.floater {
+  float: right; }
+
+.stream_element .photo_attachments {
+  img {
+    @include border-radius(3px, 3px, 0, 0); }
+  a {
+    padding: 0; }
+  margin-top: 0; }
+
+.photo_area {
+  text-align: center; }
+
+.image_link {
+  display: inline-block;
+  background: {
+    size: 24px;
+    repeat: no-repeat;
+    position: center; };
+  height: 16px;
+  width: 24px;
+  padding: 5px;
+  margin: {
+    left: 5px; }; }
+
+.like_action {
+  background-image: url("/images/icons/heart_mobile_grey.png");
+  .active {
+    background-image: url("/images/icons/heart_mobile_red.png"); } }
+
+.comment_action {
+  background-image: url("/images/icons/pencil_mobile_grey.png"); }
+
+form {
+  position: relative;
+  textarea,
+  input {
+    font: {
+      size: larger; }; } }

public/stylesheets/vendor/html5-boilerplate-mobile.css

@@ -0,0 +1,315 @@
+/*
+ * HTML5 ✰ Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ * 2. Correct inner spacing displayed oddly in IE6/7
+ */
+
+button, input { line-height: normal; *overflow: visible; }
+
+/*
+ * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+ */
+
+table button, table input { *overflow: auto; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style
+ */
+
+
+/* Styles for desktop and large screen ----------- */
+
+/*styles for 800px and up!*/
+@media only screen and (min-width: 800px) {
+  /* Styles */
+}/*/mediaquery*/
+
+
+/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
+@media
+only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3/2),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  /* Styles */
+}
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* prevent callout */
+.nocallout {-webkit-touch-callout: none;}
+
+/* Text overflow with ellipsis */
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* A hack for HTML5 contenteditable attribute on mobile */
+textarea[contenteditable] {-webkit-appearance: none;}
+
+/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
+.gifhidden {position: absolute; left: -100%;}
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}