Apply hard table layout on notification row to be deal better with different clients

pull/9675/head
Henriette Darge 3 years ago
parent a6b2eeab45
commit 9d0db7c517
  1. 8
      app/helpers/mail_notification_helper.rb
  2. 10
      app/views/digest_mailer/work_packages.html.erb
  3. 4
      app/views/mailer/_notification_mailer_header.html.erb
  4. 163
      app/views/mailer/_notification_row.html.erb

@ -83,11 +83,11 @@ module MailNotificationHelper
default_options.merge(options).map { |k, v| "#{k}=#{v}" }.join(' ')
end
def placeholder_cell(number, is_horizontal = true)
style = if is_horizontal
"line-height:#{number}; max-width:0; min-width:0; height:#{number}; width:0; font-size:#{number}"
else
def placeholder_cell(number, is_vertical = false)
style = if is_vertical
"max-width:#{number}; min-width:#{number}; width:#{number}"
else
"line-height:#{number}; max-width:0; min-width:0; height:#{number}; width:0; font-size:#{number}"
end
content_tag('td', ' ', style: style).html_safe

@ -9,19 +9,19 @@
work_package: work_package,
notifications_by_work_package: notifications_by_work_package
} do %>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 12px;">
<table <%= placeholder_table_styles %>>
<% notifications_by_work_package.each do | notification | %>
<% if notification.journal.notes.present? %>
<tr style="color: #878787; line-height: 20px; font-size: 14px;">
<td>
<tr>
<td style="color: #878787; line-height: 24px; font-size: 14px;">
<%= digest_comment_text(notification) %>
<%= digest_notification_timestamp_text(notification) %>
</td>
</tr>
<% end %>
<% notification.journal.details.each do |detail| %>
<tr style="color: #878787; line-height: 20px; font-size: 14px;">
<td>
<tr>
<td style="color: #878787; line-height: 24px; font-size: 14px;">
<%= notification.journal.render_detail(detail, only_path: false) %>
<%= digest_notification_timestamp_text(notification) %>
</td>

@ -3,7 +3,7 @@
<td>
<table <%= placeholder_table_styles %>>
<tr>
<%= placeholder_cell('12px', false) %>
<%= placeholder_cell('12px', true) %>
<td>
<table <%= placeholder_table_styles(style: "width:100%") %>>
<tr>
@ -40,7 +40,7 @@
</tr>
</table>
</td>
<%= placeholder_cell('16px', false) %>
<%= placeholder_cell('16px', true) %>
<td>
<table <%= placeholder_table_styles %>>
<tr>

@ -1,73 +1,102 @@
<table cellpadding="12px" width="100%" style="border: 1px solid #E0E0E0;
border-radius: 10px;">
<table <%= placeholder_table_styles(style: "width:100%;border-width:1px;border-color:#E0E0E0;border-style:solid;border-radius:10px") %>>
<tr>
<%= placeholder_cell('12px') %>
</tr>
<tr>
<td>
<a style="
text-decoration: none;
display: block;"
href="<%= notifications_path(work_package.id) %>"
target="_blank">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 9px; font-size: 14px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="color: #333333;
background-color: #FFFFFF;
<%= status_colors(work_package.status) %>
white-space: nowrap;
padding: 2px 12px;
height: 18px;">
<%= work_package.status %>
</td>
</tr>
</table>
</td>
<td width="95%%" style="padding-left: 8px;
color: #878787;">
#<%= work_package.id %> - <%= work_package.project %>
<% unique_reasons = unique_reasons_of_notifications(notifications_by_work_package) %>
<%= ' - ' unless unique_reasons.length === 1 && unique_reasons.first.nil? %>
<% unique_reasons.each_with_index do |reason, index| %>
<%= I18n.t(
:"mail.digests.work_packages.reason.#{reason || :unknown}",
default: '') %><%= ', ' unless unique_reasons.size-1 == index %>
<% end %>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: #00A3FF;
color: white;
border-radius: 8px;
padding: 2px 8px;
font-size: 14px;
height: 18px;">
<%= notifications_by_work_package.length %>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 9px; font-size: 16px; font-weight: bold;">
<tr>
<td style="color: <%= type_color(work_package.type, '#333333') %>;
white-space: nowrap;">
<%= work_package.type.to_s.upcase %>
</td>
<td width="100%" style="padding-left: 5px; color: #333333;">
<%= work_package.subject %>
</td>
</tr>
</table>
<%= yield %>
</a>
<table <%= placeholder_table_styles(style: 'width:100%;font-size:14px;') %>>
<tr>
<%= placeholder_cell('12px', true) %>
<td>
<table <%= placeholder_table_styles %>>
<tr>
<td>
<table <%= placeholder_table_styles %>>
<tr>
<td style="color: #333333;
background-color: #FFFFFF;
<%= status_colors(work_package.status) %>
white-space: nowrap;
padding: 2px 12px;
height: 18px;">
<%= work_package.status %>
</td>
</tr>
</table>
</td>
<%= placeholder_cell('8px', true) %>
<td width="100%" style="color: #878787;">
#<%= work_package.id %> - <%= work_package.project %>
<% unique_reasons = unique_reasons_of_notifications(notifications_by_work_package) %>
<%= ' - ' unless unique_reasons.length === 1 && unique_reasons.first.nil? %>
<% unique_reasons.each_with_index do |reason, index| %>
<%= I18n.t(
:"mail.digests.work_packages.reason.#{reason || :unknown}",
default: '') %><%= ', ' unless unique_reasons.size-1 == index %>
<% end %>
</td>
<td>
<table <%= placeholder_table_styles %>>
<tr>
<td style="background-color: #00A3FF;
color: white;
border-radius: 10px;
padding: 2px 8px;
font-size: 14px;
height: 18px;
line-height: 18px;">
<%= notifications_by_work_package.length %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<%= placeholder_cell('12px', true) %>
</tr>
<tr>
<%= placeholder_cell('12px', true) %>
<%= placeholder_cell('12px') %>
<%= placeholder_cell('12px', true) %>
</tr>
<tr>
<%= placeholder_cell('12px', true) %>
<td>
<table <%= placeholder_table_styles(style: 'font-size:16px;font-weight:bold') %>>
<tr>
<td style="color: <%= type_color(work_package.type, '#333333') %>;white-space: nowrap;">
<%= work_package.type.to_s.upcase %>
</td>
<%= placeholder_cell('4px', true) %>
<td width="100%" style="color: #333333;">
<%= work_package.subject %>
</td>
</tr>
</table>
</td>
<%= placeholder_cell('12px', true) %>
</tr>
<tr>
<%= placeholder_cell('12px', true) %>
<%= placeholder_cell('12px') %>
<%= placeholder_cell('12px', true) %>
</tr>
<tr>
<%= placeholder_cell('12px', true) %>
<td><%= yield %></td>
<%= placeholder_cell('12px', true) %>
</tr>
</table>
</td>
</tr>
<tr>
<%= placeholder_cell('12px') %>
</tr>
</table>
<br/>
<table>
<tr>
<%= placeholder_cell('20px') %>
</tr>
</table>

Loading…
Cancel
Save