From: stephen@cubedesigners.com Date: Wed, 24 Aug 2016 20:12:51 +0000 (+0000) Subject: Disable location hash updates from scrollify. Work on improvements to carousel and... X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9299d21f2733f4148cc23b29abd6095fb93c0911;p=fluidbook-v3.git Disable location hash updates from scrollify. Work on improvements to carousel and investigate bugs. WIP #605 @3 --- diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php index 4f36cc0..ec12c98 100644 --- a/framework/application/views/helpers/HomeServices.php +++ b/framework/application/views/helpers/HomeServices.php @@ -16,19 +16,22 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer $res .= '
'; $res .= '
'; - $res .= ' - - - - - - '; +// $res .= ' +// +// +// +// +// +// '; +// $res .= ''; // Dot elements $res .= '
'; // .window-top-wrapper + $res .= ''; + $res .= '
'; foreach ($data['examples'] as $example) { diff --git a/images/home/window-top.png b/images/home/window-top.png new file mode 100644 index 0000000..b33372b Binary files /dev/null and b/images/home/window-top.png differ diff --git a/js/209-scrollify.js b/js/209-scrollify.js index 4019b47..15b3928 100644 --- a/js/209-scrollify.js +++ b/js/209-scrollify.js @@ -121,20 +121,24 @@ settings.before(index,elements); } interstitialIndex = 1; - if(settings.sectionName && !(firstLoad===true && index===0)) { - if(history.pushState) { - try { - history.replaceState(null, null, names[index]); - } catch (e) { - if(window.console) { - console.warn("Scrollify warning: This needs to be hosted on a server to manipulate the hash value."); - } - } - } else { - window.location.hash = names[index]; - } - } + //### DISABLED hash updates to URL + // if(settings.sectionName && !(firstLoad===true && index===0)) { + // if(history.pushState) { + // try { + // history.replaceState(null, null, names[index]); + // } catch (e) { + // if(window.console) { + // console.warn("Scrollify warning: This needs to be hosted on a server to manipulate the hash value."); + // } + // } + // + // } else { + // window.location.hash = names[index]; + // } + // } + + if(instant) { $(settings.target).stop().scrollTop(heights[index]); if(callbacks) { diff --git a/less/214-home-services.less b/less/214-home-services.less index 726ad7f..d8a0422 100644 --- a/less/214-home-services.less +++ b/less/214-home-services.less @@ -28,25 +28,55 @@ section.services { } // Responsive inline SVG (see: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/) -.window-top-wrapper { - padding-top: percentage(24/755); // Intrinsic ratio so SVG scales properly at all sizes - position: relative; - max-width: 755px; - margin: 0 auto; - - svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } +//.window-top-wrapper { +// padding-top: percentage(24/755); // Intrinsic ratio so SVG scales properly at all sizes +// position: relative; +// max-width: 755px; +// margin: 0 auto; +// +// // CSS version of the header +// background-color: #475462; +// border-top-right-radius: 5px; +// border-top-left-radius: 5px; +// +// span { +// position: absolute; +// top: percentage(9/24); +// width: percentage(6/755); +// padding-bottom: percentage(6/755); +// border-radius: 50%; +// background-color: #151E26; +// +// &:nth-child(1) { +// left: percentage(13/755); +// } +// &:nth-child(2) { +// left: percentage(23/755); +// } +// &:nth-child(3) { +// left: percentage(33/755); +// } +// } +// +// svg { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// } +//} + +.window-top { + display: block; + max-width: 100%; + height: auto; } .services-examples { position: relative; width: 100%; - padding-bottom: percentage(496/755); + padding-bottom: percentage(473/755); // Intrinsic ratio for screenshots (+1px to cover rounding errors for .more element) .current { z-index: 2; @@ -76,12 +106,12 @@ section.services { position: absolute; width: 100%; height: 100%; - top: 0; + top: -1px; // Cover rounding errors - better than having a gap left: 0; background-color: rgba(52, 60, 68, .8); color: #fff; z-index: 3; - transition: opacity @transition-time-buttons; + //transition: opacity @transition-time-buttons; // Disabled because it causes ugly page rendering shifts during animation .inner { position: absolute;