From 827cd50849bec9efd9ec2302447ee29c0f13ec43 Mon Sep 17 00:00:00 2001
From: Allen Rabinovich <allenr@zulip.com>
Date: Mon, 6 Jan 2014 10:01:21 -0700
Subject: [PATCH] Fix invisible unread marker issue

(imported from commit a1cc8465758b7e9daf110a32038feeeef0427715)
---
 static/styles/zulip.css             | 13 +++++++++----
 static/templates/message.handlebars |  3 +--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 7dd23b446f..1eed6be781 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -968,18 +968,19 @@ just a temporary hack.
     position: relative;
 }
 
-.messagebox .unread_marker {
+.unread_marker {
     display: block;
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 16px;
     background: #2b8213;
-    left: -31px;
-    margin-top: 6px;
-    opacity: 0;
+    left: -16px;
+    top: 50%;
+    margin-top: -6px;
     box-shadow: inset 1px 1px 1px -1px #000;
     border: 1px solid #fff;
+    opacity: 0;
 }
 
 .messagebox .unread_marker.slow_fade {
@@ -1163,6 +1164,10 @@ div.message_table {
     width: 100%;
 }
 
+.message_row {
+    position: relative;
+}
+
 table.compose_table {
     table-layout: fixed;
     margin-left: auto;
diff --git a/static/templates/message.handlebars b/static/templates/message.handlebars
index eac41e954f..33552a036e 100644
--- a/static/templates/message.handlebars
+++ b/static/templates/message.handlebars
@@ -168,13 +168,12 @@
 {{/include_recipient}}
 <div zid="{{id}}" id="{{dom_id}}"
     class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row">
-
+    <div class="unread_marker"></div>
     <div class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
       <div class="messagebox-border" style="box-shadow:inset 9px 0px {{background_color}};">
         <div class="messagebox-content">
           <span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
           <div class="message_top_line">
-            <div class="unread_marker"></div>
             {{#include_sender}}
             <span class="message_sender{{^status_message}} sender_info_hover{{/status_message}}">
               {{! See ../js/notifications.js for another user of avatar_url. }}