Merge pull request #6087 from Flaburgan/improve-mobile-conversation-design

Improve mobile conversation design

Changelog.md

@@ -32,6 +32,7 @@ bind to an UNIX socket at `unix:tmp/diaspora.sock`. Please change your local
 * Port to Bootstrap 3 [#6015](https://github.com/diaspora/diaspora/pull/6015)
 * Use a fixed width for the mobile drawer [#6057](https://github.com/diaspora/diaspora/pull/6057)
 * Replace jquery.autoresize with autosize [#6104](https://github.com/diaspora/diaspora/pull/6104)
+* Improve mobile conversation design [#6087](https://github.com/diaspora/diaspora/pull/6087)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

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
+.conversation
-  .right
+  .conversation_participants.header-full-width
-    = link_to(raw("<i class='entypo trash'></i>"), conversation_visibility_path(conversation),
+    .delete_conversation.pull-right
-            method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove")
+      = 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) }
+    %h3
-    = conversation.subject
+      = conversation.subject
+    .last_message_timeago
+      != t('.last_message', timeago: timeago(conversation.updated_at))
 
-  - for participant in conversation.participants
+    .avatars
-    = person_image_link(participant, size: :thumb_small)
+      - 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"