Update content behavior

- Move email details to separate template
- Add faders for scrollable
- Improve look ad feel

css/controls.css

@@ -0,0 +1,93 @@
+.btn {
+    position: relative;
+
+    display: block;
+    padding:8pt;
+
+    overflow: hidden;
+
+    border-width: 0;
+    outline: none;
+    box-shadow: 0 1pt 4pt rgba(0, 0, 0, .6);
+
+    background-color: #41cd52;
+    color: #ecf0f1;
+
+    font-size: 12pt;
+    font-weight: bold;
+    text-align: center;
+    transition: background-color .3s;
+}
+
+.btn:hover, .btn:focus {
+    background-color: #3ab849;
+    cursor: pointer;
+}
+
+.btn > * {
+    position: relative;
+}
+
+.btn span {
+    display: block;
+    padding: 12px 24px;
+}
+
+.btn:before {
+    content: "";
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    display: block;
+    width: 0;
+    padding-top: 0;
+
+    border-radius: 100%;
+
+    background-color: rgba(236, 240, 241, .3);
+
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.btn:active:before {
+    width: 120%;
+    padding-top: 120%;
+
+    transition: width .2s ease-out, padding-top .2s ease-out;
+}
+
+.btn img {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.scrollable {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.fadeOut {
+    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0,0)), color-stop(100%,rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C */
+}
+
+.fadeIn {
+    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 1)),  color-stop(100%,rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,  rgba(0, 0, 0, 0) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,  rgba(0, 0, 0, 0) 100%); /* W3C */
+}

css/index.css

@@ -20,8 +20,7 @@ table {
     margin-right: 5pt!important;
     margin-bottom: 30pt!important;
 
-    overflow-y: auto;
-    border-radius: 2pt;
+    padding: 5pt
 }
 
 .emailDetails {

css/styles.css

@@ -9,7 +9,6 @@ body {
 table.mailList {
     width: 100%;
     table-layout: fixed;
-    overflow: hidden;
 }
 
 .mailList td {
@@ -31,40 +30,9 @@ table.mailList {
     background-color: #ebffee;
 }
 
-
-/* .mailList tr:before {
-    content: "";
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    display: block;
-    width: 0;
-    padding-top: 0;
-
-    border-radius: 100%;
-
-    background-color: rgba(236, 240, 241, .3);
-
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.mailList tr:active:before {
-    width: 120%;
-    padding-top: 120%;
-
-    transition: width .2s ease-out, padding-top .2s ease-out;
-} */
-
 td.fromCol {
     width: 300pt;
     font-weight: bold;
-
 }
 
 td.subjCol {
@@ -81,92 +49,13 @@ td.dateCol {
     white-space: nowrap;
 }
 
-
-.btn {
-    position: relative;
-
-    display: block;
-    padding:8pt;
-
-    overflow: hidden;
-
-    border-width: 0;
-    outline: none;
-    border-radius: 2pt;
-    box-shadow: 0 1pt 4pt rgba(0, 0, 0, .6);
-
-    background-color: #41cd52;
-    color: #ecf0f1;
-
-    font-size: 12pt;
-    font-weight: bold;
-    transition: background-color .3s;
-}
-
-.btn:hover, .btn:focus {
-    background-color: #3ab849;
-}
-
-.btn > * {
-    position: relative;
-}
-
-.btn span {
-    display: block;
-    padding: 12px 24px;
-}
-
-.btn:before {
-    content: "";
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    display: block;
-    width: 0;
-    padding-top: 0;
-
-    border-radius: 100%;
-
-    background-color: rgba(236, 240, 241, .3);
-
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.btn:active:before {
-    width: 120%;
-    padding-top: 120%;
-
-    transition: width .2s ease-out, padding-top .2s ease-out;
-}
-
-.btn.orange {
-    background-color: #e67e22;
-}
-
-.btn.orange:hover, .btn.orange:focus {
-    background-color: #d35400;
-}
-
-.btn.red {
-    background-color: #e74c3c;
-}
-
-.btn.red:hover, .btn.red:focus {
-    background-color: #c0392b;
-}
-
 .materialLevel1 {
     box-shadow: 0 1pt 3pt rgba(0, 0, 0, .6);
     margin-top: 1pt;
     margin-bottom: 1pt;
     margin-left: 4pt;
-    padding-right: 4pt;
+    margin-right: 4pt;
+    border-radius: 3pt;
 }
 
 .materialLevel2 {
@@ -174,7 +63,8 @@ td.dateCol {
     margin-top: 1pt;
     margin-bottom: 1pt;
     margin-left: 5pt;
-    padding-right: 5pt;
+    margin-right: 5pt;
+    border-radius: 3pt;
 }
 
 .copyrights {

main.go

@@ -118,7 +118,7 @@ func (e *GofixEngine) Run() {
 
 func (e *GofixEngine) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	fmt.Println(r.URL.Path)
-	if strings.Index(r.URL.Path, "/css/") == 0 {
+	if strings.Index(r.URL.Path, "/css/") == 0 || strings.Index(r.URL.Path, "/assets/") == 0 {
 		e.fileServer.ServeHTTP(w, r)
 	} else {
 		user := r.URL.Query().Get("user")

templates/email.html

@@ -0,0 +1,4 @@
+<div class="btn materialLevel1" style="width: 40pt;" onclick="document.getElementById('details').style.display='none';">
+    <img src="assets/back.svg" style="width: 20pt"/>
+</div>
+test email

templates/index.html

@@ -5,20 +5,19 @@
         <link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
         <link type="text/css" href="css/index.css" rel="stylesheet">
         <link type="text/css" href="css/styles.css" rel="stylesheet">
+        <link type="text/css" href="css/controls.css" rel="stylesheet">
     </head>
     <body>
         <div>
             <div class="foldersBox">
-                <button class="btn materialLevel1" style="width: 130pt">New email</button>
+                <div class="btn materialLevel1" style="width: 110pt">New email</div>
                 {{.Folders}}
             </div>
             <div class="materialLevel1 contentBox">
                 {{.MailList}}
             </div>
             <div id="details" class="materialLevel2 contentBox emailDetails" style="display: none;">
-                    <button class="btn materialLevel1" onclick="document.getElementById('details').style.display='none';">Back</button><br/>
-                    test email
-                </div>
+            </div>
             <p class="copyrights">gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</p>
         </div>
     </body>

templates/maillist.html

@@ -1,13 +1,17 @@
-<table class="mailList">
-    <tbody>
-        {{range .}}
-        <tr onclick="document.getElementById('details').style.display='block';">
-            <td class="fromCol">{{.Header.From}}</td>
-            <td class="subjCol">{{.Header.Subject}}</td>
-            <td class="dateCol">{{.Header.Date}}</td>
-        </tr>
-        {{else}}
-        <tr><td><b>Mail folder is empty</b></td>></tr>
-        {{end}}
-    </tbody>
-</table>
+<div class="scrollable">
+    <div class="fadeIn" style="position: absolute; top: 5pt; left: 0; right: 0; height: 10pt"></div>
+        <table class="mailList" >
+            <tbody>
+                {{range .}}
+                <tr onclick="document.getElementById('details').style.display='block';">
+                    <td class="fromCol">{{.Header.From}}</td>
+                    <td class="subjCol">{{.Header.Subject}}</td>
+                    <td class="dateCol">{{.Header.Date}}</td>
+                </tr>
+                {{else}}
+                <tr><td><b>Mail folder is empty</b></td>></tr>
+                {{end}}
+            </tbody>
+        </table>
+    <div class="fadeOut" style="position: absolute; bottom: 5pt; left: 0; right: 0; height:10pt"></div>
+</div>