From deb442de494680114fcbafa824689b00b5e2b2e0 Mon Sep 17 00:00:00 2001
From: Florian Pritz <bluewind@xinu.at>
Date: Sun, 9 Aug 2015 21:27:59 +0200
Subject: Move thumbnail placeholder and container width to css

If the thumbnail placeholders are properly positioned via css we can
display them early.

We can also take some work off lazyload by setting a placeholder color
in css thus making rendering for lots of thumbnails faster.

Signed-off-by: Florian Pritz <bluewind@xinu.at>
---
 public_html/data/css/style.css                | 39 ++++++++++++++++++++++++++-
 public_html/data/js/application.js            |  2 +-
 public_html/data/js/vendor/jquery.lazyload.js | 10 +++----
 3 files changed, 44 insertions(+), 7 deletions(-)

(limited to 'public_html')

diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css
index 06ab6bcd1..6af673a26 100644
--- a/public_html/data/css/style.css
+++ b/public_html/data/css/style.css
@@ -25,7 +25,7 @@
 }
 
 .lazyload {
-	display: none;
+	background: #C3C3C3;
 }
 
 .divider {
@@ -301,8 +301,45 @@ body {
 
 .upload_thumbnails {
 	margin: 0 auto;
+	width: 152px;
 }
 
+/* min-width and width increase by 152px each step (one more image per line)
+ * Take care to align to bootstrap's viewport breakpoints */
+@media (min-width: 389px) {
+	.upload_thumbnails {
+		width: 304px;
+	}
+}
+
+@media (min-width: 541px) {
+	.upload_thumbnails {
+		width: 456px;
+	}
+}
+
+@media (min-width: 693px) {
+	.upload_thumbnails {
+		width: 608px;
+	}
+}
+
+/* bootstrap viewport breakpoint @768px */
+/* bootstrap viewport breakpoint @992px */
+@media (min-width: 992px) {
+	.upload_thumbnails {
+		width: 760px;
+	}
+}
+
+/* bootstrap viewport breakpoint @1220px */
+@media (min-width: 1200px) {
+	.upload_thumbnails {
+		width: 1064px;
+	}
+}
+
+/* XXX: change values above if img width chanegs */
 .upload_thumbnails img.thumb,
 .upload_thumbnails a {
 	width: 150px;
diff --git a/public_html/data/js/application.js b/public_html/data/js/application.js
index 374ae56fe..71aac8328 100644
--- a/public_html/data/js/application.js
+++ b/public_html/data/js/application.js
@@ -88,7 +88,7 @@ define(
 
 			setupLazyLoadingImages: function () {
 				if ($(ui.lazyLoadingImages).length > 0) {
-					$(ui.lazyLoadingImages).show().lazyload({treshold: 200});
+					$(ui.lazyLoadingImages).lazyload({treshold: 200});
 				}
 			}
 		};
diff --git a/public_html/data/js/vendor/jquery.lazyload.js b/public_html/data/js/vendor/jquery.lazyload.js
index 5a22d8ea8..0b1b86e00 100644
--- a/public_html/data/js/vendor/jquery.lazyload.js
+++ b/public_html/data/js/vendor/jquery.lazyload.js
@@ -89,11 +89,11 @@
             self.loaded = false;
 
             /* If no src attribute given use data:uri. */
-            if ($self.attr("src") === undefined || $self.attr("src") === false) {
-                if ($self.is("img")) {
-                    $self.attr("src", settings.placeholder);
-                }
-            }
+            //if ($self.attr("src") === undefined || $self.attr("src") === false) {
+                //if ($self.is("img")) {
+                    //$self.attr("src", settings.placeholder);
+                //}
+            //}
 
             /* When appear is triggered load original image. */
             $self.one("appear", function() {
-- 
cgit v1.2.3-24-g4f1b