From 99c80a5476144531c87b29af6667bfc24e0d5426 Mon Sep 17 00:00:00 2001 From: John Marcus Date: Thu, 18 Feb 2016 15:05:45 -0800 Subject: [PATCH 1/3] Update carousel minHeight to be dynamic between different carousel layouts and screensizes. --- scripts/buildfire/components/carousel/carousel.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/buildfire/components/carousel/carousel.js b/scripts/buildfire/components/carousel/carousel.js index 0a1e18b8..2405c5ac 100644 --- a/scripts/buildfire/components/carousel/carousel.js +++ b/scripts/buildfire/components/carousel/carousel.js @@ -360,6 +360,7 @@ buildfire.components.carousel.view.prototype = { this.loadItems(items,true); }, + _initDimensions: function (layout) { this.width = window.innerWidth; layout = layout || "WideScreen"; @@ -376,6 +377,10 @@ buildfire.components.carousel.view.prototype = { this.cssWidth = this.width + "px"; this.cssHeight = this.height + "px"; + + // Set Min height on carousel so doesn't push content down on load. + this._minHeight = '180px'; + this._minHeight = this.cssHeight; }, // remove all nodes from the slider _removeAll: function () { @@ -456,7 +461,7 @@ buildfire.components.carousel.view.prototype = { me.selector.style.left = "0px"; // Temporary fix for -webkit-overflow-scroll bug and prevent carousel from pushing content down. - me.selector.style['min-height'] = "180px"; + me.selector.style['min-height'] = me._minHeight; //me.selector.style.width = this.cssWidth; //me.selector.style.height = this.cssHeight; From a2b3176297fd260a720ddf6eee128280a8f1ee31 Mon Sep 17 00:00:00 2001 From: John Marcus Date: Tue, 23 Feb 2016 13:44:02 -0800 Subject: [PATCH 2/3] Add forceCSSRender to buildfire.js as temp. fix to redraw plugin after loaded. Update siteStyle. --- scripts/buildfire.js | 13 +++++++++++++ styles/siteStyle.css | 9 +++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/scripts/buildfire.js b/scripts/buildfire.js index c8a9e436..6990e363 100644 --- a/scripts/buildfire.js +++ b/scripts/buildfire.js @@ -459,6 +459,16 @@ var buildfire = { } /// ref: https://github.com/BuildFire/sdk/wiki/How-to-use-Appearance , appearance: { + _forceCSSRender: function(){ + // WebKit Rendering Reset on Plugins + if(window.location.href.indexOf('widget') > 0){ + var html = document.getElementsByTagName('html')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + style.innerHTML = 'body{position:relative !important; z-index:1 !important;}'; + html.appendChild(style); + } + }, insertHTMLAttributes: function () { var html = document.getElementsByTagName('html')[0]; @@ -1118,6 +1128,9 @@ document.addEventListener("DOMContentLoaded", function (event) { } }; } + setTimeout(function(){ + buildfire.appearance._forceCSSRender(); + }, 1750); }); document.addEventListener("resize", function (event) { diff --git a/styles/siteStyle.css b/styles/siteStyle.css index c1eb89ff..55bba109 100644 --- a/styles/siteStyle.css +++ b/styles/siteStyle.css @@ -144,8 +144,9 @@ nav{ } nav ul.menu{ padding-top:65px; - border-bottom:1px solid #26282b; color:#a6abba; + height:100%; + overflow:auto; } nav ul.menu li{ position:relative; @@ -167,6 +168,9 @@ nav ul.menu li.dark a{ padding:10px 25px; font-size:14px; } +nav ul.menu li:last-child{ + border-bottom:1px solid #26282b; +} nav ul.menu li .parent{ color:#a6abba; padding:20px 10px 20px 45px; @@ -195,9 +199,6 @@ nav ul.menu li.datatracer .parent span.icon{ nav ul.menu li.help .parent span.icon{ top:21px; } -nav ul.menu li.licenses .parent span.icon{ - top:21px; -} nav ul.menu li.selfprovisioning .parent span.icon{ font-size:18px; top:19px; From 3d0983a5bb95a09d7d8ab93416f6689cf9986597 Mon Sep 17 00:00:00 2001 From: John Marcus Date: Tue, 23 Feb 2016 14:38:28 -0800 Subject: [PATCH 3/3] Add fade to carousel images. No fade if only 1 image. --- .../buildfire/components/carousel/carousel.js | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/scripts/buildfire/components/carousel/carousel.js b/scripts/buildfire/components/carousel/carousel.js index 00ec41d1..9ba3ed30 100644 --- a/scripts/buildfire/components/carousel/carousel.js +++ b/scripts/buildfire/components/carousel/carousel.js @@ -427,7 +427,7 @@ buildfire.components.carousel.view.prototype = { pagination: false, items: 1, itemsMobile: true, - //lazyLoad:true, + lazyLoad:true, autoHeight: false, autoplay: true, autoplaySpeed:800 @@ -458,12 +458,12 @@ buildfire.components.carousel.view.prototype = { // render the slider wrapper HTML _renderSlider: function () { var me = this; + + // Add min-height to carousel to prevent it from pushing content down. + me.selector.style['min-height'] = me._minHeight; me.selector.style.position = "relative"; me.selector.style.top = "0px"; me.selector.style.left = "0px"; - - // Temporary fix for -webkit-overflow-scroll bug and prevent carousel from pushing content down. - me.selector.style['min-height'] = me._minHeight; //me.selector.style.width = this.cssWidth; //me.selector.style.height = this.cssHeight; @@ -499,11 +499,18 @@ buildfire.components.carousel.view.prototype = { }); }); + // Images + var me = this; var image = document.createElement("img"); - image.src = buildfire.components.carousel._cropImage(item.iconUrl, { width: this.width, height: this.height }); - // Add data-src attr for lazyLoad - //image.setAttribute('data-src', buildfire.components.carousel._cropImage(item.iconUrl, { width: this.width, height: this.height })); - //image.className = "owl-lazy"; + me.$slider = $(me.selector); + if (me.items.length > 1) { + // Add data-src attr for lazyLoad + image.setAttribute('data-src', buildfire.components.carousel._cropImage(item.iconUrl, { width: this.width, height: this.height })); + image.className = "owl-lazy"; + }else{ + // Add src since it will be static + image.src = buildfire.components.carousel._cropImage(item.iconUrl, { width: this.width, height: this.height }); + } //image.style.width = this.'cssWidth'; //image.style.height = this.cssHeight;