fix: broken 50% border radius on emails, failing tests

v1.18.x
Julian Lam 6 years ago
parent 3f945c2b12
commit d3a10628e7

@ -205,14 +205,14 @@
function renderDigestAvatar(block) {
if (block.teaser) {
if (block.teaser.user.picture) {
return '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />';
return '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />';
}
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>';
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>';
}
if (block.user.picture) {
return '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />';
return '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />';
}
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>';
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>';
}
function userAgentIcons(data) {

@ -204,7 +204,9 @@ Emailer.send = function (template, uid, params, callback) {
params.rtl = await translator.translate('[[language:dir]]', results.settings.userLang) === 'rtl';
Emailer.sendToEmail(template, results.email, results.settings.userLang, params, function () {});
},
], callback);
], function (err) {
return callback(err);
});
};
Emailer.sendToEmail = function (template, email, language, params, callback) {

@ -27,9 +27,9 @@
<tr>
<td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; width: 32px;">
<!-- IF notifications.image -->
<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%" src="{notifications.image}" />
<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%" src="{notifications.image}" />
<!-- ELSE -->
<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block; border-radius: 50%">{notifications.user.icon:text}</div>
<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block; border-radius: 50%">{notifications.user.icon:text}</div>
<!-- ENDIF notifications.image -->
</td>
<td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; line-height: 16px; color: #333333;">

@ -179,28 +179,28 @@ describe('helpers', function () {
it('should render digest avatar', function (done) {
var block = { teaser: { user: { username: 'baris', picture: '/uploads/1.png' } } };
var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />');
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />');
done();
});
it('should render digest avatar', function (done) {
var block = { teaser: { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } } };
var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>');
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>');
done();
});
it('should render digest avatar', function (done) {
var block = { user: { username: 'baris', picture: '/uploads/1.png' } };
var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />');
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />');
done();
});
it('should render digest avatar', function (done) {
var block = { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } };
var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>');
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>');
done();
});

Loading…
Cancel
Save