render messages nicer

app/assets/stylesheets/junto.css.erb

@@ -271,7 +271,7 @@
 }
 .chat-box .chat-messages {
   width: 100%;
-  padding: 16px 0px 0px 0px;
+  padding: 16px 0px;
   overflow-y: auto;
   flex-grow: 1;
 }
@@ -296,7 +296,7 @@
   text-decoration: underline;
 }
 .chat-box .chat-messages .chat-message .chat-message-user {
-  width: 15%;
+  width: 12%;
   float: left;
   overflow: hidden;
   color: #BBB;
@@ -304,20 +304,25 @@
 }
 .chat-box .chat-messages .chat-message .chat-message-user img {
   border: 2px solid #424242;
-  width: 32px;
-  height: 32px;
-  border-radius: 18px;
+  width: 26px;
+  height: 26px;
+  border-radius: 14px;
+}
+.chat-box .chat-messages .chat-message .chat-message-meta {
+  padding: 0 8px;
+  float: left;
+}
+.chat-box .chat-messages .chat-message .chat-message-username {
+  color: #4fc059;
 }
 .chat-box .chat-messages .chat-message .chat-message-text {
-  width: 73%;
+  width: 80%;
   float: left;
-  margin-top: 12px;
   padding: 2px 8px 0;
   text-align: left;
   word-wrap: break-word;
 }
 .chat-box .chat-messages .chat-message .chat-message-time {
-  float: right;
   font-size: 10px;
   color: #757575;
 }

frontend/src/components/MapChat/Message.js

@@ -18,15 +18,18 @@ function formatDate(created_at) {
 }
 
 const Message = props => {
-  const { user_image, user_name, message, created_at } = props
+  const { user_image, user_name, message, created_at, heading } = props
   const messageHtml = {__html: linker.link(message)}
   return (
     <div className="chat-message">
       <div className="chat-message-user">
-        <img src={user_image} title={user_name} />
+        {heading && <img src={user_image} />}
       </div>
+      {heading && <div className="chat-message-meta">
+        <span className='chat-message-username'>{user_name}</span>&nbsp;
+        <span className='chat-message-time'>{formatDate(created_at)}</span>
+      </div>}
       <div className="chat-message-text" dangerouslySetInnerHTML={messageHtml}></div>
-      <div className="chat-message-time">{formatDate(created_at)}</div>
       <div className="clearfloat"></div>
     </div>
   )

frontend/src/components/MapChat/index.js

@@ -3,6 +3,22 @@ import Unread from './Unread'
 import Participant from './Participant'
 import Message from './Message'
 
+function makeList(messages) {
+  let currentHeader
+  return messages ? messages.map(m => {
+    let heading = false
+    if (!currentHeader) {
+      heading = true
+      currentHeader = m
+    } else {
+      // not same user or time diff of greater than 3 minutes
+      heading = m.user_id !== currentHeader.user_id || Math.floor(Math.abs(new Date(currentHeader.created_at) - new Date(m.created_at)) / 60000) > 3
+      currentHeader = heading ? m : currentHeader
+    }
+    return <Message {...m} key={m.id} heading={heading}/>
+  }) : null
+}
+
 class MapChat extends Component {
   constructor(props) {
     super(props)
@@ -125,7 +141,7 @@ class MapChat extends Component {
           <Unread count={unreadMessages} />
         </div>
         <div className="chat-messages" ref={div => this.messagesDiv = div}>
-          {messages.map(message => <Message key={message.id} {...message} />)}
+          {makeList(messages)}
         </div>
         <textarea className="chat-input"
           ref={textarea => this.messageInput = textarea}