fix: rating wrapping and clipping (#42)

* Add unique text to fix clipping * Let more space for rating links to fix wrapping * Fix wrapping for legends and footer links * Fix footer-links alignment * Fix background-color for Windows10 Mail * Remove unhelpful legends for NVDA-readers
productboard · Apr 15, 2021 · 5fb7435 · 5fb7435 · vercel · Apr 15, 2021
1 parent 82afbae
commit 5fb7435
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 38 deletions.
diff --git a/src/base.ts b/src/base.ts
@@ -48,10 +48,7 @@ export interface ScaleOptions {
   maxLegend: string;
   minLegend: string;
   ratings: Rating[];
-  width: {
-    absolute: number;
-    relative: number;
-  };
+  width: number;
 }
 
 export interface LongTextOptions {

diff --git a/src/helpers/current-date.ts b/src/helpers/current-date.ts
@@ -0,0 +1,3 @@
+export default function CurrentDateHelper() {
+  return new Date().toUTCString();
+}
diff --git a/src/partials/number-scale.hbs b/src/partials/number-scale.hbs
@@ -20,7 +20,7 @@
               width="100%">
               <tr>
                 <td align="left" style="font-size:0px;padding:0px;word-break:break-word;">
-                  <div style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:center;color:#b0b0b0;">
+                  <div aria-hidden="true" style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:center;color:#b0b0b0;">
                     <!--[if mso | IE]>
                     <div style="display:none;">
                     <![endif]-->
@@ -51,11 +51,11 @@
 </tr>
 <tr>
   <td class="" width="580px">
-    <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:530px;" width="530">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:580px;" width="580">
       <tr>
         <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
 <![endif]-->
-<div style="margin:0px auto;max-width:530px;">
+<div style="margin:0px auto;max-width:580px;">
   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
       <tr>
@@ -66,9 +66,9 @@
           <![endif]-->
           {{#each ratings}}
           <!--[if mso | IE]>
-          <td class="" style="vertical-align:top;width:{{../width.absolute}}px;">
+          <td class="" style="vertical-align:top;width:{{../width}}px;">
           <![endif]-->
-          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:{{../width.relative}}%;">
+          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:{{../width}}px;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
               <tbody>
                 <tr>
@@ -126,13 +126,13 @@
           <!--[if mso | IE]>
           <table role="presentation" border="0" cellpadding="0" cellspacing="0">
             <tr>
-              <td class="" style="vertical-align:top;width:265px;">
+              <td class="" style="vertical-align:top;width:263px;">
           <![endif]-->
-          <div class="mj-column-per-100 mj-outlook-group-fix mj-display-none" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
+          <div class="mj-column-per-100 mj-outlook-group-fix mj-display-none" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:263px;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
               <tr>
                 <td align="left" style="font-size:0px;padding:0px 2px;word-break:break-word;">
-                  <div style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:{{left}};color:#b0b0b0;">
+                  <div aria-hidden="true" style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:{{left}};color:#b0b0b0;">
                     {{minLegend}}
                   </div>
                 </td>
@@ -141,13 +141,13 @@
           </div>
           <!--[if mso | IE]>
           </td>
-          <td class="" style="vertical-align:top;width:265px;">
+          <td class="" style="vertical-align:top;width:263px;">
           <![endif]-->
-          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
+          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:263px;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
               <tr>
                 <td align="left" style="font-size:0px;padding:0px 2px;word-break:break-word;">
-                  <div class="mj-align-center" style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:{{right}};color:#b0b0b0;">
+                  <div aria-hidden="true" class="mj-align-center" style="font-family:arial, helvetica, sans-serif;font-style:italic;font-size:14px;line-height:1;text-align:{{right}};color:#b0b0b0;">
                     <!--[if mso | IE]>
                     <div style="text-align:right;">
                     <![endif]-->

diff --git a/src/partials/survey-layout.hbs b/src/partials/survey-layout.hbs
@@ -33,6 +33,9 @@
     {{> bot-honeypot-link url=botHoneypotUrl}}
   {{/if}}
 
+  {{!-- Windows10 Mail fix for background-color --}}
+  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#f0f0f0;width:100%;">
+    <tbody><tr><td>
   <div style="background-color:#f0f0f0;">
     <!--[if mso | IE]>
     <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:580px;" width="580">
@@ -66,7 +69,7 @@
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:white;background-color:white;width:100%;">
         <tbody>
           <tr>
-            <td style="border-bottom:5px solid #dddddd;border-top:5px solid #dddddd;direction:ltr;font-size:0px;padding:25px;padding-bottom:5px;text-align:center;">
+            <td class="content-container" style="border-bottom:5px solid #dddddd;border-top:5px solid #dddddd;direction:ltr;font-size:0px;padding:25px 0px 5px 0px;text-align:center;">
               <!--[if mso | IE]>
               <table role="presentation" border="0" cellpadding="0" cellspacing="0">
               <![endif]-->
@@ -110,17 +113,17 @@
                         <!--[if mso | IE]>
                         <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                           <tr>
-                            <td class="" style="vertical-align:top;width:290px;">
+                            <td class="" style="vertical-align:top;width:288px;">
                         <![endif]-->
-                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:288px;">
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
                             width="100%">
                             <tr>
-                              <td class="mj-align-center" align="{{left}}" style="text-align:{{left}};font-size:0px;padding:0px;word-break:break-word;">
+                              <td style="font-size:0px;padding:0px;word-break:break-word;">
                                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-collapse:separate;line-height:100%;">
                                   <tr>
                                     {{#if showPoweredBy}}
-                                    <td bgcolor="transparent" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:5px 5px;background:transparent;"
+                                    <td class="mj-align-center" align="{{left}}" bgcolor="transparent" role="presentation" style="text-align:{{left}};border:none;border-radius:3px;cursor:auto;mso-padding-alt:5px 5px;background:transparent;"
                                       valign="middle">
                                       <!--[if mso | IE]>
                                       <div style="text-align:left;">
@@ -142,17 +145,17 @@
                         </div>
                         <!--[if mso | IE]>
                         </td>
-                        <td class="" style="vertical-align:top;width:290px;">
+                        <td class="" style="vertical-align:top;width:288px;">
                         <![endif]-->
-                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:288px;">
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
                             width="100%">
                             <tr>
-                              <td class="mj-align-center" align="{{right}}" style="text-align:{{right}};font-size:0px;padding:0px;word-break:break-word;">
+                              <td style="font-size:0px;padding:0px;word-break:break-word;">
                                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-collapse:separate;line-height:100%;">
                                   <tr>
                                     {{#if unsubscribeUrl}}
-                                    <td bgcolor="transparent" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:5px 5px;background:transparent;"
+                                    <td class="mj-align-center" align="{{right}}" bgcolor="transparent" role="presentation" style="text-align:{{right}};border:none;border-radius:3px;cursor:auto;mso-padding-alt:5px 5px;background:transparent;"
                                       valign="middle">
                                       <!--[if mso | IE]>
                                       <div style="text-align:right;">
@@ -200,7 +203,10 @@
       </tr>
     </table>
     <![endif]-->
+    <span aria-hidden="true" style="font-size:0px;color:#f0f0f0;">Generated on {{current-date}}</span>
   </div>
+    </td></tr></tbody>
+  </table>
 
 {{#unless preview}}
 </body>

diff --git a/src/partials/survey-mobile-style.hbs b/src/partials/survey-mobile-style.hbs
@@ -1,15 +1,7 @@
-.mj-column-per-50 {
-  width: 50% !important;
-  max-width: 50%;
-}
 .mj-column-per-100 {
   width: 100% !important;
   max-width: 100%;
 }
-.mj-column-per-item-width {
-  width: {{width.relative}}% !important;
-  max-width: {{width.relative}}%;
-}
 .mj-align-left {
   text-align: left !important;
 }
@@ -24,4 +16,8 @@
 }
 .mj-display-inline-block {
   display: inline-block !important;
+}
+.content-container {
+  padding-left: 25px !important;
+  padding-right: 25px !important;
 }
diff --git a/src/partials/survey-style.hbs b/src/partials/survey-style.hbs
@@ -42,7 +42,7 @@
     {{> survey-mobile-style}}
   {{else}}
     {{#unless previewDevice.desktop}}
-      @media only screen and (max-width:480px) {
+      @media only screen and (max-width:580px) {
         {{> survey-mobile-style}}
       }
     {{/unless}}

diff --git a/src/transformV2.ts b/src/transformV2.ts
@@ -150,10 +150,7 @@ export function transformV2(options: TransformV2Options): TemplateV2Options {
       maxLegend: options.question.maxLegend,
       minLegend: options.question.minLegend,
       ratings: ratings,
-      width: {
-        absolute: SCALE_WIDTH / ratings.length,
-        relative: 100 / ratings.length
-      }
+      width: Math.floor(SCALE_WIDTH / ratings.length)
     };
   } else {
     return {

diff --git a/webpack.config.js b/webpack.config.js
@@ -13,7 +13,10 @@ module.exports = {
         use: [
           {
             loader: 'handlebars-loader',
-            query: { partialDirs: [path.resolve(__dirname, 'src/partials')] }
+            query: {
+              helperDirs: [path.resolve(__dirname, 'src/helpers')],
+              partialDirs: [path.resolve(__dirname, 'src/partials')]
+            }
           }
         ],
         exclude: /node_modules/