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

- fixes #5620
This commit is contained in:
Marcin Lulek 2020-06-09 11:19:46 +02:00
parent 06d1413c59
commit c796175f60
7 changed files with 120 additions and 52 deletions

View file

@ -187,6 +187,7 @@ Check if we should use full-topic or mini-topic.
I think something like this would be better
```py
// markdown renderer
def db():
global connection
@ -226,10 +227,26 @@ 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 !
''',

View file

@ -101,6 +101,7 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
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 @@ ${self.plaintext_footer()}
</a>
</td>
</tr>
<tr>
<tr style="background-color: #fff">
<td style="padding:15px;" valign="top">${self.body()}</td>
</tr>
</table>

View file

@ -89,12 +89,13 @@ 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 @@ 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

View file

@ -110,12 +110,13 @@ 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 @@ 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

View file

@ -72,13 +72,13 @@ 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 @@ 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>

View file

@ -85,12 +85,13 @@ 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 @@ 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 @@ 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>

View file

@ -19,7 +19,7 @@ A new user `${user.username}` has registered on ${h.format_date(date)}
${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 @@ ${self.plaintext_footer()}
</td>
</tr>
</table>
<div class="clear-both"></div>
## main body
<table style="text-align:left;vertical-align:middle;width: 100%">
## spacing def
<tr>