Add photos with author initials

southbridgeio · Apr 3, 2016 · 840c44f · 840c44f
1 parent 1a18af9
commit 840c44f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/app/models/telegram_message.rb b/app/models/telegram_message.rb
@@ -20,5 +20,8 @@ def author_name
     full_name.present? ? full_name : from_username
   end
 
+  def author_initials
+    [from_first_name.first, from_last_name.first].join
+  end
 
 end
diff --git a/app/views/telegram_messages/_message.html.erb b/app/views/telegram_messages/_message.html.erb
@@ -1,6 +1,11 @@
 <div class="telegram-message" data-sent-at=<%= message.sent_at.to_i %>>
   <%= check_box_tag 'telegram_message_ids[]', message.id %>
   <time><%= format_time message.sent_at, false %></time>
+  <div class="telegram-author-photo">
+    <span>
+      <%= message.author_initials %>
+    </span>
+  </div>
   <div class="telegram-message-body">
     <span class="telegram-message-author"><%= message.author_name %></span>
     <div class="telegram-message-text">

diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -14,7 +14,7 @@
 
 
 .telegram-message{
-  margin: 10px;
+  padding: 15px 0px;
 }
 
 .telegram-message time{
@@ -42,9 +42,29 @@
 }
 
 .telegram-message-text{
-  word-wrap: break-word;
   line-height: 150%;
-  white-space: pre-wrap;
+}
+
+.telegram-author-photo{
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 15px 0 0;
+  float: left;
+}
+
+.telegram-author-photo span{
+  line-height: 42px;
+  display: block;
+  color: #fff;
+  text-align: center;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: #80d066;
 }
 
 .message-date{