emails: improved styling, and fixed problems with some email clients

- fixes  #5620

rhodecode/apps/debug_style/views.py

@@ -187,6 +187,7 b' Check if we should use full-topic or min'
 I think something like this would be better
 
 ```py
+// markdown renderer
 
 def db():
    global connection
@@ -226,10 +227,26 b' def db():'
                 'comment_body': '''
 I like this !
 
-But please check this code::
-    
-    def main():
-        print 'ok'
+But please check this code
+
+.. code-block:: javascript
+
+  // THIS IS RST CODE
+
+  this.createResolutionComment = function(commentId) {
+    // hide the trigger text
+    $('#resolve-comment-{0}'.format(commentId)).hide();
+
+    var comment = $('#comment-'+commentId);
+    var commentData = comment.data();
+    if (commentData.commentInline) {
+        this.createComment(comment, commentId)
+    } else {
+        Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
+    }
+
+    return false;
+  };
 
 This should work better !
                 ''',

rhodecode/templates/email_templates/base.mako

@@ -101,6 +101,7 b' text_monospace = "\'Menlo\', \'Liberation M'
             margin: 0;
             padding: 0;
             font-family: ${text_regular|n};
+            color: #000000;
         }
 
         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
@@ -211,6 +212,20 b' text_monospace = "\'Menlo\', \'Liberation M'
 
         code {
             font-family: ${text_monospace|n};
+            white-space: pre-line !important;
+            color: #000000;
+        }
+
+        ul.changes-ul {
+            list-style: none;
+            list-style-type: none;
+            padding: 0;
+            margin: 10px 0;
+        }
+        ul.changes-ul li {
+            list-style: none;
+            list-style-type: none;
+            margin: 2px 0;
         }
 
         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
@@ -237,13 +252,19 b' text_monospace = "\'Menlo\', \'Liberation M'
             padding: 3px 5px 3px
         }
 
-        div.markdown-block h1, div.markdown-block h2, div.markdown-block h3, div.markdown-block h4, div.markdown-block h5, div.markdown-block h6 {
+        div.markdown-block h1,
+        div.markdown-block h2,
+        div.markdown-block h3,
+        div.markdown-block h4,
+        div.markdown-block h5,
+        div.markdown-block h6 {
             border-bottom: none !important;
             padding: 0 !important;
             overflow: visible !important
         }
 
-        div.markdown-block h1, div.markdown-block h2 {
+        div.markdown-block h1,
+        div.markdown-block h2 {
             border-bottom: 1px #e6e5e5 solid !important
         }
 
@@ -290,7 +311,13 b' text_monospace = "\'Menlo\', \'Liberation M'
             margin-bottom: 13px
         }
 
-        div.markdown-block ol, div.markdown-block ul, div.markdown-block p, div.markdown-block blockquote, div.markdown-block dl, div.markdown-block li, div.markdown-block table {
+        div.markdown-block ol,
+        div.markdown-block ul,
+        div.markdown-block p,
+        div.markdown-block blockquote,
+        div.markdown-block dl,
+        div.markdown-block li,
+        div.markdown-block table {
             margin: 3px 0 13px 0 !important;
             color: #424242 !important;
             font-size: 13px !important;
@@ -371,27 +398,30 b' text_monospace = "\'Menlo\', \'Liberation M'
             background-color: #eeeeee
         }
 
-        div.markdown-block code, div.markdown-block pre, div.markdown-block #ws, div.markdown-block #message {
+        div.markdown-block code,
+        div.markdown-block pre,
+        div.markdown-block #ws,
+        div.markdown-block #message {
             font-family: ${text_monospace|n};
             font-size: 11px;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
-            background-color: white;
+            background-color: #FFFFFF;
             color: #7E7F7F
         }
 
         div.markdown-block code {
-            border: 1px solid #eeeeee;
+            border: 1px solid #7E7F7F;
             margin: 0 2px;
             padding: 0 5px
         }
 
         div.markdown-block pre {
-            border: 1px solid #dbd9da;
+            border: 1px solid #7E7F7F;
             overflow: auto;
             padding: .5em;
-            background-color: #F5F5F5
+            background-color: #FFFFFF;
         }
 
         div.markdown-block pre > code {
@@ -411,7 +441,12 b' text_monospace = "\'Menlo\', \'Liberation M'
             font-weight: normal
         }
 
-        div.rst-block h1, div.rst-block h2, div.rst-block h3, div.rst-block h4, div.rst-block h5, div.rst-block h6 {
+        div.rst-block h1,
+        div.rst-block h2,
+        div.rst-block h3,
+        div.rst-block h4,
+        div.rst-block h5,
+        div.rst-block h6 {
             border-bottom: 0 !important;
             margin: 0 !important;
             padding: 0 !important;
@@ -461,7 +496,7 b' text_monospace = "\'Menlo\', \'Liberation M'
             background-color: ghostWhite !important;
             color: #444 !important;
             padding: 0 .2em !important;
-            border: 1px solid #dedede !important
+            border: 1px solid #7E7F7F !important
         }
 
         div.rst-block pre code {
@@ -474,20 +509,24 b' text_monospace = "\'Menlo\', \'Liberation M'
         div.rst-block pre {
             margin: 1em 0;
             padding: 15px;
-            border: 1px solid #eeeeee;
+            border: 1px solid #7E7F7F;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             overflow: auto;
             font-size: 12px;
             color: #444;
-            background-color: #F5F5F5
+            background-color: #FFFFFF;
+        }
+
+        .clear-both {
+            clear:both;
         }
 
         /*elasticmatch is custom rhodecode tag*/
         .codehilite .c-ElasticMatch {
-                background-color: #faffa6;
-                padding: 0.2em;
+            background-color: #faffa6;
+            padding: 0.2em;
         }
 
         .codehilite .c-ElasticMatch { background-color: #faffa6; padding: 0.2em;}
@@ -581,7 +620,7 b' text_monospace = "\'Menlo\', \'Liberation M'
                         </a>
                     </td>
                 </tr>
-                <tr>
+                <tr style="background-color: #fff">
                     <td style="padding:15px;" valign="top">${self.body()}</td>
                 </tr>
             </table>

rhodecode/templates/email_templates/commit_comment.mako

@@ -89,12 +89,13 b' data = {'
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('left a')}
                 <a href="${commit_comment_url}" style="${base.link_css()}">
@@ -107,13 +108,14 b' data = {'
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Commit')} <code>${data['commit_id']}</code> ${_('of repository')}: ${data['repo_name']}
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
 
     ## spacing def

rhodecode/templates/email_templates/pull_request_comment.mako

@@ -110,12 +110,13 b' data = {'
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('left a')}
                 <a href="${pr_comment_url}" style="${base.link_css()}">
@@ -128,13 +129,14 b' data = {'
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
 
     ## spacing def

rhodecode/templates/email_templates/pull_request_review.mako

@@ -72,13 +72,13 b' data = {'
     'target_repo_url': h.link_to(pull_request_target_repo.repo_name, pull_request_target_repo_url),
 }
 %>
-
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('requested a')}
                 <a href="${pull_request_url}" style="${base.link_css()}">
@@ -87,13 +87,14 b' data = {'
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>

rhodecode/templates/email_templates/pull_request_update.mako

@@ -85,12 +85,13 b' data = {'
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(updating_user.username)}</span>
                 ${_('updated')}
                 <a href="${pull_request_url}" style="${base.link_css()}">
@@ -99,13 +100,14 b' data = {'
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>
@@ -137,27 +139,31 b' data = {'
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Changes')}:</td>
-        <td style="white-space:pre-line">\
+        <td>
             <strong>Changed commits:</strong>
-
-             - Added: ${len(added_commits)}
-             - Removed: ${len(removed_commits)}
+            <ul class="changes-ul">
+                <li>- Added: ${len(added_commits)}</li>
+                <li>- Removed: ${len(removed_commits)}</li>
+            </ul>
 
             <strong>Changed files:</strong>
+            <ul class="changes-ul">
 
             %if not changed_files:
-             No file changes found
+                <li>No file changes found</li>
             %else:
-            %for file_name in added_files:
-             - A <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
-            %endfor
-            %for file_name in modified_files:
-             - M <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
-            %endfor
-            %for file_name in removed_files:
-             - R <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
-            %endfor
+                %for file_name in added_files:
+                 <li>- A <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
+                %endfor
+                %for file_name in modified_files:
+                 <li>-  M <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
+                %endfor
+                %for file_name in removed_files:
+                 <li>-  R <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
+                %endfor
             %endif
+
+            </ul>
         </td>
     </tr>
 

rhodecode/templates/email_templates/user_registration.mako

@@ -19,7 +19,7 b' A new user `${user.username}` has regist'
 ${self.plaintext_footer()}
 </%def>
 
-
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
@@ -31,7 +31,8 b' A new user `${user.username}` has regist'
     </td>
     </tr>
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>