From 44a12e74b11f81da690d9ad7f5f02656349f7a0d Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Mon, 8 Jun 2015 22:30:48 +0200
Subject: [PATCH] Improve mobile conversation design

---
 .../stylesheets/mobile/conversations.scss     | 58 +++++++++++++++++++
 app/assets/stylesheets/mobile/mobile.scss     | 25 ++------
 app/views/conversations/_show.mobile.haml     | 23 +++++---
 app/views/people/show.mobile.haml             |  2 +-
 config/locales/diaspora/en.yml                |  1 +
 5 files changed, 80 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/stylesheets/mobile/conversations.scss

diff --git a/app/assets/stylesheets/mobile/conversations.scss b/app/assets/stylesheets/mobile/conversations.scss
new file mode 100644
index 0000000000..555ea296ff
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 81adb2b122..3a65e10227 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/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;
diff --git a/app/views/conversations/_show.mobile.haml b/app/views/conversations/_show.mobile.haml
index 1a8eb0c80e..a4feb00b77 100644
--- a/app/views/conversations/_show.mobile.haml
+++ b/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 }
diff --git a/app/views/people/show.mobile.haml b/app/views/people/show.mobile.haml
index 345394225c..11b914cb5e 100644
--- a/app/views/people/show.mobile.haml
+++ b/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
diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml
index 1b69bbf35c..28fb31ad60 100644
--- a/config/locales/diaspora/en.yml
+++ b/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"
-- 
GitLab