From 37e4ad7c1b7291df59da4e093bcd799972a388fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Matula?= <lukas@gbely.net>
Date: Tue, 29 Sep 2020 06:33:13 +0200
Subject: [PATCH] [Dovecot] Quota template - better compatibility (#3783)

MS Outlook, Thunderbird, EMClient, SOGo, Roundcube
---
 data/assets/templates/quota.tpl | 122 +++++++++++++++++++-------------
 1 file changed, 71 insertions(+), 51 deletions(-)
diff --git a/data/assets/templates/quota.tpl b/data/assets/templates/quota.tpl
index 24555478..b6ad644e 100644
--- a/data/assets/templates/quota.tpl
+++ b/data/assets/templates/quota.tpl
@@ -1,53 +1,73 @@
 <html>
-   <head>
-      <style>
-         body {
-         font-family: sans-serif;
-         }
-         div {
-         /* width based on text fill*/
-         display: inline-block;
-         }
-         #progressbar {
-         color: #000;
-         background-color: #f1f1f1;
-         width: 100%;
-         }
-         {% if (percent >= 95) %}
-         #progressbar > div {
-         color: #fff;
-         background-color: #FF0000;
-         text-align: center;
-         padding: 0.01em;
-         width: {{percent}}%;
-         }
-         {% elif (percent < 95) and (percent >= 80) %}
-         #progressbar > div {
-         color: #fff;
-         background-color: #FF8C00;
-         text-align: center;
-         padding: 0.01em;
-         width: {{percent}}%;
-         }
-         {% else %}
-         #progressbar > div {
-         color: #fff;
-         background-color: #00B000;
-         text-align: center;
-         padding: 0.01em;
-         width: {{percent}}%;
-         }
-         {% endif %}
-      </style>
-   </head>
-   <body>
-      <div>
-         <p>Hi {{username}}!<br><br>
-            Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br>
-         <div id="progressbar">
-            <div>{{percent}}%</div>
-         </div>
-         </p>
-      </div>
-   </body>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <style>
+            body {
+            font-family: Calibri, Arial, Verdana;
+            }
+            table {
+            border: 0;
+            border-collapse: collapse;
+            <!--[if mso]>
+            border-spacing: 0px;
+            table-layout: fixed;
+            <![endif]-->
+            }
+            tr {
+            display: flex;
+            }
+            #progressbar {
+            color: #000;
+            background-color: #f1f1f1;
+            width: 100%;
+            }
+            {% if (percent >= 95) %}
+            #progressbar {
+            color: #fff;
+            background-color: #FF0000;
+            text-align: center;
+            width: {{percent}}%;
+            }
+            {% elif (percent < 95) and (percent >= 80) %}
+            #progressbar {
+            color: #fff;
+            background-color: #FF8C00;
+            text-align: center;
+            width: {{percent}}%;
+            }
+            {% else %}
+            #progressbar {
+            color: #fff;
+            background-color: #00B000;
+            text-align: center;
+            width: {{percent}}%;
+            }
+            {% endif %}
+            #graybar {
+            background-color: #D8D8D8;
+            width: {{100 - percent}}%;
+            }
+            a:link, a:visited {
+            color: #858585;
+            text-decoration: none;
+            }
+            a:hover, a:active {
+            color: #4a81bf;
+            }
+        </style>
+    </head>
+    <body>
+        <table>
+            <tr>
+                <td colspan="2">
+                    Hi {{username}}!<br /><br />
+                    Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br /><br />
+                </td>
+            </tr>
+            <tr>
+                <td id="progressbar">{{percent}}%</td>
+                <td id="graybar"></td>
+            </tr>
+        </table>
+    </body>
 </html>

+ Hi {{username}}! + Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future. +
{{percent}}%