From 9299d21f2733f4148cc23b29abd6095fb93c0911 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 24 Aug 2016 20:12:51 +0000 Subject: [PATCH] Disable location hash updates from scrollify. Work on improvements to carousel and investigate bugs. WIP #605 @3 --- .../views/helpers/HomeServices.php | 25 +++---- images/home/window-top.png | Bin 0 -> 857 bytes js/209-scrollify.js | 30 +++++---- less/214-home-services.less | 62 +++++++++++++----- 4 files changed, 77 insertions(+), 40 deletions(-) create mode 100644 images/home/window-top.png 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 0000000000000000000000000000000000000000..b33372b6d3faccc82a0e9201beee07e0c28870fa GIT binary patch literal 857 zcmeAS@N?(olHy`uVBq!ia0y~yV0{K;8*nfKN#~ZRp9~C)$^kwhu5KYoR6!Q5ff~kk zN;+mL`j-0EZcYKQmTp0sCU#1?W-59XdRDHE{xQ}bAzG&Px|S{uzEMsAaiVf+5{g=8 zPJS+d@!|>^#`fMWK?&+cHe&MX1~wk9!HEi5#->hwY6ez@ww^ModZv!PlFHf^E&<|- znpW*Jz|GS=PR>=Ni|HBK`)(ehOJjafwEyo>KPoKF;1vtNReZh$qr%8oIi8!?D&Wt`^c!c z$l4DE|DIfYJoT!&Kl2Kqlz%s4vMT;5Ma7+4-WI-o@zb-nuY7n{8^YdjX8qdb)$h}k zqCJ=Po-hl})Yf8lc(y(0^0%ldWkHwU&DMCkblKnZKv4#x{qr_8YsfBpqv3U2vsyNk zQQ@pa0q)%h&Jfw*UEa`s3}<-HZqR t|16bcFye1G!>sU`;e-v0#wYZLORMM(|I$C6hQP>Y@O1TaS?83{1OWHQLyQ0b literal 0 HcmV?d00001 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; -- 2.39.5