some style updates like loading animation

assets/public_src/css/main.css

@@ -474,11 +474,12 @@ fieldset input {
 .browse tr {
   line-height: 2em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  -webkit-transition: .2s ease background-color;
   transition: .2s ease background-color;
 }
 
 .browse tr:hover {
-  background-color: rgba(0,0,0,0.04);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 .browse th.buttons {
@@ -505,6 +506,7 @@ fieldset input {
   width: 182%;
 }
 
+
 /* POPUS */
 
 #foreground {
@@ -524,34 +526,157 @@ fieldset input {
   max-width: 25em;
   width: 95%;
   top: 10%;
-  left:50%;
+  left: 50%;
   -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  transform: translateX(-50%);
   background-color: #006064;
   color: #fff;
   padding: 1em 2em;
   border-radius: .5em;
-  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 }
 
 .popup input[type="text"] {
   border-bottom: .15em solid white;
 }
 
-@media screen and (max-width: 900px) {
+
-  .blocks {
+/* LOADING */
-    -webkit-column-count: 3;
+
-       -moz-column-count: 3;
+#loading {
-            column-count: 3;
+  z-index: 99999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.41);
+}
+
+#loading .centerize {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.sk-folding-cube {
+  margin: 20px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  -webkit-transform: rotateZ(45deg);
+  transform: rotateZ(45deg);
+}
+
+.sk-folding-cube .sk-cube {
+  float: left;
+  width: 50%;
+  height: 50%;
+  position: relative;
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+.sk-folding-cube .sk-cube:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
+  animation: sk-foldCubeAngle 2.4s infinite linear both;
+  -webkit-transform-origin: 100% 100%;
+  transform-origin: 100% 100%;
+}
+
+.sk-folding-cube .sk-cube2 {
+  -webkit-transform: scale(1.1) rotateZ(90deg);
+  transform: scale(1.1) rotateZ(90deg);
+}
+
+.sk-folding-cube .sk-cube3 {
+  -webkit-transform: scale(1.1) rotateZ(180deg);
+  transform: scale(1.1) rotateZ(180deg);
+}
+
+.sk-folding-cube .sk-cube4 {
+  -webkit-transform: scale(1.1) rotateZ(270deg);
+  transform: scale(1.1) rotateZ(270deg);
+}
+
+.sk-folding-cube .sk-cube2:before {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+
+.sk-folding-cube .sk-cube3:before {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.sk-folding-cube .sk-cube4:before {
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+
+@-webkit-keyframes sk-foldCubeAngle {
+  0%,
+  10% {
+    -webkit-transform: perspective(140px) rotateX(-180deg);
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0;
+  }
+  25%,
+  75% {
+    -webkit-transform: perspective(140px) rotateX(0deg);
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1;
+  }
+  90%,
+  100% {
+    -webkit-transform: perspective(140px) rotateY(180deg);
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0;
   }
 }
 
+@keyframes sk-foldCubeAngle {
+  0%,
+  10% {
+    -webkit-transform: perspective(140px) rotateX(-180deg);
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0;
+  }
+  25%,
+  75% {
+    -webkit-transform: perspective(140px) rotateX(0deg);
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1;
+  }
+  90%,
+  100% {
+    -webkit-transform: perspective(140px) rotateY(180deg);
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .blocks {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+  }
+}
 
 @media screen and (max-width: 600px) {
   .blocks {
     -webkit-column-count: 2;
-       -moz-column-count: 2;
+    -moz-column-count: 2;
-            column-count: 2;
+    column-count: 2;
   }
   body > nav span {
     display: none;
@@ -562,8 +687,8 @@ fieldset input {
   body > nav .container {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
+    -ms-flex-pack: justify;
-            justify-content: space-between;
+    justify-content: space-between;
     text-align: center;
   }
   .hideable {
@@ -574,8 +699,8 @@ fieldset input {
 @media screen and (max-width: 350px) {
   .blocks {
     -webkit-column-count: 1;
-       -moz-column-count: 1;
+    -moz-column-count: 1;
-            column-count: 1;
+    column-count: 1;
   }
   .browse .actions {
     text-align: center;

assets/public_src/js/browse.js

@@ -1,31 +1,43 @@
+// When the page Browse is opened
 $(document).on('page:browse', function() {
   var foreground = '#foreground';
 
   /* DELETE FILE */
-
+  var removeForm = 'form#delete';
-  var remove = new Object();
+  var removeItem = null;
-  remove.selector = 'form#delete';
-  remove.form = $(remove.selector);
-  remove.row = '';
-  remove.button = '';
-  remove.url = '';
 
   $('#content').on('click', '.delete', function(event) {
     event.preventDefault();
-    remove.button = $(this);
+
-    remove.row = $(this).parent().parent();
+    // Gets the information about the file the user wants to delete
+    removeItem = new Object();
+    removeItem.url = $(this).data("file");
+    removeItem.row = $(this).parent().parent();
+    removeItem.filename = $(removeItem.row).find('.filename').text();
+
+    // Shows the remove form and the foreground
+    $(removeForm).find('span').text(removeItem.filename);
+    $(removeForm).fadeIn(200)
     $(foreground).fadeIn(200);
-    remove.url = remove.row.find('.filename').text();
+
-    remove.form.find('span').text(remove.url);
-    remove.form.fadeIn(200);
     return false;
   });
 
-  $('#content').on('submit', remove.selector, function(event) {
+  $('#content').on('submit', removeForm, function(event) {
     event.preventDefault();
 
+    // Checks if the item to remove is defined
+    if (removeItem == null) {
+      notification({
+        text: "Something is wrong with your form.",
+        type: "error"
+      });
+      return false;
+    }
+
+    // Makes the DELETE request to the server
     var request = new XMLHttpRequest();
-    request.open("DELETE", remove.button.data("file"));
+    request.open("DELETE", removeItem.url);
     request.send();
     request.onreadystatechange = function() {
       if (request.readyState == 4) {
@@ -34,8 +46,8 @@ $(document).on('page:browse', function() {
           timeout = 5000;
 
         $(foreground).fadeOut(200);
-        remove.form.fadeOut(200);
+        $(removeForm).fadeOut(200);
-        remove.row.fadeOut(200);
+        $(removeItem.row).fadeOut(200);
 
         if (request.status != 200) {
           type = "error";
@@ -47,6 +59,8 @@ $(document).on('page:browse', function() {
           type: type,
           timeout: timeout
         });
+
+        removeItem = null;
       }
     }
 
@@ -59,6 +73,8 @@ $(document).on('page:browse', function() {
     event.preventDefault();
     files = event.target.files;
 
+    $('#loading').fadeIn();
+
     // Create a formdata object and add the files
     var data = new FormData();
     $.each(files, function(key, value) {
@@ -83,17 +99,23 @@ $(document).on('page:browse', function() {
         timeout: 5000
       });
 
+      $('#loading').fadeOut();
+
       $.pjax({
         url: window.location.pathname,
         container: '#content'
       })
     }).fail(function(data) {
+      $('#loading').fadeOut();
+
       notification({
         text: 'Something went wrong.',
         type: 'error'
       });
       console.log(data);
     });
+
+
     return false;
   });
 
@@ -104,34 +126,31 @@ $(document).on('page:browse', function() {
   });
 
   /* NEW FILE */
-
+  var createForm = 'form#new',
-  var create = new Object();
+    createInput = createForm + ' input[type="text"]';
-  create.selector = 'form#new';
-  create.form = $(create.selector);
-  create.input = create.selector + ' input[type="text"]';
-  create.button = '';
-  create.url = '';
 
   $('#content').on('click', '.new', function(event) {
     event.preventDefault();
-    create.button = $(this);
+
     $(foreground).fadeIn(200);
-    create.form.fadeIn(200);
+    $(createForm).fadeIn(200);
+
     return false;
   });
 
-  $('#content').on('keypress', create.input, function(event) {
+  $('#content').on('keypress', createInput, function(event) {
+    // If it's "enter" key, submit the
     if (event.keyCode == 13) {
       event.preventDefault();
-      $(create.form).submit();
+      $(createForm).submit();
       return false;
     }
   });
 
-  $('#content').on('submit', create.selector, function(event) {
+  $('#content').on('submit', createForm, function(event) {
     event.preventDefault();
 
-    var value = create.form.find('input[type="text"]').val(),
+    var value = $(createInput).val(),
       splited = value.split(":"),
       filename = "",
       archetype = "";
@@ -197,39 +216,32 @@ $(document).on('page:browse', function() {
   });
 
   /* RENAME FILE */
-
+  var renameForm = 'form#rename',
-  var rename = new Object();
+    renameInput = renameForm + ' input[type="text"]',
-  rename.selector = 'form#rename';
+    renameItem = null;
-  rename.form = $(rename.selector);
-  rename.input = rename.selector + ' input[type="text"]';
-  rename.button = '';
-  rename.url = '';
 
   $('#content').on('click', '.rename', function(event) {
     event.preventDefault();
-    rename.button = $(this);
+    renameItem = $(this).parent().parent().find('.filename').text();
-
     $(foreground).fadeIn(200);
-    rename.url = $(this).parent().parent().find('.filename').text();
+    $(renameForm).fadeIn(200);
-    rename.form.fadeIn(200);
+    $(renameForm).find('span').text(renameItem);
-    rename.form.find('span').text(rename.url);
+    $(renameForm).find('input[type="text"]').val(renameItem);
-    rename.form.find('input[type="text"]').val(rename.url);
-
     return false;
   });
 
-  $('#content').on('keypress', rename.input, function(event) {
+  $('#content').on('keypress', renameInput, function(event) {
     if (event.keyCode == 13) {
       event.preventDefault();
-      $(rename.form).submit();
+      $(renameForm).submit();
       return false;
     }
   });
 
-  $('#content').on('submit', rename.selector, function(event) {
+  $('#content').on('submit', renameForm, function(event) {
     event.preventDefault();
 
-    var filename = rename.form.find('input[type="text"]').val();
+    var filename = $(this).find('input[type="text"]').val();
     if (filename === "") {
       return false;
     }
@@ -243,7 +255,7 @@ $(document).on('page:browse', function() {
     };
 
     var request = new XMLHttpRequest();
-    request.open("PUT", rename.url);
+    request.open("PUT", renameItem);
     request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
     request.send(JSON.stringify(content));
     request.onreadystatechange = function() {
@@ -267,6 +279,8 @@ $(document).on('page:browse', function() {
           type: type,
           timeout: timeout
         });
+
+        renameItem = null;
       }
     }
 
@@ -274,35 +288,33 @@ $(document).on('page:browse', function() {
   });
 
   /* GIT ACTIONS */
+  var gitButton = 'button.git',
+    gitForm = 'form#git',
+    gitInput = gitForm + ' input[type="text"]';
 
-  var git = new Object();
+  $('#content').on('click', gitButton, function(event) {
-  git.selector = 'form#git';
-  git.form = $(git.selector);
-  git.input = git.selector + ' input[type="text"]';
-
-  $('#content').on('click', 'button.git', function(event) {
     event.preventDefault();
     $(foreground).fadeIn(200);
-    git.form.fadeIn(200);
+    $(gitForm).fadeIn(200);
     return false;
   });
 
-  $('#content').on('keypress', git.input, function(event) {
+  $('#content').on('keypress', gitInput, function(event) {
     if (event.keyCode == 13) {
       event.preventDefault();
-      $(git.form).submit();
+      $(gitForm).submit();
       return false;
     }
   });
 
-  $('#content').on('submit', git.selector, function(event) {
+  $('#content').on('submit', gitForm, function(event) {
     event.preventDefault();
 
-    var value = git.form.find('input[type="text"]').val();
+    var value = $(this).find('input[type="text"]').val();
 
     if (value == "") {
       notification({
-        text: "You have to write something. If you want to close the box, click outside of the box.",
+        text: "You have to write something. If you want to close the box, click outside of it.",
         type: 'warning',
         timeout: 5000
       });
@@ -323,7 +335,16 @@ $(document).on('page:browse', function() {
         if (request.status == 200) {
           notification({
             text: data.message,
-            type: "success"
+            type: "success",
+            timeout: 5000
+          });
+
+          $(gitForm).fadeOut(200);
+          $(foreground).fadeOut(200);
+
+          $.pjax({
+            url: window.location.pathname,
+            container: '#content'
           });
         } else {
           notification({
@@ -349,10 +370,10 @@ $(document).on('page:browse', function() {
   $('#content').on('click', foreground, function(event) {
     event.preventDefault();
     $(foreground).fadeOut(200);
-    create.form.fadeOut(200);
+    $(createForm).fadeOut(200);
-    rename.form.fadeOut(200);
+    $(renameForm).fadeOut(200);
-    remove.form.fadeOut(200);
+    $(removeForm).fadeOut(200);
-    git.form.fadeOut(200);
+    $(gitForm).fadeOut(200);
     return false;
   });
 });

assets/templates/browse.tmpl

@@ -54,6 +54,17 @@
   </div>
 </main>
 
+<div id="loading" class="hidden">
+  <div class="centerize">
+    <div class="sk-folding-cube">
+      <div class="sk-cube1 sk-cube"></div>
+      <div class="sk-cube2 sk-cube"></div>
+      <div class="sk-cube4 sk-cube"></div>
+      <div class="sk-cube3 sk-cube"></div>
+    </div>
+  </div>
+</div>
+
 <div id="foreground" class="hidden"></div>
 
 <form class="popup hidden" id="delete">