summaryrefslogtreecommitdiffstats
path: root/public_html/data
diff options
context:
space:
mode:
authorFlorian Pritz <bluewind@xinu.at>2015-08-09 21:27:59 +0200
committerFlorian Pritz <bluewind@xinu.at>2015-08-09 21:33:02 +0200
commitdeb442de494680114fcbafa824689b00b5e2b2e0 (patch)
tree07fe8ba02d3cae808c702644268082587fb3f035 /public_html/data
parent76f8f4826e8fab2118ae1b8c39d67da398ca892d (diff)
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>
Diffstat (limited to 'public_html/data')
-rw-r--r--public_html/data/css/style.css39
-rw-r--r--public_html/data/js/application.js2
-rw-r--r--public_html/data/js/vendor/jquery.lazyload.js10
3 files changed, 44 insertions, 7 deletions
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() {