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,20 +71,27 @@ $(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) {
+  $('.foreground').off('click').click(function() {
+      $('.input').fadeOut(200);
+      $('.foreground').fadeOut(200);
+      $('.new').data("opened", false);
+  });
+
+  $('#new-file-form').submit(function(event) {
     event.preventDefault();
-      var value = $(this).val(),
+    var value = $('#new-file-name').val(),
       splited = value.split(":"),
       filename = "",
       archetype = "";
@@ -140,7 +147,6 @@ $(document).on('page:browse', function() {
     });
 
     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 }}