touched up login page wip

app/controllers/comments_controller.rb

@@ -6,7 +6,7 @@ class CommentsController < ApplicationController
   include ApplicationHelper
   before_filter :authenticate_user!
 
-  respond_to :html, :mobile, :only => [:create, :destroy]
+  respond_to :html, :mobile, :only => [:create, :destroy, :index]
   respond_to :js, :only => [:index]
 
   rescue_from ActiveRecord::RecordNotFound do

app/views/sessions/new.mobile.haml

@@ -2,20 +2,27 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-#login_form
-  = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
-    %div{:data => {:role => 'fieldcontain'}}
-      = f.label :username , t('username')
-      = f.text_field :username
-      %p.user_network
-        ="@#{AppConfig[:pod_uri].host}"
-    
-      = f.label :password , t('password')
-      = f.password_field :password
-    = f.submit t('devise.sessions.new.sign_in')
-    - if devise_mapping.rememberable?
-      = f.check_box :remember_me
-      = f.label :remember_me, t('devise.sessions.new.remember_me')
+.stream
+  #login_form
+    .login-container
+      %h2
+        Log in
+      = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
+        .row
+          .row
+            = f.label :username, t('username')
+          .centered
+            = f.text_field :username
+        .row
+          .row
+            = f.label :password , t('password')
+          .centered
+            = f.password_field :password
+        .row
+          = f.submit t('devise.sessions.new.sign_in'), :class => 'login-submit'
+          - if devise_mapping.recoverable? && controller_name != 'passwords'
+            = link_to "Forgot password?", new_password_path(resource_name)
 
-  %p
-    = render :partial => "devise/shared/links"
+%footer
+  - if !AppConfig[:registrations_closed] && devise_mapping.registerable? && controller_name != 'registrations'
+    = link_to t('.sign_up'), new_registration_path(resource_name)

app/views/shared/_stream_element.mobile.haml

@@ -8,14 +8,7 @@
     - if post.is_a?(StatusMessage) && post.photos.size > 0
       - photos = post.photos
       .photo_attachments
-        = link_to (image_tag photos.first.url(:thumb_large), :class => "stream-photo big-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'
+        = image_tag photos.first.url(:thumb_large), :class => "stream-photo big-stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url
     - elsif post.activity_streams?
       = image_tag post.image_url
 
@@ -46,9 +39,9 @@
         .like_count.tab
           = post.likes.size
           - if current_user.liked?(post)
-            = link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
+            = link_to '', post_likes_path(post.id), :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
           - else
-            = link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
+            = link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
 
         /.reshare_count.tab
         /  = post.comments.size
@@ -62,9 +55,9 @@
         = link_to '', post_path(post), :class => "image_link comment_action"
 
         - if current_user.liked?(post)
-          = link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
+          = link_to '', post_like_path(post.id, current_user.like_for(post).id), :class => "image_link like_action active"
         - else
-          = link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
+          = link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
 
-      = link_to "#{t('reactions', :count => (post.comments.length + post.likes_count))}", post_path(post), :class => 'comment_link'
+      = link_to "#{t('reactions', :count => (post.comments.length + post.likes_count))}", post_comments_path(post), :class => 'show_comments'
 

public/javascripts/mobile.js

@@ -1,18 +1,18 @@
 $(document).ready(function(){
   $(".like_action.inactive").live('tap click', function(evt){
     evt.preventDefault();
-    var target = $(this),
-        postId = target.data('post-id');
+    var link = $(this);
 
     $.ajax({
-      url: '/posts/'+postId+'/likes.json',
+      url: link.attr("href"),
+      dataType: 'json',
       type: 'POST',
       beforeSend: function(){
-        target.removeClass('inactive')
+        link.removeClass('inactive')
               .addClass('loading');
       },
       complete: function(data){
-        target.removeClass('loading')
+        link.removeClass('loading')
               .removeClass('inactive')
               .addClass('active')
               .data('post-id', postId);
@@ -22,25 +22,38 @@ $(document).ready(function(){
 
   $(".like_action.active").live('tap click', function(evt){
     evt.preventDefault();
-    var target = $(this),
-        postId = $(this).data('post-id'),
-        likeId = $(this).data('like-id');
-
+    var link = $(this);
 
     $.ajax({
-      url: '/posts/'+postId+'/likes/'+likeId+'.json',
+      url: link.attr("href"),
+      dataType: 'json',
       type: 'DELETE',
       beforeSend: function(){
-        target.removeClass('active')
+        link.removeClass('active')
               .addClass('loading')
               .fadeIn(50);
       },
       complete: function(data){
-        target.removeClass('loading')
+        link.removeClass('loading')
               .removeClass('active')
               .addClass('inactive')
               .data('like-id', '');
       }
     });
   });
+
+
+  $("a.show_comments").live('tap click', function(evt){
+    evt.preventDefault();
+    var postId = $(this).data('post-id');
+        parent = $(this).closest(".bottom_bar").first();
+    var link = $(this);
+
+    $.ajax({
+      url: link.attr('href'),
+      success: function(data){
+        parent.append(data);
+      }
+    });
+  });
 });

public/stylesheets/sass/mobile.scss

@@ -6,16 +6,10 @@
 
 $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;
+  text: {
+    decoration: none; };
 }
 
 body {
@@ -24,17 +18,6 @@ body {
   margin-top: 55px;
 }
 
-#login_form {
-  padding: 15px;
-  padding-top: 0px;
-}
-
-.login_form {
-  @include mobile-box;
-  padding: 10px;
-  label {
-    font-weight: bold; } }
-
 .message {
   padding: {
     left: 2px; };
@@ -112,6 +95,46 @@ body {
     bottom: 1px dotted #ccc; };
 }
 
+#login_form {
+  @include border-radius(3px);
+  @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
+  padding: 0;
+  background: {
+    color: #fff;
+  }
+
+  margin: auto 20px;
+
+  .login-container {
+    padding: 10px;
+  }
+
+  .row {
+    margin-bottom: 10px;
+    .login-submit {
+      float: right;
+    }
+  }
+
+  .centered{
+    text-align: center;
+  }
+
+  label {
+    color: #ccc;
+    font-size: larger;
+    font-weight: bold;
+  }
+
+  input[type='text'],
+  input[type='password'] {
+    font-size: 18px;
+    font-weight: bold;
+    max-width:90%;
+
+  }
+}
+
 .stream_element {
   @include border-radius(3px);
   @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
@@ -236,6 +259,7 @@ footer {
     color: #999;
   }
   padding: {
+    top: 10px;
     bottom: 10px;
   }
 }
@@ -328,13 +352,6 @@ footer {
 .comment_action {
   background-image: url("/images/icons/pencil_mobile_grey.png"); }
 
-form {
-  position: relative;
-  textarea,
-  input {
-    font: {
-      size: larger; }; } }
-
 .compose_icon {
   position: absolute;
   top: 6px;
@@ -352,3 +369,9 @@ form {
     left: 0;
   }
 }
+
+form {
+  input {
+    -webkit-appearance: none;
+  }
+}