some style updates like loading animation
Henrique Dias
parent
c4431b1ee5
commit
ce1dcdc947
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
|
||||
/* LOADING */
|
||||
|
||||
#loading {
|
||||
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;
|
||||
column-count: 2;
|
||||
-moz-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;
|
||||
justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
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;
|
||||
column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
.browse .actions {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,43 @@
|
|||
// When the page Browse is opened
|
||||
$(document).on('page:browse', function() {
|
||||
var foreground = '#foreground';
|
||||
|
||||
/* DELETE FILE */
|
||||
|
||||
var remove = new Object();
|
||||
remove.selector = 'form#delete';
|
||||
remove.form = $(remove.selector);
|
||||
remove.row = '';
|
||||
remove.button = '';
|
||||
remove.url = '';
|
||||
var removeForm = 'form#delete';
|
||||
var removeItem = null;
|
||||
|
||||
$('#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);
|
||||
remove.row.fadeOut(200);
|
||||
$(removeForm).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 create = new Object();
|
||||
create.selector = 'form#new';
|
||||
create.form = $(create.selector);
|
||||
create.input = create.selector + ' input[type="text"]';
|
||||
create.button = '';
|
||||
create.url = '';
|
||||
var createForm = 'form#new',
|
||||
createInput = createForm + ' input[type="text"]';
|
||||
|
||||
$('#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 rename = new Object();
|
||||
rename.selector = 'form#rename';
|
||||
rename.form = $(rename.selector);
|
||||
rename.input = rename.selector + ' input[type="text"]';
|
||||
rename.button = '';
|
||||
rename.url = '';
|
||||
var renameForm = 'form#rename',
|
||||
renameInput = renameForm + ' input[type="text"]',
|
||||
renameItem = null;
|
||||
|
||||
$('#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();
|
||||
rename.form.fadeIn(200);
|
||||
rename.form.find('span').text(rename.url);
|
||||
rename.form.find('input[type="text"]').val(rename.url);
|
||||
|
||||
$(renameForm).fadeIn(200);
|
||||
$(renameForm).find('span').text(renameItem);
|
||||
$(renameForm).find('input[type="text"]').val(renameItem);
|
||||
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();
|
||||
git.selector = 'form#git';
|
||||
git.form = $(git.selector);
|
||||
git.input = git.selector + ' input[type="text"]';
|
||||
|
||||
$('#content').on('click', 'button.git', function(event) {
|
||||
$('#content').on('click', gitButton, 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);
|
||||
rename.form.fadeOut(200);
|
||||
remove.form.fadeOut(200);
|
||||
git.form.fadeOut(200);
|
||||
$(createForm).fadeOut(200);
|
||||
$(renameForm).fadeOut(200);
|
||||
$(removeForm).fadeOut(200);
|
||||
$(gitForm).fadeOut(200);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue