First pass at email styles
This commit is contained in:
Jason Zimdars
@@ -7,6 +7,6 @@ class Notification::BundleMailer < ApplicationMailer
|
||||
|
||||
mail \
|
||||
to: bundle.user.email_address,
|
||||
subject: "Recent activity in Fizzy"
|
||||
subject: "Latest Activity in Fizzy"
|
||||
end
|
||||
end
|
||||
|
||||
@@ -3,11 +3,119 @@
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style>
|
||||
/* Email styles need to be inline */
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0 none;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2d71e5;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
table, td {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#body {
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
height: 4em;
|
||||
margin-right: 0.3em;
|
||||
max-height: 4em;
|
||||
min-height: 4em;
|
||||
overflow: hidden;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.avatar__container {
|
||||
width: 4.3em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #2d71e5;
|
||||
border-color: #2d71e5;
|
||||
border-radius: 3rem;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
padding: 0.2em 0.4em;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event__details {
|
||||
margin-bottom: 0.2em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.event__title {
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notification__author {
|
||||
opacity: 0.66;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.notification__title {
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
opacity: 0.66;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%= yield %>
|
||||
<table id="body">
|
||||
<%= yield %>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,2 +1,10 @@
|
||||
<%= render "notification/bundle_mailer/notification/#{notification.source_type.underscore}/header", notification: notification %>
|
||||
<%= render "notification/bundle_mailer/notification/#{notification.source_type.underscore}/body", notification: notification %>
|
||||
<table class="notification">
|
||||
<tr>
|
||||
<td class="avatar__container"><%= image_tag user_avatar_url(notification.creator), alt: notification.creator.name, class: "avatar", size: 48 %></td>
|
||||
<td>
|
||||
<%= render "notification/bundle_mailer/notification/header", notification: notification %>
|
||||
<%= render "notification/bundle_mailer/notification/#{notification.source_type.underscore}/body", notification: notification %>
|
||||
<%= render "notification/bundle_mailer/notification/footer", notification: notification %>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<h2>Your Notifications since <%= @bundle.starts_at.strftime("%-l%P on %A, %B %-d") %></h2>
|
||||
|
||||
<p>You have <%= @notifications.count %> notifications:</p>
|
||||
|
||||
<%= render partial: "notification/bundle_mailer/notification", collection: @notifications, as: :notification %>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="title">Everything since <%= @bundle.starts_at.strftime("%-l%P on %A, %B %-d") %></h1>
|
||||
<p class="subtitle">You have <%= pluralize @notifications.count, "new notification" %>.</p>
|
||||
<%= render partial: "notification/bundle_mailer/notification", collection: @notifications, as: :notification %>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<p class="notification__author">
|
||||
<%= notification.creator.name %>
|
||||
</p>
|
||||
@@ -0,0 +1 @@
|
||||
<h2 class="notification__title">#<%= notification.card.id %> | <%= notification.card.collection.name %></h2>
|
||||
@@ -1,9 +1,9 @@
|
||||
<% event = notification.source %>
|
||||
|
||||
<h3>
|
||||
<%= event_notification_title(event) %>
|
||||
<h3 class="event__title">
|
||||
<%= link_to event_notification_title(event), collection_card_url(notification.card.collection, notification.card) %>
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<p class="event__details">
|
||||
<%= event_notification_body(event) %>
|
||||
</p>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<h2> #<%= notification.card.id %> <%= notification.card.collection.name %> </h2>
|
||||
<p>
|
||||
<%= notification.creator.familiar_name %>
|
||||
<%= image_tag user_avatar_url(notification.creator), alt: notification.creator.name, size: 48 %>
|
||||
</p>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<% mention = notification.source %>
|
||||
|
||||
<h3>
|
||||
<%= mention.mentioner.first_name %> mentioned you
|
||||
<h3 class="event__title">
|
||||
<%= link_to "#{mention.mentioner.first_name} mentioned you", collection_card_url(notification.card.collection, notification.card) %>
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<%= mention.source.mentionable_content.truncate(200) %>
|
||||
<p class="event__details">
|
||||
<%= mention.source.mentionable_content.truncate(200) %>
|
||||
</p>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<h2> #<%= notification.card.id %> <%= notification.card.collection.name %> </h2>
|
||||
<p>
|
||||
<%= notification.creator.familiar_name %>
|
||||
<%= image_tag user_avatar_url(notification.creator), alt: notification.creator.name, size: 48 %>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user