github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-27 18:07:23 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: add max-width to digest email, format erb (#18445)

Browse Source
This commit is contained in:
Kris 2022-10-03 11:55:50 -04:00 committed by GitHub
parent c5544a7624
commit a5fbdba9d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 370 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
app/views/user_notifications/digest.html.erb
View File

@ -1,22 +1,26 @@
<div class="summary-email"> <div class="summary-email">
<span class="preheader" style="display:none!important;color:#f3f3f3;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden">
<span class="preheader" style="display:none!important;color:#f3f3f3;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden">
<%= @preheader_text %> <%= @preheader_text %>
</span> </span>
<table border="0" cellspacing="0" width="100%">
<%- if I18n.t('user_notifications.digest.custom.html.header').present? %>
<table class="digest-header logo-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%;min-width:100%;border-spacing:0;padding:0;">
<tr> <tr>
<td></td>
<td width="650">
<%- if I18n.t('user_notifications.digest.custom.html.header').present? %>
<table width="100%" class="digest-header logo-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="border-spacing:0;padding:0;">
<tr>
<td></td>
<td style="padding:0;"> <td style="padding:0;">
<%= raw(t 'user_notifications.digest.custom.html.header') %> <%= raw(t 'user_notifications.digest.custom.html.header') %>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
<%- else %> <%- else %>
<table class="digest-header text-header with-dir" style="background-color:#<%= @header_bgcolor -%>;width:100%;min-width:100%;"> <table width="100%" class="digest-header text-header with-dir" style="background-color:#<%= @header_bgcolor -%>;">
<tr> <tr>
<td></td>
<td align="center" style="text-align: center;padding: 20px 0; font-family:Arial,sans-serif;"> <td align="center" style="text-align: center;padding: 20px 0; font-family:Arial,sans-serif;">
<a href="<%= Discourse.base_url %>" style="color:#<%= @header_color -%>;font-size:22px;text-decoration:none;"> <a href="<%= Discourse.base_url %>" style="color:#<%= @header_color -%>;font-size:22px;text-decoration:none;">
<%- if logo_url.blank? %> <%- if logo_url.blank? %>
<%= SiteSetting.title %> <%= SiteSetting.title %>
@ -24,13 +28,12 @@
<img src="<%= logo_url %>" height="40" style="clear:both;display:block;height:40px;margin:auto;max-width:100%;outline:0;text-decoration:none;" alt="<%= SiteSetting.title %>"> <img src="<%= logo_url %>" height="40" style="clear:both;display:block;height:40px;margin:auto;max-width:100%;outline:0;text-decoration:none;" alt="<%= SiteSetting.title %>">
<%- end %> <%- end %>
</a> </a>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
<%- end %> <%- end %>
<table width="100%" class="body digest-content with-dir" style="background:#f3f3f3;padding:0;border-spacing:0;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
<table class="body digest-content with-dir" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
<tr> <tr>
<td class="side-spacer" style="width:5%;vertical-align:top;padding:0;"> <td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
<div class="with-accent-colors"> <div class="with-accent-colors">
@ -48,14 +51,10 @@
<tbody> <tbody>
<tr> <tr>
<td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal"> <td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal">
<br/>
<br/> <center class="header-since-last-visit with-accent-colors" style="font-size:22px;font-weight:400;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.since_last_visit' %></center>
<center class="header-since-last-visit with-accent-colors" style="font-size:22px;font-weight:400;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.since_last_visit' %></center> <table class="header-stats with-dir" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%;min-width:100%;">
<tbody>
<table class="header-stats with-dir" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%;min-width:100%;">
<tbody>
<tr class="header-stat-count"> <tr class="header-stat-count">
<%- @counts.each do |count| -%> <%- @counts.each do |count| -%>
<td style="text-align:center;font-size:36px;font-weight:400;"> <td style="text-align:center;font-size:36px;font-weight:400;">
@ -70,12 +69,9 @@
</td> </td>
<%- end -%> <%- end -%>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<center class="header-popular-topics with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px; mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.popular_topics' %></center>
<center class="header-popular-topics with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px; mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.popular_topics' %></center>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -84,10 +80,9 @@
<tbody> <tbody>
<tr> <tr>
<td class="digest-popular-topic-wrapper with-dir" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal"> <td class="digest-popular-topic-wrapper with-dir" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal">
<% @popular_topics.each_with_index do |t, i| %>
<% @popular_topics.each_with_index do |t, i| %> <!-- Beginning of Popular Topic -->
<!-- Beginning of Popular Topic --> <table class="digest-topic popular-topic with-dir" style="width:100%">
<table class="digest-topic popular-topic with-dir" style="width:100%">
<tbody> <tbody>
<tr> <tr>
<td class="digest-topic-category with-dir" style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;vertical-align:top;"> <td class="digest-topic-category with-dir" style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;vertical-align:top;">
@ -102,9 +97,8 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="digest-topic-title-wrapper with-dir" style="vertical-align:top;width:100%">
<table class="digest-topic-title-wrapper with-dir" style="vertical-align:top;width:100%">
<tbody> <tbody>
<tr> <tr>
<td class="with-dir" style="padding:<%= rtl? ? '0 16px 8px 8px' : '0 8px 8px 16px' %>;width:100%;"> <td class="with-dir" style="padding:<%= rtl? ? '0 16px 8px 8px' : '0 8px 8px 16px' %>;width:100%;">
@ -119,9 +113,8 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="digest-topic-title-wrapper with-dir" style="padding:0;position:relative;vertical-align:top;width:100%">
<table class="digest-topic-title-wrapper with-dir" style="padding:0;position:relative;vertical-align:top;width:100%">
<tbody> <tbody>
<tr> <tr>
<td class="digest-topic-op" style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;vertical-align:top;"> <td class="digest-topic-op" style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;vertical-align:top;">
@ -142,10 +135,9 @@
<%- end -%> <%- end -%>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<%- if t.first_post.present? && !t.first_post.user_deleted %>
<%- if t.first_post.present? && !t.first_post.user_deleted %> <table class="digest-topic-body with-dir" style="border-bottom:1px solid #f3f3f3;mso-border-bottom-alt:none;padding:0;vertical-align:top;width:100%;">
<table class="digest-topic-body with-dir" style="border-bottom:1px solid #f3f3f3;mso-border-bottom-alt:none;padding:0;vertical-align:top;width:100%;">
<tbody> <tbody>
<tr> <tr>
<td class="post-excerpt" style="color:#0a0a0a;font-size:14px;padding:0 16px 0 16px;width:100%;font-weight:normal;mso-padding-alt: 16px;"> <td class="post-excerpt" style="color:#0a0a0a;font-size:14px;padding:0 16px 0 16px;width:100%;font-weight:normal;mso-padding-alt: 16px;">
@ -153,10 +145,9 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<%- end %> <%- end %>
<table class="digest-topic-stats with-dir" style="padding:0;vertical-align:top;width:100%; padding-top:20px;">
<table class="digest-topic-stats with-dir" style="padding:0;vertical-align:top;width:100%; padding-top:20px;">
<tbody> <tbody>
<tr> <tr>
<td class="digest-topic-stat" style="padding:<%= rtl? ? '0 16px 16px 8px' : '0 8px 16px 16px' %>;white-space:nowrap;vertical-align:top;width:75px"> <td class="digest-topic-stat" style="padding:<%= rtl? ? '0 16px 16px 8px' : '0 8px 16px 16px' %>;white-space:nowrap;vertical-align:top;width:75px">
@ -176,19 +167,19 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div style="background-color:#f3f3f3;"> <div style="background-color:#f3f3f3;">
<table class="spacer with-dir" style="padding:0;width:100%;background-color:#f3f3f3"> <table class="spacer with-dir" style="padding:0;width:100%;background-color:#f3f3f3">
<tbody><tr><td height="20px" style="border-collapse:collapse!important;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr></tbody> <tbody><tr><td height="20px" style="border-collapse:collapse!important;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr></tbody>
</table> </table>
</div> </div>
<!-- End of Popular Topic --> <!-- End of Popular Topic -->
<% if i < 5 %> <% if i < 5 %>
<%= digest_custom_html("below_post_#{i+1}") %> <%= digest_custom_html("below_post_#{i+1}") %>
<% end %> <% end %>
<% end %> <% end %>
</td> </td>
</tr> </tr>
@ -208,23 +199,22 @@
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
<% if @popular_posts.present? %>
<% if @popular_posts.present? %> <center class="header-popular-posts" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding: 20px 0;font-family:Arial,sans-serif;">
<center class="header-popular-posts" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding: 20px 0;font-family:Arial,sans-serif;">
<%=t 'user_notifications.digest.popular_posts' %> <%=t 'user_notifications.digest.popular_posts' %>
</center> </center>
<table class="body with-dir" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;"> <table width="100%" class="body with-dir" style="background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;">
<tr> <tr>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td> <td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
<td class="with-dir" align="center" valign="top" style="width:90%;border-collapse:collapse!important;line-height:1.3;margin:0;padding:0;vertical-align:top;"> <td class="with-dir" align="center" valign="top" style="border-collapse:collapse!important;line-height:1.3;margin:0;padding:0;vertical-align:top;">
<% @popular_posts.each do |post| %> <% @popular_posts.each do |post| %>
<!-- Beginning of Popular Post --> <!-- Beginning of Popular Post -->
<table class="popular-post-excerpt with-dir" style="width:100%;background:#fefefe;border-spacing:0;padding:0;vertical-align:top;"> <table class="popular-post-excerpt with-dir" style="width:100%;background:#fefefe;border-spacing:0;padding:0;vertical-align:top;">
<tbody> <tbody>
<tr> <tr>
<td class="post-excerpt with-dir" style="color:#0a0a0a;font-size:14px;font-weight:normal;padding:16px;width:100%;"> <td class="post-excerpt with-dir" style="color:#0a0a0a;font-size:14px;font-weight:normal;padding:16px;width:100%;">
@ -232,9 +222,9 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="popular-post-spacer with-dir" style="border-spacing:0;background-color:#f3f3f3;padding:0;vertical-align:top;width:100%"> <table class="popular-post-spacer with-dir" style="border-spacing:0;background-color:#f3f3f3;padding:0;vertical-align:top;width:100%">
<tbody> <tbody>
<tr> <tr>
<td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:<%= rtl? ? '0 65px 0 0' : '0 0 0 65px' %>;"> <td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:<%= rtl? ? '0 65px 0 0' : '0 0 0 65px' %>;">
@ -242,9 +232,9 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="popular-post-meta with-dir" style="background-color:#f3f3f3;padding:0;position:relative;vertical-align:top;width:100%"> <table class="popular-post-meta with-dir" style="background-color:#f3f3f3;padding:0;position:relative;vertical-align:top;width:100%">
<tbody> <tbody>
<tr> <tr>
<td style="padding:0 8px 8px 8px;width:50px;vertical-align:top;"> <td style="padding:0 8px 8px 8px;width:50px;vertical-align:top;">
@ -268,41 +258,40 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div style="background-color:#f3f3f3"> <div style="background-color:#f3f3f3">
<table class="spacer with-dir" style="padding:0;vertical-align:top;width:100%;background-color:#f3f3f3"> <table class="spacer with-dir" style="padding:0;vertical-align:top;width:100%;background-color:#f3f3f3">
<tbody><tr><td height="40" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;vertical-align:top;word-wrap:normal">&#xA0;</td></tr></tbody> <tbody><tr><td height="40" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;vertical-align:top;word-wrap:normal">&#xA0;</td></tr></tbody>
</table> </table>
</div> </div>
<!-- End of Popular Post --> <!-- End of Popular Post -->
<% end %> <% end %>
</td> </td>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td> <td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
</tr> </tr>
</table> </table>
<% end %>
<% end %> <%= digest_custom_html("above_popular_topics") %>
<% if @other_new_for_you.present? %>
<%= digest_custom_html("above_popular_topics") %> <center class="digest-new-header" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding-bottom: 8px;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.more_new' %></center>
<% if @other_new_for_you.present? %> <table width="100%" class="digest-new-topics body with-dir" style="background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;">
<center class="digest-new-header" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding-bottom: 8px;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.more_new' %></center>
<table class="digest-new-topics body with-dir" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;">
<tr> <tr>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td> <td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
<td align="center" valign="top" style="width:90%;border-collapse:collapse!important;margin:0;padding:0;"> <td align="center" valign="top" style="border-collapse:collapse!important;margin:0;padding:0;">
<table class="digest-new-topic with-dir" style="padding:0;vertical-align:top;width:100%"> <table class="digest-new-topic with-dir" style="padding:0;vertical-align:top;width:100%">
<tbody> <tbody>
<% @other_new_for_you.each do |t| %> <% @other_new_for_you.each do |t| %>
<!-- Begin new topic --> <!-- Begin new topic -->
<tr style="vertical-align:top;"> <tr style="vertical-align:top;">
<td class="digest-new-topic-title with-dir" style="padding:8px;"> <td class="digest-new-topic-title with-dir" style="padding:8px;">
<a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none;"> <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none;">
@ -326,28 +315,23 @@
</tr> </tr>
<tr class="digest-new-topic-spacer"><td colspan="6" height="10px" style="border-collapse:collapse!important;line-height:10px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr> <tr class="digest-new-topic-spacer"><td colspan="6" height="10px" style="border-collapse:collapse!important;line-height:10px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr>
<!-- End new topic --> <!-- End new topic -->
<% end %> <% end %>
</tbody> </tbody>
</table> </table>
</td> </td>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td> <td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
</tr> </tr>
</table> </table>
<% end %> <% end %>
<%= digest_custom_html("below_popular_topics") %> <%= digest_custom_html("below_popular_topics") %>
<style>
</td>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
</tr>
</table>
<style>
@media only screen { @media only screen {
html { html {
min-height: 100%; min-height: 100%;
@ -383,22 +367,26 @@
padding-right: 0!important padding-right: 0!important
} }
} }
</style> </style>
<%= digest_custom_html("above_footer") %>
<%= digest_custom_html("above_footer") %> <table width="100%" class='summary-footer with-dir'>
<table class='summary-footer with-dir' style="width: 100%">
<tr> <tr>
<td></td>
<td align="center"> <td align="center">
<%=raw(t 'user_notifications.digest.unsubscribe', <%=raw(t 'user_notifications.digest.unsubscribe',
site_link: html_site_link, site_link: html_site_link,
email_preferences_link: link_to(t('user_notifications.digest.your_email_settings'), Discourse.base_url + '/my/preferences/emails'), email_preferences_link: link_to(t('user_notifications.digest.your_email_settings'), Discourse.base_url + '/my/preferences/emails'),
unsubscribe_link: link_to(t('user_notifications.digest.click_here'), "#{Discourse.base_url}/email/unsubscribe/#{@unsubscribe_key}")) %> unsubscribe_link: link_to(t('user_notifications.digest.click_here'), "#{Discourse.base_url}/email/unsubscribe/#{@unsubscribe_key}")) %>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
<%= digest_custom_html("below_footer") %>
<%= digest_custom_html("below_footer") %>
</td>
<td></td>
</tr>
</table>
</div> </div>