From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Tue, 23 Aug 2016 17:37:11 +0000 (+0000)
Subject: Create SVG browser header and replace in carousel. Manage strange SVG resizing issues... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=91a758b258587c0e4877bab16f9931365c30c8fd;p=fluidbook-v3.git

Create SVG browser header and replace in carousel. Manage strange SVG resizing issues (more testing needed). WIP #599 @1.5
---

diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index a964ce2..c764b53 100644
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -15,6 +15,21 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
         $res .= '</div>'; // .text
 
         $res .= '<div class="carousel">';
+        $res .= '<div class="window-top-wrapper">';
+
+        $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"
+	             viewBox="0 0 755 24" xml:space="preserve">
+                <style type="text/css">
+                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}
+                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}
+                </style>
+                <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>
+                <circle class="st1" cx="16" cy="12" r="3"/>
+                <circle class="st1" cx="26" cy="12" r="3"/>
+                <circle class="st1" cx="36" cy="12" r="3"/>
+                </svg>';
+
+        $res .= '</div>'; // .window-top-wrapper
 
         $res .= '<div class="services-examples">';
 
diff --git a/less/214-home-services.less b/less/214-home-services.less
index 07cd340..726ad7f 100644
--- a/less/214-home-services.less
+++ b/less/214-home-services.less
@@ -27,6 +27,22 @@ 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%;
+  }
+}
+
 .services-examples {
   position: relative;
   width: 100%;