Improve mobile conversation design

app/assets/stylesheets/mobile/conversations.scss

@@ -0,0 +1,58 @@
+.conversation {
+
+  .conversation_participants {
+    padding: 1rem 1.2rem;
+
+    h3 {
+      margin: 0px;
+    }
+
+    .delete_conversation {
+      font-size: 2rem;
+
+      .entypo {
+        color: $link-grey;
+      }
+    }
+
+    .avatars {
+      margin: 0 -0.15rem;
+      .avatar {
+        margin: 0.15rem;
+        float: left;
+
+        img {
+          height: 50px;
+          width: 50px;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .stream .stream_element .timeago,
+  .conversation_participants .last_message_timeago {
+    display: block;
+    font-style: italic;
+    color: $text-grey;
+  }
+
+  .stream .stream_element {
+    padding: 0.5rem;
+    
+    .ltr {
+      padding-left: 0px;
+    }
+  }
+}
+
+.conversations {
+  img.avatar {
+    margin: 10px;
+    float: left;
+  }
+  .no-messages {
+    text-align: center;
+    margin-top: 40px;
+  }
+}

app/assets/stylesheets/mobile/mobile.scss

@@ -8,6 +8,7 @@
 
 @import "header";
 @import "mobile/tags";
+@import "mobile/conversations";
 
 a {
   color: #2489ce;
@@ -292,12 +293,15 @@ h3 {  margin-top: 0; }
   right: 5%;
 }
 
-#author_info {
+.header-full-width {
   margin: -10px;
-  margin-bottom: 10px;
+  margin-bottom: 1.5rem;
   padding-top: 5px;
   background-color: #fff;
   border-bottom: 1px solid #aaa;
+}
+
+#author_info {
   word-wrap: break-word;
 
   img {
@@ -629,23 +633,6 @@ select {
 
 }
 
-.conversation_participants img.avatar {
-  height:35px;
-  width:35px;
-  margin: 5px 0 5px 2px;
-}
-
-.conversations {
-  img.avatar {
-    margin: 10px;
-    float: left;
-  }
-  .no-messages {
-    text-align: center;
-    margin-top: 40px;
-  }
-}
-
 .unread_message_count {
   border-radius: 2px 2px 2px 2px;
   float: right;

app/views/conversations/_show.mobile.haml

@@ -2,16 +2,21 @@
 -# licensed under the Affero General Public License version 3 or later. See
 -# the COPYRIGHT file.
 
-.conversation_participants
-  .right
-    = link_to(raw("<i class='entypo trash'></i>"), conversation_visibility_path(conversation),
-            method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove")
+.conversation
+  .conversation_participants.header-full-width
+    .delete_conversation.pull-right
+      = link_to(raw("<i class='entypo trash'></i>"), conversation_visibility_path(conversation),
+              method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove")
 
-  %h3{ class: direction_for(conversation.subject) }
-    = conversation.subject
+    %h3
+      = conversation.subject
+    .last_message_timeago
+      != t('.last_message', timeago: timeago(conversation.updated_at))
 
-  - for participant in conversation.participants
-    = person_image_link(participant, size: :thumb_small)
+    .avatars
+      - for participant in conversation.participants
+        .avatar
+          = person_image_link(participant, size: :thumb_small)
+    .clear
 
-.span-15.last
   = render partial: 'messages', locals: { conversation: conversation }

app/views/people/show.mobile.haml

@@ -2,7 +2,7 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-#author_info
+#author_info.header-full-width
   = person_image_tag @person, :thumb_medium
   .content
     %h2

config/locales/diaspora/en.yml

@@ -346,6 +346,7 @@ en:
       replying: "Replying..."
       hide: "Hide and mute conversation"
       delete: "Delete conversation"
+      last_message: "Last message received %{timeago}"
     new:
       to: "To"
       subject: "Subject"