From 7b30ab09d288bbdb268e1be7afbca4bfa4fb29ca Mon Sep 17 00:00:00 2001 From: Nicolae Socaciu <103567375+nicolaesocaciu@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:57:00 +0200 Subject: [PATCH] Fix email template scheduled change conflict (#5957) Fixing the mobile template (this is before the fix) - reducing padding around the content - fixing line-height for the content - fixing the footer links ![image](https://github.com/Unleash/unleash/assets/103567375/dbe88f5a-a798-4fd4-ab42-543689605043) --- .../scheduled-change-conflict.html.mustache | 103 ++++++------------ 1 file changed, 32 insertions(+), 71 deletions(-) diff --git a/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache b/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache index 7dec515e7f..4dee59bb15 100644 --- a/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache +++ b/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache @@ -7,7 +7,7 @@ /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */ .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */ - .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */ + .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 1.4;} /* Force Hotmail to display normal line spacing */ body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */ table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */ img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */ @@ -31,7 +31,7 @@ * @theme page */ body, #bodyTable{ - /*@editable*/ background-color:#F7F7FA; + /*@editable*/ background:#F7F7FA; } /** @@ -49,11 +49,10 @@ * @tip Set the border for your email. */ #templateContainer{ - /*@editable*/ border:1px solid #817AFE; + /*@editable*/ border:2px solid #817AFE; border-radius: 12px; overflow: hidden; padding: 48px; - background-color: #FFF; } /** @@ -69,7 +68,7 @@ /*@editable*/ font-size:24px; /*@editable*/ font-style:normal; /*@editable*/ font-weight:bold; - /*@editable*/ line-height:100%; + /*@editable*/ line-height:1.4; /*@editable*/ letter-spacing:normal; margin-top:0; margin-right:0; @@ -90,7 +89,7 @@ /*@editable*/ font-size:20px; /*@editable*/ font-style:normal; /*@editable*/ font-weight:bold; - /*@editable*/ line-height:100%; + /*@editable*/ line-height:1.4; /*@editable*/ letter-spacing:normal; margin-top:0; margin-right:0; @@ -112,7 +111,7 @@ /*@editable*/ font-size:16px; /*@editable*/ font-style:normal; /*@editable*/ font-weight:bold; - /*@editable*/ line-height:100%; + /*@editable*/ line-height:1.4; /*@editable*/ letter-spacing:normal; margin-top:0; margin-right:0; @@ -134,7 +133,7 @@ /*@editable*/ font-size:14px; /*@editable*/ font-style:normal; /*@editable*/ font-weight:normal; - /*@editable*/ line-height:100%; + /*@editable*/ line-height:1.4; /*@editable*/ letter-spacing:normal; margin-top:0; margin-right:0; @@ -165,7 +164,7 @@ /*@editable*/ font-family:Helvetica; /*@editable*/ font-size:20px; /*@editable*/ font-weight:bold; - /*@editable*/ line-height:100%; + /*@editable*/ line-height:1.4; /*@editable*/ padding-top:0; /*@editable*/ padding-right:0; /*@editable*/ padding-bottom:0; @@ -212,7 +211,7 @@ /*@editable*/ color:#202021; /*@editable*/ font-family:Helvetica; /*@editable*/ font-size:16px; - /*@editable*/ line-height:150%; + /*@editable*/ line-height:1.4; /*@editable*/ text-align:left; } @@ -234,12 +233,12 @@ .bodyContent .buttonStyle { margin-top: 32px; display: inline-block; - padding: 8px 16px; + padding: 13px 20px; color: #fff; background: #6C65E5; border-radius: 4px; - font-size: 15px; - font-weight: bold; + font-size: 16px; + line-height: 1; text-decoration: none !important; } @@ -264,22 +263,15 @@ /*@editable*/ color:#6E6E70; /*@editable*/ font-family:Helvetica; /*@editable*/ font-size:14px; - /*@editable*/ line-height:150%; + /*@editable*/ line-height:1.4; /*@editable*/ text-align:left; } .footerContent a { - padding: 0 12px; + padding-right: 12px; + margin-right: 12px; border-right: 1px solid #E1E1E3; - } - - .footerContent a:first-child { - padding-left: 0; - } - - .footerContent a:last-child { - padding-right: 0; - border-right: 0; + color:#615BC2; } .footerContent em { @@ -321,52 +313,11 @@ #templateContainer{ max-width:600px !important; /*@editable*/ width:100% !important; - } - - /** - * @tab Mobile Styles - * @section heading 1 - * @tip Make the first-level headings larger in size for better readability on small screens. - */ - h1{ - /*@editable*/ font-size:24px !important; - /*@editable*/ line-height:100% !important; - } - - /** - * @tab Mobile Styles - * @section heading 2 - * @tip Make the second-level headings larger in size for better readability on small screens. - */ - h2{ - /*@editable*/ font-size:20px !important; - /*@editable*/ line-height:100% !important; - } - - /** - * @tab Mobile Styles - * @section heading 3 - * @tip Make the third-level headings larger in size for better readability on small screens. - */ - h3{ - /*@editable*/ font-size:18px !important; - /*@editable*/ line-height:100% !important; - } - - /** - * @tab Mobile Styles - * @section heading 4 - * @tip Make the fourth-level headings larger in size for better readability on small screens. - */ - h4{ - /*@editable*/ font-size:16px !important; - /*@editable*/ line-height:100% !important; + padding: 32px; } /* ======== Header Styles ======== */ - #templatePreheader{display:none !important;} /* Hide the template preheader to save space */ - /** * @tab Mobile Styles * @section header image @@ -385,6 +336,12 @@ /* ======== Body Styles ======== */ + + #templateBody{ + margin: 32px 0; + padding: 32px 0; + } + /** * @tab Mobile Styles * @section body text @@ -393,6 +350,7 @@ .bodyContent{ } + /* ======== Footer Styles ======== */ /** @@ -403,24 +361,27 @@ .footerContent{ } - .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */ + .footerContent a { + display:block !important; + border-right: 0; + } /* Place footer social and utility links on their own lines, for easier access */ }
- +
- +
- +
@@ -460,7 +421,7 @@ Unleash blog Github Slack community - Help center + Help center