From 872a0d5bd801c998d911f7da582a60d2f714a710 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 20 Jan 2018 01:32:21 +0100
Subject: Improve HTML e-mails based on Litmus tests (#6301)

* Use PNG images in HTML e-mails

* Make webpack use URLs with host so fonts load inside HTML e-mails

Convert this back to a relative URL in the premailer CSS loader
since local requests are quicker

* Improve responsive design

* Add missing PNG icon
---
 app/javascript/images/mailer/icon_cached.png      | Bin 0 -> 754 bytes
 app/javascript/images/mailer/icon_done.png        | Bin 0 -> 279 bytes
 app/javascript/images/mailer/icon_email.png       | Bin 0 -> 520 bytes
 app/javascript/images/mailer/icon_grade.png       | Bin 0 -> 541 bytes
 app/javascript/images/mailer/icon_lock_open.png   | Bin 0 -> 550 bytes
 app/javascript/images/mailer/icon_person_add.png  | Bin 0 -> 512 bytes
 app/javascript/images/mailer/icon_reply.png       | Bin 0 -> 391 bytes
 app/javascript/images/mailer/logo_full.png        | Bin 0 -> 3052 bytes
 app/javascript/images/mailer/logo_transparent.png | Bin 0 -> 627 bytes
 app/javascript/styles/mailer.scss                 |  34 +++++++++++++++++++++-
 10 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/images/mailer/icon_cached.png
 create mode 100644 app/javascript/images/mailer/icon_done.png
 create mode 100644 app/javascript/images/mailer/icon_email.png
 create mode 100644 app/javascript/images/mailer/icon_grade.png
 create mode 100644 app/javascript/images/mailer/icon_lock_open.png
 create mode 100644 app/javascript/images/mailer/icon_person_add.png
 create mode 100644 app/javascript/images/mailer/icon_reply.png
 create mode 100644 app/javascript/images/mailer/logo_full.png
 create mode 100644 app/javascript/images/mailer/logo_transparent.png

(limited to 'app/javascript')

diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png
new file mode 100644
index 000000000..e62c064c8
Binary files /dev/null and b/app/javascript/images/mailer/icon_cached.png differ
diff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png
new file mode 100644
index 000000000..0d2ef0cb8
Binary files /dev/null and b/app/javascript/images/mailer/icon_done.png differ
diff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png
new file mode 100644
index 000000000..aae9d2bb9
Binary files /dev/null and b/app/javascript/images/mailer/icon_email.png differ
diff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png
new file mode 100644
index 000000000..895b57d0a
Binary files /dev/null and b/app/javascript/images/mailer/icon_grade.png differ
diff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png
new file mode 100644
index 000000000..9f62eadc2
Binary files /dev/null and b/app/javascript/images/mailer/icon_lock_open.png differ
diff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png
new file mode 100644
index 000000000..3453060ae
Binary files /dev/null and b/app/javascript/images/mailer/icon_person_add.png differ
diff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png
new file mode 100644
index 000000000..8bce4955c
Binary files /dev/null and b/app/javascript/images/mailer/icon_reply.png differ
diff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png
new file mode 100644
index 000000000..1c4f33287
Binary files /dev/null and b/app/javascript/images/mailer/logo_full.png differ
diff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png
new file mode 100644
index 000000000..8fda4f67f
Binary files /dev/null and b/app/javascript/images/mailer/logo_transparent.png differ
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index b3bcc9209..dbe070f9a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -17,7 +17,7 @@ body {
   -ms-text-size-adjust: 100%;
 }
 
-.email_body {
+.email-body {
   td,
   div,
   a,
@@ -235,6 +235,12 @@ h5 {
   color: lighten($ui-base-color, 34%);
 }
 
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
 .input {
   td {
     background: darken($ui-base-color, 8%);
@@ -512,3 +518,29 @@ ul {
     min-height: 1024px !important;
   }
 }
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
-- 
cgit