Changeset 1829fbf in OpenWorkouts-current for ow/static

Timestamp:

Feb 20, 2019, 9:31:22 PM (5 years ago)

Author:

Borja Lopez <borja@…>

Branches:

current, feature/docs, master

Children:

38171c6

Parents:

42d775c

Message:

(#61) Several fixes for the multipart/alternative (text+html) version of the verify
your account email:

• Use premailer [1] to embed all styles into the body of the html part of the email (ensuring the styles are rendered correctly in most email clients)

• Fixed some styles (RGB colors, transparencies, etc don't work in mail clients)

• Ensure the different bodies (text and html) have the proper content type and charset set.

[1] ​https://pypi.org/project/premailer

Location:

ow/static

Files:

• css/main.css (modified) (3 diffs)
• less/pages/verify_account.less (modified) (2 diffs)

ow/static/css/main.css

@@ -1492 +1492 @@
   justify-content: center;
   align-items: center;
-  min-height: calc(100vh - 98px);
+  /* dynamic min-height based on window height does not work well
+     with premailer and generating the proper html with styles for mails */
+  min-height: 400px;
   padding: 1em 0;
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+       generating the proper html with styles for mails */
+  color: #151515;
 }
 .verify-account-content .info {
   max-width: 580px;
-  background-color: rgba(21, 21, 21, 0.6);
+  /* RGB calculated color does not work well with premailer and
+         generating the proper html with styles for mails */
+  background-color: #e1e1e1;
   border-radius: 6px;
   padding: 2em 1.5em;
@@ -1506 +1512 @@
 }
 .verify-account-content a {
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+           generating the proper html with styles for mails */
+  color: #151515;
   font-size: 13px;
   text-decoration: none;
@@ -1512 +1520 @@
 }
 .verify-account-content a:hover {
-  color: white;
+  color: #151515;
 }
 .verify-account-content .button {
-  transition: all 500ms ease-in-out;
   background-color: #EE4056;
+  background: #EE4056;
   color: white;
   text-transform: uppercase;
 }
 .verify-account-content .button:hover {
-  background-color: #e6152f;
-}
+  background-color: #F60002;
+}

ow/static/less/pages/verify_account.less

@@ -5 +5 @@
     justify-content: center;
     align-items: center;
-    min-height: calc(100vh - 98px);
+    /* dynamic min-height based on window height does not work well
+     with premailer and generating the proper html with styles for mails */
+    min-height: 400px;
     padding: 1em 0;
-    color: @color-main-light;
+    /* RGB calculated color does not work well with premailer and
+       generating the proper html with styles for mails */
+    color: #151515;
 
     .info {
         max-width: 580px;
-        background-color: fadeout(@color-main, 40%);
+        /* RGB calculated color does not work well with premailer and
+         generating the proper html with styles for mails */
+        background-color: #e1e1e1;
         border-radius: 6px;
         padding: 2em  1.5em;
@@ -20 +26 @@
 
     a {
-        color: @color-main-light;
+        /* RGB calculated color does not work well with premailer and
+           generating the proper html with styles for mails */
+        color: #151515;
         font-size: 13px;
         text-decoration: none;
         margin-right: .75em;
         &:hover {
-            color: white;
+            color: #151515;
         }
     }
 
     .button {
-        transition: all 500ms ease-in-out;
         background-color: @color-app;
+        background: @color-app;
         color: white;
         text-transform: uppercase;
         &:hover {
-            background-color: darken(@color-app, 10%);
+            background-color: @color-app-important;
         }
     }