some ui updates

assets/src/css/main.css

@@ -106,7 +106,7 @@ body > nav ul li a {
 }
 
 body > nav ul li a:hover {
-  background-color: rgba(0,0,0,0.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 
@@ -329,8 +329,7 @@ fieldset h3 {
   overflow: hidden;
 }
 
-.block input,
-fieldset input {
+input[type="text"] {
   border: 0;
   outline: 0;
   background-color: transparent;
@@ -463,23 +462,34 @@ fieldset input {
   width: 182%;
 }
 
-.input {
+.foreground {
   z-index: 99999;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
-  background-color: rgba(0,0,0,0.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
-.input div {
+.input {
+  z-index: 999999;
+  position: fixed;
   margin: 0 auto;
-  max-width: 200px;
+  max-width: 25em;
   width: 95%;
-  position: relative;
- top: 50%;
- transform: translateY(-50%);
+  top: 10%;
+  left: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);
+}
+
+.input input[type="text"] {
+  border-bottom: .15em solid white;
 }
 
 @media screen and (max-width: 600px) {

assets/src/js/browse.js

@@ -71,76 +71,82 @@ $(document).on('page:browse', function() {
     event.preventDefault();
 
     if ($(this).data("opened")) {
-      $('#new-file').fadeOut(200);
+      $('.foreground').fadeOut(200);
+      $('#new-file-form').fadeOut(200);
       $(this).data("opened", false);
     } else {
-      $('#new-file').fadeIn(200);
+      $('.foreground').fadeIn(200);
+      $('#new-file-form').fadeIn(200);
       $(this).data("opened", true);
     }
 
     return false;
   });
 
-  $('#new-file').on('keypress', 'input', function(event) {
-    if (event.keyCode == 13) {
-      event.preventDefault();
-      var value = $(this).val(),
-        splited = value.split(":"),
-        filename = "",
-        archetype = "";
+  $('.foreground').off('click').click(function() {
+      $('.input').fadeOut(200);
+      $('.foreground').fadeOut(200);
+      $('.new').data("opened", false);
+  });
 
-      if (value == "") {
-        notification({
-          text: "You have to write something. If you want to close the box, click the button again.",
-          type: 'warning',
-          timeout: 5000
-        });
+  $('#new-file-form').submit(function(event) {
+    event.preventDefault();
+    var value = $('#new-file-name').val(),
+      splited = value.split(":"),
+      filename = "",
+      archetype = "";
 
-        return false;
-      } else if (splited.length == 1) {
-        filename = value;
-      } else if (splited.length == 2) {
-        filename = splited[0];
-        archetype = splited[1];
-      } else {
-        notification({
-          text: "Hmm... I don't understand you. Try writing something like 'name[:archetype]'.",
-          type: 'error'
-        });
+    if (value == "") {
+      notification({
+        text: "You have to write something. If you want to close the box, click the button again.",
+        type: 'warning',
+        timeout: 5000
+      });
 
-        return false;
-      }
-
-      var content = '{"filename": "' + filename + '", "archetype": "' + archetype + '"}';
-
-      $.ajax({
-        type: 'POST',
-        url: window.location.pathname,
-        data: content,
-        dataType: 'json',
-        encode: true,
-      }).done(function(data) {
-        notification({
-          text: "File created successfully.",
-          type: 'success',
-          timeout: 5000
-        });
-
-        $.pjax({
-          url: window.location.pathname.replace("browse", "edit") + filename,
-          container: '#content'
-        })
-      }).fail(function(data) {
-        // error types
-        notification({
-          text: 'Something went wrong.',
-          type: 'error'
-        });
-        console.log(data);
+      return false;
+    } else if (splited.length == 1) {
+      filename = value;
+    } else if (splited.length == 2) {
+      filename = splited[0];
+      archetype = splited[1];
+    } else {
+      notification({
+        text: "Hmm... I don't understand you. Try writing something like 'name[:archetype]'.",
+        type: 'error'
       });
 
       return false;
     }
+
+    var content = '{"filename": "' + filename + '", "archetype": "' + archetype + '"}';
+
+    $.ajax({
+      type: 'POST',
+      url: window.location.pathname,
+      data: content,
+      dataType: 'json',
+      encode: true,
+    }).done(function(data) {
+      notification({
+        text: "File created successfully.",
+        type: 'success',
+        timeout: 5000
+      });
+
+      $.pjax({
+        url: window.location.pathname.replace("browse", "edit") + filename,
+        container: '#content'
+      })
+    }).fail(function(data) {
+      // error types
+      notification({
+        text: 'Something went wrong.',
+        type: 'error'
+      });
+      console.log(data);
+    });
+
+    return false;
   });
 
   $("#upload").click(function(event) {

templates/browse.tmpl

@@ -9,10 +9,6 @@
         <input type="file" value="Upload" multiple>
         <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
         <button class="default new">New <i class="fa fa-plus"></i></button>
-        <div id="new-file">
-          Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.
-          <input id="new-file-name" type="text">
-        </div>
       </div>
     </div>
   </div>
@@ -57,9 +53,19 @@
   </div>
 </main>
 
-<!-- <div class="input">
-  <div>
-    <p>Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.</p>
-  </div>
-</div> -->
+<div class="foreground hidden"></div>
+
+<form id="new-file-form" class="input hidden">
+  <h3>New file</h3>
+  <p>Write the name of the new file. If you want to use an archetype, add <code>:archetype</code> in the end, replacing 'archetype' by its name.</p>
+  <input id="new-file-name" type="text" placeholder="Write here...">
+  <p class="right">
+    <input type="submit" value="Create">
+  </p>
+</form>
+
+<div class="input hidden" id="rename-form">
+  <h3>Rename file</h3>
+  <input id="new-file-name" type="text" placeholder="New name...">
+</div>
 {{ end }}