UX: add max-width to digest email, format erb (#18445)
This commit is contained in:
Kris
GitHub
parent
c5544a7624
commit
a5fbdba9d4
|
|
@ -1,22 +1,26 @@
|
|||
<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">
|
||||
<%= @preheader_text %>
|
||||
</span>
|
||||
|
||||
<%- 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;">
|
||||
<table border="0" cellspacing="0" width="100%">
|
||||
<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;">
|
||||
<%= raw(t 'user_notifications.digest.custom.html.header') %>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<%- 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>
|
||||
<td></td>
|
||||
<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;">
|
||||
<%- if logo_url.blank? %>
|
||||
<%= 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 %>">
|
||||
<%- end %>
|
||||
</a>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<%- end %>
|
||||
|
||||
<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;">
|
||||
<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;">
|
||||
<tr>
|
||||
<td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
|
||||
<div class="with-accent-colors">
|
||||
|
|
@ -48,12 +51,8 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
|
@ -72,10 +71,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -84,7 +80,6 @@
|
|||
<tbody>
|
||||
<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">
|
||||
|
||||
<% @popular_topics.each_with_index do |t, i| %>
|
||||
<!-- Beginning of Popular Topic -->
|
||||
<table class="digest-topic popular-topic with-dir" style="width:100%">
|
||||
|
|
@ -103,7 +98,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="digest-topic-title-wrapper with-dir" style="vertical-align:top;width:100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -120,7 +114,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="digest-topic-title-wrapper with-dir" style="padding:0;position:relative;vertical-align:top;width:100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -143,7 +136,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<%- 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%;">
|
||||
<tbody>
|
||||
|
|
@ -155,7 +147,6 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<%- end %>
|
||||
|
||||
<table class="digest-topic-stats with-dir" style="padding:0;vertical-align:top;width:100%; padding-top:20px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -209,17 +200,16 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<% 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;">
|
||||
<%=t 'user_notifications.digest.popular_posts' %>
|
||||
</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>
|
||||
<td class="side-spacer" style="width:5%;padding:0;"> </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| %>
|
||||
|
||||
|
|
@ -283,19 +273,18 @@
|
|||
<td class="side-spacer" style="width:5%;padding:0;"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<% end %>
|
||||
|
||||
|
||||
<%= digest_custom_html("above_popular_topics") %>
|
||||
|
||||
<% if @other_new_for_you.present? %>
|
||||
|
||||
<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;">
|
||||
<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;">
|
||||
<tr>
|
||||
<td class="side-spacer" style="width:5%;padding:0;"> </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%">
|
||||
<tbody>
|
||||
|
|
@ -342,11 +331,6 @@
|
|||
|
||||
<%= digest_custom_html("below_popular_topics") %>
|
||||
|
||||
|
||||
</td>
|
||||
<td class="side-spacer" style="width:5%;padding:0;"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
@media only screen {
|
||||
html {
|
||||
|
|
@ -385,20 +369,24 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
|
||||
<%= digest_custom_html("above_footer") %>
|
||||
|
||||
<table class='summary-footer with-dir' style="width: 100%">
|
||||
<table width="100%" class='summary-footer with-dir'>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td align="center">
|
||||
<%=raw(t 'user_notifications.digest.unsubscribe',
|
||||
site_link: html_site_link,
|
||||
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}")) %>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<%= digest_custom_html("below_footer") %>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue