diff --git a/pinry/static/css/pinry.css b/pinry/static/css/pinry.css
index bc12909..ff5d735 100644
--- a/pinry/static/css/pinry.css
+++ b/pinry/static/css/pinry.css
@@ -133,6 +133,7 @@ textarea {
-webkit-box-shadow: 0 1px 0 #bbb;
-moz-box-shadow: 0 1px 0 #bbb;
box-shadow: 0 1px 0 #bbb;
+ display: none;
position: absolute;
width: 240px;
}
@@ -143,7 +144,6 @@ textarea {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- display: none;
position: absolute;
right: 7px;
top: 7px;
@@ -163,6 +163,12 @@ textarea {
display: inline-block;
}
+.pin .image-wrapper {
+ background-image: url("../img/loader.gif");
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
.pin img {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
@@ -172,6 +178,7 @@ textarea {
border-top-right-radius: 3px;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
+ display: none;
margin: 0;
padding: 0;
width: 240px;
@@ -226,8 +233,11 @@ textarea {
.spinner {
background: url('../img/loader.gif');
+ background-position: center center;
+ background-repeat: no-repeat;
height: 31px;
margin: 0 auto;
+ padding: 50px;
width: 31px;
}
diff --git a/pinry/static/js/pin-form.js b/pinry/static/js/pin-form.js
index accfd51..4f13610 100644
--- a/pinry/static/js/pin-form.js
+++ b/pinry/static/js/pin-form.js
@@ -33,6 +33,8 @@ $(window).load(function() {
preview.html(html);
preview.find('.pin').width(200);
preview.find('.pin .text').width(140);
+ preview.find('.pin').fadeIn(300);
+ preview.find('.image-wrapper img').fadeIn(300);
if (preview.find('.pin').height() > 305)
$('#pin-form .modal-body').height(preview.find('.pin').height());
}
@@ -59,7 +61,7 @@ $(window).load(function() {
formFields[i].bind('propertychange keyup input paste', function() {
createPinPreviewFromForm();
if (!uploadedImage)
- $('#pin-form-image-upload').parent().parent().css('display', 'none');
+ $('#pin-form-image-upload').parent().parent().fadeOut(300);
});
}
// Drag and Drop Upload
@@ -76,7 +78,7 @@ $(window).load(function() {
}
}
}).on('complete', function(e, id, name, data) {
- $('#pin-form-image-url').parent().parent().css('display', 'none');
+ $('#pin-form-image-url').parent().parent().fadeOut(300);
$('.qq-upload-button').css('display', 'none');
var promise = getImageData(data.success.id);
uploadedImage = data.success.id;
diff --git a/pinry/static/js/pinry.js b/pinry/static/js/pinry.js
index 33fb10e..ab8c019 100644
--- a/pinry/static/js/pinry.js
+++ b/pinry/static/js/pinry.js
@@ -43,8 +43,8 @@ $(window).load(function() {
block.css({
'margin-left': rowMargins[sCol],
'margin-top': colHeights[sCol],
- 'display': 'block'
});
+ block.fadeIn(300);
colHeights[sCol] += block.height()+(blockMargin);
}
@@ -91,19 +91,22 @@ $(window).load(function() {
$('#pins').append(html);
// We need to then wait for images to load in and then tile
+ tileLayout();
+ lightbox();
$('#pins').ajaxStop(function() {
$('img').load(function() {
- tileLayout();
- lightbox();
+ $(this).fadeIn(300);
});
});
- if (pins.meta.total_count == 0) {
+ if (pins.objects.length == 0 || pins.objects.length < 30) {
$('.spinner').css('display', 'none');
- if ($('.spinner').length != 0) {
+ $(window).off('scroll');
+ if ($('#pins').length != 0) {
var theEnd = document.createElement('div');
theEnd.id = 'the-end';
$(theEnd).html('— End —');
+ $(theEnd).css('padding', 50);
$('body').append(theEnd);
}
}
diff --git a/pinry/templates/includes/pins.html b/pinry/templates/includes/pins.html
index 086cc8c..f5e9c98 100644
--- a/pinry/templates/includes/pins.html
+++ b/pinry/templates/includes/pins.html
@@ -13,7 +13,9 @@
{{/if}}
-
+
+
{{description}}