fix

blog/assets/style.css

@@ -59,7 +59,7 @@ html,body{
     padding:5px;
     border-top: 1px solid #878887;
 }
-#center{
+#desktop{
     height: calc(100% - 80px);
     overflow-y: auto;
     padding-left: 15px;
@@ -457,3 +457,80 @@ div.time-travel a{
     flex:1;
     color:#3170B2;
 }
+afx-app-window div.afx-window-wrapper{
+    border:1px solid #a6a6a6;
+    /*box-shadow: 1px 1px 1px #cbcbcb;*/
+    box-shadow: 1px 1px 1px #9f9F9F;
+    border-radius: 5px;
+    background-color:#dfdfdf;
+    padding:0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+afx-app-window.unactive > div.afx-window-wrapper{
+    background-color: #f6f6f6;
+}
+
+afx-app-window ul.afx-window-top{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    padding:0;
+    height: 20px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window ul.afx-window-top li{
+    list-style: none;
+    margin-left: 3px;
+    margin-top:4px;
+    
+}
+afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{
+    width: 11px;
+    height: 11px;
+    border-radius: 10px;
+}
+afx-app-window ul li.afx-window-close{
+    background-color: #Fc605b;
+     float:left;
+}
+afx-app-window ul li.afx-window-minimize{
+    background-color: #fec041;
+     float:left;
+}
+afx-app-window ul li.afx-window-maximize{
+    background-color: #35cc4b;
+     float:left;
+}
+
+afx-app-window ul li.afx-window-title{
+    margin-top:1px;
+    float:none;
+    overflow: hidden;
+    padding-left: 5px;
+    padding-right: 5px;
+    text-align: center;
+}
+
+afx-app-window div.afx-window-content
+{
+    overflow: hidden;
+    width: 100%;
+    background-color: white;
+    flex-grow: 1;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+afx-app-window div.afx-window-grip{
+    height: 10px;
+    width: 10px;
+    background-color: transparent;
+}
+afx-hbox.inputbox{
+    margin-left: 10px;
+    margin-right: 10px;
+    border-bottom: 1px solid #e5e5e5;
+}

blog/view/top.ls

@@ -23,6 +23,10 @@
         <script src="rst/gscripts/jquery-3.2.1.min.js"> </script>
         <script src="rst/hljs/highlight.pack.js"> </script>
         <script src="rst/hljs/highlightjs-line-numbers.min.js"> </script>
+        <script src="rst/gscripts/riot.min.js"> </script>
+        <script src="rst/resources/antos_tags.js"></script>
+        <script src="rst/main.js"></script>
+
         <script>
             $(document).ready(function() {
                 $('pre code').each(function(i, block) {
@@ -72,7 +76,7 @@
                 <ul>
                         <li><i class = "fa fa-home"></i><a href="./">Home</a></li>
                         <li ><i class = "fa fa-address-card"></i><a href="https://info.lxsang.me" >Porfolio</a></li>
-                        <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="" >Contact</a></li>
+                        <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="mailtoMe('rst/sendto.html')" >Contact</a></li>
                         <?lua
                         if not HEADER.mobile then
                         ?>
@@ -89,6 +93,6 @@
                 ?>
             </div>
         </div>
-        <div id = "center">
+        <div id = "desktop">
             <div id = "container">
              

grs/Makefile

@@ -1,6 +1,6 @@
 BUILDDIR = ../build/grs
 
-copyfiles =  font-awesome.css fonts images showdown.min.js ubuntu-regular.css mainsite.css sendto.html hermit-light.css hljs
+copyfiles =  font-awesome.css fonts images showdown.min.js main.js ubuntu-regular.css mainsite.css sendto.html hermit-light.css hljs
 
 main:
 	- mkdir $(BUILDDIR)

grs/main.js

@@ -0,0 +1,62 @@
+var scheme = undefined;
+String.prototype.__ = function()
+{
+    return this
+}
+function mailtoMe( sch)
+{
+    if(scheme) return;
+    // get scheme
+    $.get(sch)
+    .done(function(d) {
+        scheme = $.parseHTML(d)
+        var obs = riot.observable()
+        $(scheme).css("visibility","hidden")
+        $("#desktop" ).append(scheme)
+        obs.on("exit", function(){
+            $(scheme).remove()
+            scheme = undefined
+        })
+        obs.on("rendered", function(d){
+            $(".afx-window-title", scheme).html("Send me an email")
+            $("[data-id='send']", scheme).click(function(){
+                var status = $("[data-id='status']", scheme)
+                status.html("");
+                var els = $("[data-class='data']", scheme)
+                var data = {}
+                
+                for(var i = 0; i < els.length; i++)
+                    data[els[i].name] = $(els[i]).val()
+                if(data.email == "" || data.subject == "" || data.content == "" || data.name == "")
+                    return status.html("Please enter all the fields");
+                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                if(!re.test(String(data.email).toLowerCase()))
+                    return status.html("Email is not correct");
+                
+                $.ajax({
+                    type: 'POST',
+                    url: "info/sendmail.lua",
+                    contentType: 'application/json',
+                    data: JSON.stringify(data),
+                    dataType: 'json',
+                    success: null
+                }).done(function(r){
+                    if(r.error)
+                        alert(r.error)
+                    else
+                    {
+                        obs.trigger("exit")
+                        alert("Email sent. Thank")
+                    }
+                }).fail(function(){
+                    alert("Service unavailable at the moment")
+                })
+            })
+            $(scheme).css("visibility","visible")
+        })
+        riot.mount(scheme, {observable:obs})
+    })
+    .fail(function() {
+        alert( "Cannot get the form" );
+    })
+}

index.ls

@@ -27,70 +27,7 @@
         <script src="grs/gscripts/jquery-3.2.1.min.js"> </script>
         <script src="grs/gscripts/riot.min.js"> </script>
         <script src="grs/resources/antos_tags.js"></script>
-        <script>
+        <script src="grs/main.js"></script>
-            var scheme = undefined;
-            String.prototype.__ = function()
-            {
-                return this
-            }
-            function mailtoMe()
-            {
-                if(scheme) return;
-                // get scheme
-                $.get( "grs/sendto.html")
-                .done(function(d) {
-                    scheme = $.parseHTML(d)
-                    var obs = riot.observable()
-                    $(scheme).css("visibility","hidden")
-                    $("#desktop").append(scheme)
-                    obs.on("exit", function(){
-                        $(scheme).remove()
-                        scheme = undefined
-                    })
-                    obs.on("rendered", function(d){
-                        $(".afx-window-title", scheme).html("Send me an email")
-                        $("[data-id='send']", scheme).click(function(){
-                            var status = $("[data-id='status']", scheme)
-                            status.html("");
-                            var els = $("[data-class='data']", scheme)
-                            var data = {}
-                            
-                            for(var i = 0; i < els.length; i++)
-                                data[els[i].name] = $(els[i]).val()
-                            if(data.email == "" || data.subject == "" || data.content == "" || data.name == "")
-                                return status.html("Please enter all the fields");
-                            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-                            if(!re.test(String(data.email).toLowerCase()))
-                                return status.html("Email is not correct");
-                            
-                            $.ajax({
-                                type: 'POST',
-                                url: "info/sendmail.lua",
-                                contentType: 'application/json',
-                                data: JSON.stringify(data),
-                                dataType: 'json',
-                                success: null
-                            }).done(function(r){
-                                if(r.error)
-                                    alert(r.error)
-                                else
-                                {
-                                    obs.trigger("exit")
-                                    alert("Email sent. Thank")
-                                }
-                            }).fail(function(){
-                                alert("Service unavailable at the moment")
-                            })
-                        })
-                        $(scheme).css("visibility","visible")
-                    })
-                    riot.mount(scheme, {observable:obs})
-                })
-                .fail(function() {
-                    alert( "Cannot get the form" );
-                })
-            }
-        </script>
     </head>
     <body>
         <div id = "desktop">
@@ -98,7 +35,7 @@
                 <ul>
                     <li ><i class = "fa fa-address-card"></i><a href="https://info.lxsang.me" >Porfolio</a></li>
                     <li><i class = "fa fa-newspaper-o"></i><a href="https://blog.lxsang.me" >Blog</a></li>
-                    <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="mailtoMe()" >Contact</a></li>
+                    <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="mailtoMe('grs/sendto.html')" >Contact</a></li>
                     <li > <i class = "fa fa-globe"></i><a href = "https://os.lxsang.me" target="_blank">Web OS</a></li>
                 </ul>
             </div>