Migrate to px sizes

web/css/controls.css

@@ -2,18 +2,18 @@
     position: relative;
 
     display: block;
-    padding:8pt;
+    padding: 14px;
 
     overflow: hidden;
 
     border-width: 0;
     outline: none;
-    box-shadow: 0 1pt 3pt rgba(0, 0, 0, .6);
+    box-shadow: var(--level1-shadow);
 
     background-color: var(--primary-color);
     color: var(--secondary-text-color);
 
-    font-size: 12pt;
+    font-size: var(--normal-text-size);
     font-weight: bold;
     text-align: center;
     transition: background-color .3s;
@@ -96,17 +96,17 @@
 /*Input fields*/
 .inpt {
     position:relative;
-    margin-top: 20pt;
+    margin-top: 20px;
     margin-bottom: 50px;
 }
 
 .inpt input {
-    font-size: 16pt;
-    padding: 9pt 9pt 4pt 4pt;
+    font-size: var(--big-text-size);
+    padding: 11px 9px 9px;
     display: block;
-    width: 200pt;
+    width: 300px;
     border: none;
-    border-bottom: 1pt solid var(--primary-color);
+    border-bottom: 1px solid var(--primary-color);
 }
 
 .inpt input:invalid {
@@ -122,37 +122,37 @@
 
 .inpt label {
     color: var(--primary-text-color);
-    font-size: 18pt;
+    font-size: var(--huge-text-size);
     font-weight: normal;
     position: absolute;
     pointer-events: none;
-    left: 5pt;
-    top: 10pt;
+    left: 5px;
+    top: 10px;
     transition: 0.2s ease all;
     -moz-transition: 0.2s ease all;
     -webkit-transition: 0.2s ease all;
 }
 
 .inpt input:focus ~ label {
-    top: -20pt;
-    font-size: 12pt;
+    top: -25px;
+    font-size: var(--normal-text-size);
     color: var(--primary-text-color);
 }
 
 .inpt input:valid ~ label {
-    top: -20pt;
-    font-size: 12pt;
+    top: -25px;
+    font-size: var(--normal-text-size);
     color: var(--primary-text-color);
 }
 .inpt .bar {
     position: relative;
     display: block;
-    width: 213pt;
+    width: 100%;
 }
 
 .inpt .bar:before, .bar:after {
     content: '';
-    height: 2pt;
+    height: 2px;
     width: 0;
     bottom: 0;
     position: absolute;
@@ -176,9 +176,9 @@
 
 .inpt .highlight {
     position: absolute;
-    height:75%;
-    width: 213pt;
-    bottom: 4pt;
+    height:80%;
+    width: 100%;
+    bottom: 4px;
     left:0;
     pointer-events: none;
     opacity: 0.5;
@@ -205,16 +205,19 @@
     to { width:0; background:transparent; }
 }
 
+/*folder button*/
 .folderBtn {
     display: flex;
     flex-direction: row;
-    padding: 2pt;
+    padding: 2px var(--base-text-padding);
     left: 0;
     right: 0;
-    margin-top: 5pt;
-    border-bottom-right-radius: var(--default-radius);
-    border-top-right-radius: var(--default-radius);
-    background-color: var(--secondary-color);
+    margin-top: 2px;
+    border-radius: var(--default-radius);
+    background-color: transparent;
+    font-size: var(--normal-text-size);
+
+    text-shadow: var(--text-shadow);
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -226,7 +229,7 @@
 
 .folderBtn:hover {
     cursor: pointer;
-    background-color: var(--secondary-dark-color);
+    background-color: var(--secondary-color);
 }
 
 .iconBtn:hover, .iconBtn:focus {
@@ -234,8 +237,8 @@
 }
 
 .iconBtn {
-    width: 20pt;
-    min-width: 20pt;
+    width: 24px;
+    min-width: 24px;
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -250,7 +253,7 @@
     display: inline;
     background-color: var(--bg-color);
     color: var(--primary-text-color);
-    font-size: 12pt;
+    font-size: var(--normal-text-size);
     cursor: pointer;
     padding: var(--base-text-padding);
 }
@@ -261,8 +264,8 @@
     margin-top: var(--base-text-padding);
 
     background-color: var(--bg-color);
-    min-width: 160pt;
-    box-shadow: 0 1pt 3pt rgba(0, 0, 0, .6);
+    min-width: 160px;
+    box-shadow: var(--level1-shadow);
     z-index: 1;
 }
 

web/css/index.css

@@ -14,7 +14,7 @@ html, body {
     bottom: 0;
     margin: 0;
 
-    padding: 5pt;
+    padding: var(--base-border-padding);
 
     display: flex;
     flex-direction: column;
@@ -29,20 +29,17 @@ html, body {
 #statusLine {
     display: flex;
     flex: 1 1 auto;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     padding: var(--base-text-padding);
-    min-height: 50pt;
+    min-height: 50px;
 }
 
 #pager {
     display: flex;
     flex-direction: row;
     flex: 0 1 auto;
-    width: 100pt;
-    min-width: 100pt;
-    max-width: 100pt;
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px;
 }
 
 #contentBox {
@@ -54,11 +51,14 @@ html, body {
 
 #foldersBox {
     display: block;
-    width: 150pt;
-    max-width: 150pt;
-    min-width: 150pt;
+    width: 220px;
+    max-width: 220px;
+    min-width: 220px;
     height: 100%;
     max-height: 100%;
+
+    margin-top: 8px;
+    margin-right: 15px;
 }
 
 #mailInnerBox {
@@ -71,10 +71,10 @@ html, body {
 
 #mailList {
     position: absolute;
-    top: 5pt;
-    bottom: 5pt;
-    left: 5pt;
-    right: 5pt;
+    top: 10px;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
     overflow-y: auto;
     background-color: var(--bg-color);
 }
@@ -89,7 +89,7 @@ html, body {
     overflow: hidden;
     display: none;
     background-color: var(--bg-color);
-    padding: 5pt;
+    padding: var(--base-border-padding);
 }
 
 #mailNew {
@@ -102,7 +102,7 @@ html, body {
     overflow: hidden;
     display: none;
     background-color: var(--bg-color);
-    padding: 5pt;
+    padding: 5px;
 }
 
 .mailHeader {
@@ -114,53 +114,47 @@ html, body {
 .mailFrom {
     display: inline-block;
     flex: 0 1 auto;
-    min-width: 250pt;
-    max-width: 250pt;
-    width: 250pt;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    min-width: 300px;
+    max-width: 300px;
+    width: 300px;
     padding: var(--base-text-padding);
+    font-size: var(--normal-text-size);
 }
 
 .mailSubject {
     display: block;
     flex: 1 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     padding: var(--base-text-padding);
+    font-size: var(--normal-text-size);
 }
 
 .mailDate {
     display: block;
     flex: 0 1 auto;
-    width: 100pt;
-    min-width: 100pt;
-    max-width: 100pt;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    width: 160px;
+    min-width: 160px;
+    max-width: 160px;
     padding: var(--base-text-padding);
+    font-size: var(--small-text-size);
+    text-align: center;
+    color: var(--secondary-text-dark-color)
 }
 
 .mailControlPanel {
     position: absolute;
-    min-width: 100pt;
-    top: 0pt;
-    right: 0pt;
-    bottom: 1pt;
+    min-width: 160px;
+    top: 0px;
+    right: 0px;
+    bottom: 1px;
     z-index: 2;
     display: none;
 }
 
 #copyrightBox {
+    font-size: var(--small-text-size);
     display: flex;
     flex-direction: row;
     flex: 0 1 auto;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: none;
     padding: var(--base-text-padding);
     text-align: right;
     vertical-align: middle;
@@ -173,7 +167,7 @@ html, body {
     top: 0;
     bottom: 0;
 
-    padding: 5pt;
+    padding: var(--base-border-padding);
 }
 
 .horizontalPaddingBox {
@@ -182,5 +176,17 @@ html, body {
     left: 0;
     right: 0;
 
-    padding: 5pt;
+    padding: var(--base-border-padding);
+}
+
+.elidedText {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.contentArea {
+    font-family: Dejavu Sans;
+    border-radius: var(--default-radius);
+    border: 1px solid var(--primary-color);
 }

web/css/styles.css

@@ -12,10 +12,20 @@
     --primary-text-color: #000000;
     --primary-text-dark-color: #000000;
     --secondary-text-color: #ffffff;
-    --secondary-text-dark-color: #ffffff;
-    --default-radius: 3pt;
+    --secondary-text-dark-color: #666666;
+    --default-radius: 5px;
 
-    --base-text-padding: 10pt;
+    --base-text-padding: 10px;
+    --base-border-padding: 8px;
+
+    --small-text-size: 14px;
+    --normal-text-size: 16px;
+    --big-text-size: 18px;
+    --huge-text-size: 24px;
+
+    --text-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
+    --level1-shadow: 0 2px 5px rgba(0, 0, 0, .6);
+    --level2-shadow: 0 4px 9px rgba(0, 0, 0, .6);
 }
 
 body {
@@ -36,12 +46,12 @@ body {
 
 .materialLevel1 {
     overflow: hidden;
-    box-shadow: 0 1pt 3pt rgba(0, 0, 0, .6);
+    box-shadow: var(--level1-shadow);
     border-radius: var(--default-radius);
 }
 
 .materialLevel2 {
-    box-shadow: 0 2pt 6pt rgba(0, 0, 0, .6);
+    box-shadow: var(--level2-shadow);
     border-radius: var(--default-radius);
 }
 
@@ -52,21 +62,17 @@ body {
 .primaryText {
     color: var(--primary-text-color);
     font-weight: bold;
-    font-size: 12pt;
+    font-size: var(--normal-text-size);
 }
 
 .secondaryText {
     color: #777777;
     font-weight: normal;
-    font-size: 10pt;
+    font-size: var(--small-text-size);
 }
 
 #mailBody {
-    border-radius: var(--default-radius);
-    border-width: 1pt;
-    border-style: solid;
-    border-color: var(--primary-color);
-    padding: 5pt;
+    padding: var(--base-border-padding);
 }
 
 .read {

web/js/index.js

@@ -205,7 +205,7 @@ function loadStatusLine() {
     })
 }
 
-function localDate(timestamp) {
+function localDate(elementToChange, timestamp) {
     var today = new Date()
     var date = new Date(timestamp*1000)
 
@@ -221,7 +221,7 @@ function localDate(timestamp) {
         dateString = date.toLocaleDateString("en-US")
     }
 
-    return dateString
+    $("#"+elementToChange).text(dateString)
 }
 
 function setRead(mailId, read) {

web/templates/details.html

@@ -1,18 +1,18 @@
 <div style="height: 100%; width: 100%; display:flex; flex-direction: column;">
     <div class="horizontalPaddingBox" style="flex-grow: 0!important;">
         <div style="width: 100%; display: flex; flex-direction: row;">
-            <div style="display: block; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;">
+            <div class="elidedText" style="display: block; flex: 1 1 auto;">
                 <span class="primaryText">From: {{.From}}</span></br>
                 <span class="secondaryText">To: {{.To}}</span></br>
                 <span class="primaryText">Subject: {{.Subject}}</span></br>
             </div>
-            <img id="readIcon{{.MailId}}" class="iconBtn" style="width: 20pt; margin-right: 10pt;" onclick="toggleRead('{{.MailId}}', 'readIcon');" src="/assets/read.svg"/>
-            <img id="restoreIcon" class="iconBtn" style="display:{{if .Trash}}block{{else}}none{{end}}; width: 20pt; margin-right: 10pt;" onclick="restoreMail({{.MailId}}, closeDetails);" src="/assets/restore.svg"/>
-            <img id="deleteIcon" class="iconBtn" style="width: 20pt; margin-right: 10pt;" onclick="removeMail({{.MailId}}, closeDetails);" src="/assets/remove.svg"/>
-            <img class="iconBtn" style="width: 20pt; margin-left:10pt; margin-right: 10pt;" onclick="closeDetails();" src="/assets/back.svg"/>
+            <img id="readIcon{{.MailId}}" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="toggleRead('{{.MailId}}', 'readIcon');" src="/assets/read.svg"/>
+            <img id="restoreIcon" class="iconBtn" style="display:{{if .Trash}}block{{else}}none{{end}}; width: 20px; margin-right: 10px;" onclick="restoreMail({{.MailId}}, closeDetails);" src="/assets/restore.svg"/>
+            <img id="deleteIcon" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="removeMail({{.MailId}}, closeDetails);" src="/assets/remove.svg"/>
+            <img class="iconBtn" style="width: 20px; margin-left:10px; margin-right: 10px;" onclick="closeDetails();" src="/assets/back.svg"/>
         </div>
     </div>
-    <div id="mailBody" class="horizontalPaddingBox">
+    <div id="mailBody" class="contentArea horizontalPaddingBox">
         <div style="position: relative; max-width: 100%; max-height: 100%; width: 100%; height: 100%;">
             <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto;">
                 <div>{{.Text}}</div>

web/templates/error.html

@@ -14,12 +14,12 @@
         <div id="main">
             <div class="horizontalPaddingBox">
                 <div style="display: flex; width: 100%; height: 100%; justify-content: center;">
-                    <img src="/assets/error.svg" height="100pt"/>
-                    <span style="font-size: 24pt;">{{.Code}}</span></br>
-                    <span style="font-size: 14pt;">{{.Text}}</span>
+                    <img src="/assets/error.svg" height="100px"/>
+                    <span style="font-size: 26px;">{{.Code}}</span></br>
+                    <span style="font-size: var(--big-text-size);">{{.Text}}</span>
                 </div>
             </div>
-            <div id="copyrightBox"><img src="/assets/logo.svg" height="30pt"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
+            <div id="copyrightBox" class="elidedText"><img src="/assets/logo.svg" height="30px"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
         </div>
     </body>
-</html>
+</html>

web/templates/folders.html

@@ -1,3 +1,3 @@
 {{range .}}
-<div id="folder{{.Name}}" class="folderBtn" onclick="openFolder('{{.Name}}')"><span style="flex: 1 1 auto;">{{.Name}}</span><span id="folderStats{{.Name}}" style="width: 40pt; min-width: 40pt; flex: 1 1 auto; text-align: right;"></span></div>
+<div id="folder{{.Name}}" class="folderBtn" onclick="openFolder('{{.Name}}')"><span style="flex: 1 1 auto;">{{.Name}}</span><span id="folderStats{{.Name}}" style="width: 40px; min-width: 40px; flex: 1 1 auto; text-align: right;"></span></div>
 {{end}}

web/templates/index.html

@@ -16,19 +16,19 @@
             <div id="headerBox">
                 <div id="statusLine"></div>
                 <div id="pager" class="noselect">
-                    <img style="width: 20pt;" src="/assets/prev.svg" onclick="prevPage()">
-                    <div style="width: 60pt;display: flex;">
+                    <img style="width: 20px;" src="/assets/prev.svg" onclick="prevPage()">
+                    <div style="width: 60px;display: flex;">
                         <span id="currentPageIndex" style="margin:auto" class="noselect"></span>
                         <span style="margin:auto" class="noselect">/</span>
                         <span id="totalPageCount" style="margin:auto" class="noselect"></span>
                     </div>
-                    <img style="width: 20pt;" src="/assets/next.svg" onclick="nextPage()">
+                    <img style="width: 20px;" src="/assets/next.svg" onclick="nextPage()">
                 </div>
             </div>
             <div class="horizontalPaddingBox">
                 <div id="contentBox">
                     <div id="foldersBox">
-                        <div id="mailNewButton" class="btn materialLevel1" style="margin: 5pt;">New email</div>
+                        <div id="mailNewButton" class="btn materialLevel1" style="margin-bottom: 15px;">New email</div>
                         <div id="folders"></div>
                     </div>
                     <div class="verticalPaddingBox">
@@ -40,7 +40,7 @@
                     </div>
                 </div>
             </div>
-            <div id="copyrightBox"><img src="/assets/logo.svg" height="30pt"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
+            <div id="copyrightBox" class="elidedText"><img src="/assets/logo.svg" height="30px"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
         </div>
     </body>
-</html>
+</html>

web/templates/login.html

@@ -31,7 +31,7 @@
                     </form>
                 </div>
             </div>
-            <div id="copyrightBox"><img src="/assets/logo.svg" height="30pt"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
+            <div id="copyrightBox" class="elidedText"><img src="/assets/logo.svg" height="30px"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
         </div>
     </body>
-</html>
+</html>

web/templates/maillist.html

@@ -2,14 +2,14 @@
 {{range .}}
 <div id="mail{{.Id}}" class="mailHeaderContainer {{if .Read}}read{{else}}unread{{end}}" style="position: relative;" onmouseover="$('#mailControlPanel{{.Id}}').show()" onmouseout="$('#mailControlPanel{{.Id}}').hide()">
     <div class="mailHeader noselect" onclick="mailOpen('{{.Id}}');" >
-        <div class="mailFrom noselect">{{.Mail.Header.From}}</div>
-        <div class="mailSubject noselect">{{.Mail.Header.Subject}}</div>
-        <div id="mailDate{{.Id}}" class="mailDate noselect" onload="$('#mailDate{{.Id}}').html(localDate({{.Mail.Header.Date}}))">{{.Mail.Header.Subject}}</div>
+        <div class="mailFrom elidedText noselect">{{.Mail.Header.From}}</div>
+        <div class="mailSubject elidedText noselect">{{.Mail.Header.Subject}}</div>
+        <div id="mailDate{{.Id}}" class="mailDate elidedText noselect"><script>localDate('mailDate{{.Id}}', {{.Mail.Header.Date}})</script></div>
     </div>
     <div id="mailControlPanel{{.Id}}" class="mailControlPanel">
         <div style="width: 100%; height: 100%; display: flex; flex-direction: row;">
-            <img id="readListIcon{{.Id}}" class="iconBtn" style="width: 20pt; margin-left: 20pt; margin-right: 10pt;" onclick="toggleRead('{{.Id}}', 'readListIcon'); event.stopPropagation(); console.log(event); return false;" src="/assets/{{if .Read}}read{{else}}unread{{end}}.svg"/>
-            <img id="deleteListIcon" class="iconBtn" style="width: 20pt; margin-right: 10pt;" onclick="removeMail({{.Id}}, closeDetails); event.stopPropagation(); return false;" src="/assets/remove.svg"/>
+            <img id="readListIcon{{.Id}}" class="iconBtn" style="width: 20px; margin-left: 40px; margin-right: 10px;" onclick="toggleRead('{{.Id}}', 'readListIcon'); event.stopPropagation(); console.log(event); return false;" src="/assets/{{if .Read}}read{{else}}unread{{end}}.svg"/>
+            <img id="deleteListIcon" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="removeMail({{.Id}}, closeDetails); event.stopPropagation(); return false;" src="/assets/remove.svg"/>
         </div>
     </div>
 </div>

web/templates/mailnew.html

@@ -1,18 +1,18 @@
 <form id="mailNewForm" style="height: 100%; width: 100%; display:flex; flex-direction: column;">
     <div class="horizontalPaddingBox" style="flex-grow: 0!important;">
         <div style="width: 100%; display: flex; flex-direction: row;">
-            <div class="btn materialLevel1" style="margin-right: 10pt;" onclick="sendNewMail();">
-                <img src="/assets/send.svg" style="width: 40pt"/>
+            <div class="btn materialLevel1" style="margin-right: 10px;" onclick="sendNewMail();">
+                <img src="/assets/send.svg" style="width: 40px"/>
                 Send
             </div>
-            <div style="display: block; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;">
+            <div class="elidedText" style="display: block; flex: 1 1 auto;">
                 <span class="primaryText">To: <input type="text" name="to" id="newMailTo"/></span></br>
                 <div style="display: flex; flex-direction: row;"><span style="flex: 0 1 auto" class="primaryText">Subject:</span><input id="newMailSubject" type="text" name="subject" style="flex: 1 1 auto"/></div></br>
             </div>
-            <img class="iconBtn" style="width: 20pt; margin-left:10pt; margin-right: 10pt;" onclick="closeDetails();" src="/assets/back.svg"/>
+            <img class="iconBtn" style="width: 20px; margin-left:10px; margin-right: 10px;" onclick="closeDetails();" src="/assets/back.svg"/>
         </div>
     </div>
     <div class="horizontalPaddingBox">
-        <textarea id="newMailEditor" name="body" style="height: 100%; width: 100%; border-radius: 3pt; resize: none; border: 1pt solid var(--primary-color);"></textarea>
+        <textarea id="newMailEditor" name="body" class="contentArea" style="height: 100%; width: 100%; resize: none;"></textarea>
     </div>
 </form>

web/templates/statusline.html

@@ -1,10 +1,10 @@
 <div class="dropbtn materialLevel1" onclick="toggleDropDown('emailSelector')">
     <div style="display: flex;" class="noselect">
-        <img src="https://www.gravatar.com/avatar/{{.EmailHash}}?s=100&d=monsterid" style="border-radius: 100%; border-color: var(--primary-color); border-width: 2pt; border-style: solid; height: 30pt; width: 30pt;">
-        <div style="margin-top: auto; margin-bottom: auto; margin-left: 10pt;" class="noselect">
+        <img src="https://www.gravatar.com/avatar/{{.EmailHash}}?s=100&d=monsterid" style="border-radius: 100%; border-color: var(--primary-color); border-width: 2px; border-style: solid; height: 30px; width: 30px;">
+        <div style="margin-top: auto; margin-bottom: auto; margin-left: 10px;" class="noselect">
             {{.Name}} {{.Email}}
         </div>
-        <img class="iconBtn" style="width: 30pt; margin-left: 20pt;" onclick="logout(); event.stopPropagation(); return false;" src="/assets/logout.svg"/>
+        <img class="iconBtn" style="width: 30px; margin-left: 20px;" onclick="logout(); event.stopPropagation(); return false;" src="/assets/logout.svg"/>
     </div>
     <div id="emailSelector" class="dropdown-content">
         {{range .EmailsIndexes}}
@@ -12,6 +12,6 @@
         {{end}}
     </div>
     <div class="noselect" style="position: relative;">
-        <img src="/assets/down.svg" style="position: absolute; bottom: 0; right: 0; margin-right: -5pt; margin-bottom: -5pt; height: 7pt;">
+        <img src="/assets/down.svg" style="position: absolute; bottom: 0; right: 0; margin-right: -5px; margin-bottom: -5px; height: 7px;">
     </div>
 </div>