some style updates like loading animation

This commit is contained in:
Henrique Dias 2016-03-13 09:26:45 +00:00
parent c4431b1ee5
commit ce1dcdc947
5 changed files with 239 additions and 82 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -474,11 +474,12 @@ fieldset input {
.browse tr { .browse tr {
line-height: 2em; line-height: 2em;
border-bottom: 1px solid rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-webkit-transition: .2s ease background-color;
transition: .2s ease background-color; transition: .2s ease background-color;
} }
.browse tr:hover { .browse tr:hover {
background-color: rgba(0,0,0,0.04); background-color: rgba(0, 0, 0, 0.04);
} }
.browse th.buttons { .browse th.buttons {
@ -505,6 +506,7 @@ fieldset input {
width: 182%; width: 182%;
} }
/* POPUS */ /* POPUS */
#foreground { #foreground {
@ -524,34 +526,157 @@ fieldset input {
max-width: 25em; max-width: 25em;
width: 95%; width: 95%;
top: 10%; top: 10%;
left:50%; left: 50%;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
background-color: #006064; background-color: #006064;
color: #fff; color: #fff;
padding: 1em 2em; padding: 1em 2em;
border-radius: .5em; 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"] { .popup input[type="text"] {
border-bottom: .15em solid white; 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) { @media screen and (max-width: 600px) {
.blocks { .blocks {
-webkit-column-count: 2; -webkit-column-count: 2;
-moz-column-count: 2; -moz-column-count: 2;
column-count: 2; column-count: 2;
} }
body > nav span { body > nav span {
display: none; display: none;
@ -562,8 +687,8 @@ fieldset input {
body > nav .container { body > nav .container {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
} }
.hideable { .hideable {
@ -574,8 +699,8 @@ fieldset input {
@media screen and (max-width: 350px) { @media screen and (max-width: 350px) {
.blocks { .blocks {
-webkit-column-count: 1; -webkit-column-count: 1;
-moz-column-count: 1; -moz-column-count: 1;
column-count: 1; column-count: 1;
} }
.browse .actions { .browse .actions {
text-align: center; text-align: center;

View File

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

View File

@ -54,6 +54,17 @@
</div> </div>
</main> </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> <div id="foreground" class="hidden"></div>
<form class="popup hidden" id="delete"> <form class="popup hidden" id="delete">