fix: tweak info text and style (#1048)

* fix: tweak info text and style * fix: i18n * fix: tweak info
dhis2 · Sep 8, 2020 · 207530b · 207530b
1 parent 33b046d
commit 207530b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-09-08T06:57:57.672Z\n"
-"PO-Revision-Date: 2020-09-08T06:57:57.672Z\n"
+"POT-Creation-Date: 2020-09-08T15:31:37.955Z\n"
+"PO-Revision-Date: 2020-09-08T15:31:37.955Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -68,27 +68,27 @@ msgstr ""
 msgid "Print"
 msgstr ""
 
-msgid "The pages below are a preview of how the dashboard layout will be printed."
+msgid "dashboard layout"
 msgstr ""
 
-msgid ""
-"The pages below are a preview of how each dashboard item will be printed on "
-"a separate page."
+msgid "one item per page"
 msgstr ""
 
-msgid ""
-"Use the default printer settings for best results and check that all "
-"dashboard items have finished loading before printing. This text will not "
-"be printed."
+msgid "Print Preview"
 msgstr ""
 
-msgid "dashboard layout"
+msgid "For best print results"
 msgstr ""
 
-msgid "one item per page"
+msgid "Use Chrome or Edge web browser"
 msgstr ""
 
-msgid "Print Preview"
+msgid "Wait for all dashboard items to load before printing this page"
+msgstr ""
+
+msgid ""
+"Use A4 landscape paper size and default margin settings in the browser "
+"print dialog"
 msgstr ""
 
 msgid "{{count}} selected"

diff --git a/src/components/Dashboard/PrintInfo.js b/src/components/Dashboard/PrintInfo.js
@@ -11,18 +11,6 @@ const PrintInfo = ({ isLayout }) => {
             ? a4LandscapeWidthPx
             : window.innerWidth
 
-    const infoPartOne = isLayout
-        ? i18n.t(
-              'The pages below are a preview of how the dashboard layout will be printed.'
-          )
-        : i18n.t(
-              'The pages below are a preview of how each dashboard item will be printed on a separate page.'
-          )
-
-    const infoPartTwo = i18n.t(
-        'Use the default printer settings for best results and check that all dashboard items have finished loading before printing. This text will not be printed.'
-    )
-
     const infoHeader = isLayout
         ? i18n.t('dashboard layout')
         : i18n.t('one item per page')
@@ -33,9 +21,24 @@ const PrintInfo = ({ isLayout }) => {
                 {`${i18n.t('Print Preview')}: ${infoHeader}`}
             </p>
             <div style={{ maxWidth }}>
-                <p
-                    className={classes.info}
-                >{`${infoPartOne} ${infoPartTwo}`}</p>
+                <p className={classes.info}>
+                    {`${i18n.t('For best print results')}:`}
+                </p>
+                <p className={classes.info}>
+                    <ul className={classes.infoList}>
+                        <li>{i18n.t('Use Chrome or Edge web browser')}</li>
+                        <li>
+                            {i18n.t(
+                                'Wait for all dashboard items to load before printing'
+                            )}
+                        </li>
+                        <li>
+                            {i18n.t(
+                                'Use A4 landscape paper size and default margin settings in the browser print dialog'
+                            )}
+                        </li>
+                    </ul>
+                </p>
             </div>
             <hr className={classes.divider} />
         </div>

diff --git a/src/components/Dashboard/styles/PrintInfo.module.css b/src/components/Dashboard/styles/PrintInfo.module.css
@@ -16,6 +16,10 @@
     max-width: 800px;
 }
 
+.infoList > li {
+    padding: 4px 0;
+}
+
 .divider {
     width: 1102px;
     margin-left: 0px;