Disable location hash updates from scrollify. Work on improvements to carousel and...

diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index 4f36cc06011603d02077a470acec7914317aad99..ec12c988b99357650b2fcb1d10b8ec721ad9af5e 100644 (file)
--- 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
 \r
         $res .= '<div class="carousel">';\r
         $res .= '<div class="window-top-wrapper">';\r
-        $res .= '<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
-                    viewBox="0 0 755 24" xml:space="preserve">\r
-                <style type="text/css">\r
-                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}\r
-                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}\r
-                </style>\r
-                <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>\r
-                <circle class="st1" cx="16" cy="12" r="3"/>\r
-                <circle class="st1" cx="26" cy="12" r="3"/>\r
-                <circle class="st1" cx="36" cy="12" r="3"/>\r
-                </svg>';\r
+//        $res .= '<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+//                  viewBox="0 0 755 24" xml:space="preserve">\r
+//                <style type="text/css">\r
+//                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}\r
+//                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}\r
+//                </style>\r
+//                <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>\r
+//                <circle class="st1" cx="16" cy="12" r="3"/>\r
+//                <circle class="st1" cx="26" cy="12" r="3"/>\r
+//                <circle class="st1" cx="36" cy="12" r="3"/>\r
+//                </svg>';\r
+//        $res .= '<span></span><span></span><span></span>'; // Dot elements\r
         $res .= '</div>'; // .window-top-wrapper\r
 \r
+        $res .= '<img src="/images/home/window-top.png" class="window-top">';\r
+\r
         $res .= '<div class="services-examples">';\r
 \r
         foreach ($data['examples'] as $example) {\r

diff --git a/images/home/window-top.png b/images/home/window-top.png
new file mode 100644 (file)
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 4019b47031ac6a940af45e49c39a2a57a4ddc188..15b3928cda08c5cc1e1b72474d107736b99cff27 100644 (file)
--- 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 726ad7f80cf7ed54e48706cfc3ee7c703e07a964..d8a0422f6b3d7ca3e50e6ce8f6cab4a7fae77bef 100644 (file)
--- 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;