-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: address style issues in outlook email client
Email clients often replace newlines with `<br>` and this created a lot of whitespace. All HTML is on a single line now so that is no longer a problem. The UTF-8 character in the link behind the header was not rendering correctly, so the full dashboard title serves as a link now. The page-level CSS was being ignored and in some cases was even showing in the email body. So that was removed completely. We may need to add styles later but these will have to be inline-styles.
- Loading branch information
1 parent
2e6e631
commit 7513bf4
Showing
11 changed files
with
26 additions
and
656 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width" initial-scale="1"> | ||
| <!--[if !mso]> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <![endif]--> | ||
| <meta name="x-apple-disable-message-reformatting"> | ||
| <title></title> | ||
| <!--[if mso]> | ||
| <style> | ||
| * { font-family: sans-serif !important; } | ||
| </style> | ||
| <![endif]--> | ||
| <!--[if !mso]><!--> | ||
| <!-- Insert font reference, e.g. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet"> --> | ||
| <!--<![endif]--> | ||
| <style> | ||
| *, | ||
| *:after, | ||
| *:before { | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
| * { | ||
| -ms-text-size-adjust: 100%; | ||
| -webkit-text-size-adjust: 100%; | ||
| } | ||
| html, | ||
| body, | ||
| .document { | ||
| width: auto !important; | ||
| height: auto !important; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f6f8; | ||
| font-family: sans-serif, arial; | ||
| } | ||
| body { | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| text-rendering: optimizeLegibility; | ||
| } | ||
| div[style*="margin: 16px 0"] { | ||
| margin: 0 !important; | ||
| } | ||
| table, | ||
| td { | ||
| mso-table-lspace: 0pt; | ||
| mso-table-rspace: 0pt; | ||
| } | ||
| table { | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| table-layout: fixed; | ||
| margin: 0; | ||
| } | ||
| img { | ||
| -ms-interpolation-mode: bicubic; | ||
| max-width: 100%; | ||
| border: 0; | ||
| } | ||
| *[x-apple-data-detectors] { | ||
| color: inherit !important; | ||
| text-decoration: none !important; | ||
| } | ||
| .x-gmail-data-detectors, | ||
| .x-gmail-data-detectors *, | ||
| .aBn { | ||
| border-bottom: 0 !important; | ||
| cursor: default !important; | ||
| } | ||
| .btn { | ||
| -webkit-transition: all 200ms ease; | ||
| transition: all 200ms ease; | ||
| } | ||
| .btn:hover { | ||
| background-color: dodgerblue; | ||
| } | ||
| @media screen and (max-width: 750px) { | ||
| .container { | ||
| width: 100%; | ||
| margin: auto; | ||
| } | ||
| } | ||
| .dashboard { | ||
| padding: 0 12px; | ||
| } | ||
| .dashboard-item { | ||
| margin-bottom: 12px; | ||
| overflow: visible; | ||
| } | ||
| .dashboard-item-inner { | ||
| display: inline-block; | ||
| min-width: 750px; | ||
| padding: 12px; | ||
| background-color: #fff; | ||
| border-radius: 3px; | ||
| box-shadow: 0 0 3px 0 #999; | ||
| } | ||
|
|
||
| .dashboard-item .text { | ||
| white-space: pre-line; | ||
| } | ||
| .dashboard-header > .dashboard-link { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| .dashboard-item table { | ||
| border-collapse: collapse; | ||
| font-size: 11pt; | ||
| } | ||
| .dashboard-item th, .dashboard-item td { | ||
| padding: 8px 4px 7px 4px; | ||
| border: 1px solid #e7e7e7; | ||
| } | ||
| .dashboard-item th { | ||
| background-color: #f3f3f3; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" class="document"> | ||
| <tr> | ||
| <td valign="top"> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="auto" class="container"> | ||
| <tr> | ||
| <td> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="left" width="auto"> | ||
| <tr> | ||
| <td class="dashboard"> | ||
|
|
||
| <h1 class="dashboard-header"> | ||
| Delivery | ||
| <a target="_blank" class="dashboard-link" href="http://localhost:8080/dhis-web-dashboard/#/iMnYyBfSxmM">⧉</a> | ||
| </h1><h6>Delivery: Institutional delivery rates Yearly</h6><h6>Delivery: Live births in facilities last 4 quarters</h6><h6>Delivery: Births (registered) in PHU vs Community last year</h6><h6>Delivery: Birth by skilled attendant (estimated vs population, sorted)</h6><h6>Delivery: Birth by skilled attendant this year (sorted)</h6><h6>Delivery: PHU delivery rate (by pop) by chiefdom last year</h6><h6>Reporting Rates: RH by orgunit last year</h6><h6>Delivery: ANC coverage vs PHU delivery rate last year</h6><h6>Delivery: PHU delivery rates last year</h6><h6>Delivery: PHU delivery rate (by pop.) by orgunit last year</h6><h6>Delivery: Births attended by skilled health personnel by orgunit last year</h6> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </body> | ||
| </html> | ||
| <!DOCTYPE html><html><head></head><body><h1 class="dashboard-header"><a target="_blank" class="dashboard-link" href="http://localhost:8080/dhis-web-dashboard/#/iMnYyBfSxmM">Delivery</a></h1><h6>Delivery: Institutional delivery rates Yearly</h6><h6>Delivery: Live births in facilities last 4 quarters</h6><h6>Delivery: Births (registered) in PHU vs Community last year</h6><h6>Delivery: Birth by skilled attendant (estimated vs population, sorted)</h6><h6>Delivery: Birth by skilled attendant this year (sorted)</h6><h6>Delivery: PHU delivery rate (by pop) by chiefdom last year</h6><h6>Reporting Rates: RH by orgunit last year</h6><h6>Delivery: ANC coverage vs PHU delivery rate last year</h6><h6>Delivery: PHU delivery rates last year</h6><h6>Delivery: PHU delivery rate (by pop.) by orgunit last year</h6><h6>Delivery: Births attended by skilled health personnel by orgunit last year</h6></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width" initial-scale="1"> | ||
| <!--[if !mso]> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <![endif]--> | ||
| <meta name="x-apple-disable-message-reformatting"> | ||
| <title></title> | ||
| <!--[if mso]> | ||
| <style> | ||
| * { font-family: sans-serif !important; } | ||
| </style> | ||
| <![endif]--> | ||
| <!--[if !mso]><!--> | ||
| <!-- Insert font reference, e.g. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet"> --> | ||
| <!--<![endif]--> | ||
| <style> | ||
| *, | ||
| *:after, | ||
| *:before { | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
| * { | ||
| -ms-text-size-adjust: 100%; | ||
| -webkit-text-size-adjust: 100%; | ||
| } | ||
| html, | ||
| body, | ||
| .document { | ||
| width: auto !important; | ||
| height: auto !important; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f6f8; | ||
| font-family: sans-serif, arial; | ||
| } | ||
| body { | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| text-rendering: optimizeLegibility; | ||
| } | ||
| div[style*="margin: 16px 0"] { | ||
| margin: 0 !important; | ||
| } | ||
| table, | ||
| td { | ||
| mso-table-lspace: 0pt; | ||
| mso-table-rspace: 0pt; | ||
| } | ||
| table { | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| table-layout: fixed; | ||
| margin: 0; | ||
| } | ||
| img { | ||
| -ms-interpolation-mode: bicubic; | ||
| max-width: 100%; | ||
| border: 0; | ||
| } | ||
| *[x-apple-data-detectors] { | ||
| color: inherit !important; | ||
| text-decoration: none !important; | ||
| } | ||
| .x-gmail-data-detectors, | ||
| .x-gmail-data-detectors *, | ||
| .aBn { | ||
| border-bottom: 0 !important; | ||
| cursor: default !important; | ||
| } | ||
| .btn { | ||
| -webkit-transition: all 200ms ease; | ||
| transition: all 200ms ease; | ||
| } | ||
| .btn:hover { | ||
| background-color: dodgerblue; | ||
| } | ||
| @media screen and (max-width: 750px) { | ||
| .container { | ||
| width: 100%; | ||
| margin: auto; | ||
| } | ||
| } | ||
| .dashboard { | ||
| padding: 0 12px; | ||
| } | ||
| .dashboard-item { | ||
| margin-bottom: 12px; | ||
| overflow: visible; | ||
| } | ||
| .dashboard-item-inner { | ||
| display: inline-block; | ||
| min-width: 750px; | ||
| padding: 12px; | ||
| background-color: #fff; | ||
| border-radius: 3px; | ||
| box-shadow: 0 0 3px 0 #999; | ||
| } | ||
|
|
||
| .dashboard-item .text { | ||
| white-space: pre-line; | ||
| } | ||
| .dashboard-header > .dashboard-link { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| .dashboard-item table { | ||
| border-collapse: collapse; | ||
| font-size: 11pt; | ||
| } | ||
| .dashboard-item th, .dashboard-item td { | ||
| padding: 8px 4px 7px 4px; | ||
| border: 1px solid #e7e7e7; | ||
| } | ||
| .dashboard-item th { | ||
| background-color: #f3f3f3; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" class="document"> | ||
| <tr> | ||
| <td valign="top"> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="auto" class="container"> | ||
| <tr> | ||
| <td> | ||
| <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="left" width="auto"> | ||
| <tr> | ||
| <td class="dashboard"> | ||
|
|
||
| <h1 class="dashboard-header"> | ||
| Antenatal Care | ||
| <a target="_blank" class="dashboard-link" href="http://localhost:8080/dhis-web-dashboard/#/nghVC4wtyzi">⧉</a> | ||
| </h1><h6>ANC: Coverage by quarter and district (two-category)</h6><h6>TEXT ITEM</h6><h6>ANC: ANC 1 coverage year over year</h6><h6>ANC: ANC 3 coverage by districts last 12 months</h6><h6>ANC: IPT 2 Coverage this year</h6><h6>ANC: LLITN coverage district and facility</h6><h6>ANC: ANC 1 coverage western chiefdoms this year</h6><h6>ANC: ANC 1st visits last 12 months cumulative values</h6><h6>ANC: 4+ visits by Facility Type last year</h6><h6>ANC: ANC 3rd visits by facility type last 12 months 100% stacked columns</h6><h6>ANC: Fixed vs Outreach last year</h6> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </body> | ||
| </html> | ||
| <!DOCTYPE html><html><head></head><body><h1 class="dashboard-header"><a target="_blank" class="dashboard-link" href="http://localhost:8080/dhis-web-dashboard/#/nghVC4wtyzi">Antenatal Care</a></h1><h6>ANC: Coverage by quarter and district (two-category)</h6><h6>TEXT ITEM</h6><h6>ANC: ANC 1 coverage year over year</h6><h6>ANC: ANC 3 coverage by districts last 12 months</h6><h6>ANC: IPT 2 Coverage this year</h6><h6>ANC: LLITN coverage district and facility</h6><h6>ANC: ANC 1 coverage western chiefdoms this year</h6><h6>ANC: ANC 1st visits last 12 months cumulative values</h6><h6>ANC: 4+ visits by Facility Type last year</h6><h6>ANC: ANC 3rd visits by facility type last 12 months 100% stacked columns</h6><h6>ANC: Fixed vs Outreach last year</h6></body></html> |
Oops, something went wrong.