chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

some ui updates

This commit is contained in:
Henrique Dias 2016-02-07 17:16:09 +00:00
parent 7ce34e0422
commit b99d58a35b
5 changed files with 98 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
assets/src/css/main.css
View File

@ -329,8 +329,7 @@ fieldset h3 {
overflow: hidden; overflow: hidden;
} }
.block input, input[type="text"] {
fieldset input {
border: 0; border: 0;
outline: 0; outline: 0;
background-color: transparent; background-color: transparent;
@ -463,7 +462,7 @@ fieldset input {
width: 182%; width: 182%;
} }
.input { .foreground {
z-index: 99999; z-index: 99999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -473,13 +472,24 @@ fieldset input {
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; margin: 0 auto;
max-width: 200px; max-width: 25em;
width: 95%; width: 95%;
position: relative; top: 10%;
top: 50%; left:50%;
transform: translateY(-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) { @media screen and (max-width: 600px) {

18
assets/src/js/browse.js
View File

@ -71,20 +71,27 @@ $(document).on('page:browse', function() {
event.preventDefault(); event.preventDefault();
if ($(this).data("opened")) { if ($(this).data("opened")) {
$('#new-file').fadeOut(200); $('.foreground').fadeOut(200);
$('#new-file-form').fadeOut(200);
$(this).data("opened", false); $(this).data("opened", false);
} else { } else {
$('#new-file').fadeIn(200); $('.foreground').fadeIn(200);
$('#new-file-form').fadeIn(200);
$(this).data("opened", true); $(this).data("opened", true);
} }
return false; return false;
}); });
$('#new-file').on('keypress', 'input', function(event) { $('.foreground').off('click').click(function() {
if (event.keyCode == 13) { $('.input').fadeOut(200);
$('.foreground').fadeOut(200);
$('.new').data("opened", false);
});
$('#new-file-form').submit(function(event) {
event.preventDefault(); event.preventDefault();
var value = $(this).val(), var value = $('#new-file-name').val(),
splited = value.split(":"), splited = value.split(":"),
filename = "", filename = "",
archetype = ""; archetype = "";
@ -140,7 +147,6 @@ $(document).on('page:browse', function() {
}); });
return false; return false;
}
}); });
$("#upload").click(function(event) { $("#upload").click(function(event) {

22
templates/browse.tmpl
View File

@ -9,10 +9,6 @@
<input type="file" value="Upload" multiple> <input type="file" value="Upload" multiple>
<button id="upload">Upload <i class="fa fa-cloud-upload"></i></button> <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
<button class="default new">New <i class="fa fa-plus"></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> </div>
</div> </div>
@ -57,9 +53,19 @@
</div> </div>
</main> </main>
<!-- <div class="input"> <div class="foreground hidden"></div>
<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> <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> </div>
</div> -->
{{ end }} {{ end }}