updates and remove main.css

assets/css/src/sass/_animations.scss

@@ -0,0 +1,62 @@
+#loading {
+  position        : fixed;
+  height          : calc(100% - 3em);
+  width           : 100%;
+  top             : 3em;
+  background-color: rgba(0,0,0,0.6);
+  z-index         : 99999999;
+  display         : none;
+}
+
+.double-bounce {
+  width    : 5em;
+  height   : 5em;
+  margin   : 0 auto;
+  position : relative;
+  top      : 50%;
+  transform: translateY(-50%);
+}
+
+.double-bounce .child {
+  width            : 100%;
+  height           : 100%;
+  border-radius    : 50%;
+  background-color : #fff;
+  opacity          : .6;
+  position         : absolute;
+  top              : 0;
+  left             : 0;
+  -webkit-animation: doubleBounce 2s infinite ease-in-out;
+  animation        : doubleBounce 2s infinite ease-in-out;
+}
+
+.double-bounce .double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay        : -1.0s;
+}
+
+@-webkit-keyframes doubleBounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+    transform        : scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1);
+    transform        : scale(1);
+  }
+}
+
+@keyframes doubleBounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+    transform        : scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1);
+    transform        : scale(1);
+  }
+}

assets/css/src/sass/main.scss

@@ -98,6 +98,10 @@ footer p {
   margin: 0;
 }
 
+main {
+  width: 100%;
+}
+
 .content {
   margin   : 1.5em auto;
   width    : 80%;
@@ -392,4 +396,5 @@ h3:hover > button.add {
   border-bottom: 1px solid rgba(0,0,0,0.03);
 }
 @import "scrollbar";
-@import "notifications";
+@import "notifications";
+@import "animations";

assets/js/src/app.js

@@ -3,9 +3,9 @@ $(document).ready(function() {
 });
 
 $(document).on('ready pjax:success', function() {
+  $('textarea.auto-size').textareaAutoSize();
   // Starts the perfect scroolbar plugin
   $('.scroll').perfectScrollbar();
-  $('textarea.auto-size').textareaAutoSize();
 
   // Toggles between preview and editing mode
   $("#preview").click(function(event) {
@@ -48,17 +48,17 @@ $(document).on('ready pjax:success', function() {
     event.preventDefault();
 
     var data = JSON.stringify($(this).serializeJSON()),
-      url = $(this).attr('action'),
       button = $(this).find("input[type=submit]:focus");
 
     console.log(data)
 
     $.ajax({
       type: 'POST',
-      url: url,
+      url: window.location,
       data: data,
       headers: {
-        'X-Regenerate': button.data("regenerate")
+        'X-Regenerate': button.data("regenerate"),
+        'X-Content-Type': button.data("type")
       },
       dataType: 'json',
       encode: true,
@@ -104,4 +104,11 @@ $(document).on('ready pjax:success', function() {
     fieldset.append("<input name=\"" + fieldset.attr("name") + "\" id=\"" + fieldset.attr("name") + "\" value=\"\"></input><br>");
     return false;
   });
-});
+});
+
+$(document).on('pjax:send', function() {
+  $('#loading').fadeIn()
+})
+$(document).on('pjax:complete', function() {
+  $('#loading').fadeOut()
+})