Use media objects for mobile posts/comments/notifications

app/assets/stylesheets/mobile/mobile.scss

@@ -9,12 +9,6 @@
 @import "header";
 @import "mobile/tags";
 
-.col-xs-1{
-  width: 50px;
-  padding-right: 0;
-}
-.col-xs-11{ width: calc(100% - 50px); }
-
 a {
   color: #2489ce;
   text-decoration: none;
@@ -162,6 +156,8 @@ h3 {  margin-top: 0; }
   padding-top: 10px;
 }
 
+.stream_element .media { padding: 0; }
+
 .photo_attachments {
   position: relative;
   left: 0;

app/views/comments/_comment.mobile.haml

@@ -4,9 +4,10 @@
 
 %li.comment{data:{guid:comment.id}, class: ("hidden" if(defined? hidden))}
   .content
-    .col-xs-1
-      = person_image_link(comment.author, size: :thumb_small)
-    .col-xs-11
+    .media
+      .media-left
+        = person_image_link(comment.author, size: :thumb_small, class: "media-object")
+      .media-body
         .from.pull-left
           = person_link(comment.author)
           .info
@@ -17,7 +18,6 @@
             - if user_signed_in? && comment.author == current_user.person
               = link_to(raw("<i class='entypo trash'></i>"), comment_path(comment), method: :delete,
                           data: { confirm: "#{t('are_you_sure')}" }, class: "remove")
-    .clearfix
 
     %div{class: direction_for(comment.text)}
       = comment.message.markdownified

app/views/notifications/index.mobile.haml

@@ -16,10 +16,10 @@
         %ul.notifications_for_day
           - notes.each do |note|
             .stream_element{:data=>{guid: note.id}, class: "#{note.unread ? 'unread' : 'read'}"}
-              .content.from
-                .col-xs-1
-                  = person_image_link(note.actors.last,  size: :thumb_small)
-                .col-xs-11
+              .content.from.media
+                .media-left
+                  = person_image_link(note.actors.last,  size: :thumb_small, class: "media-object")
+                .media-body
                   = notification_message_for(note)
                   .time_notif
                     = timeago(note.created_at)

app/views/shared/_post_info.mobile.haml

@@ -2,10 +2,10 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.from
-  .col-xs-1
-    = person_image_link(post.author, size: :thumb_small)
-  .col-xs-11
+.from.media
+  .media-left
+    = person_image_link(post.author, size: :thumb_small, class: "media-object")
+  .media-body
     .pull-left
       = person_link(post.author)