website: an assortment of front-end updates (#4296)

* website: add object-fit-image polyfill for ie compatibility

* website: make entire carousel cards linkable

* website: adjust hero background positioning

* website: responsive updates to the home hero

* website: update home hero js to work better with turbolinks

* website: a few font weight adjustments

* website: add an overlay to ui video

website/source/assets/javascripts/consul-connect/carousel.js

@@ -1,3 +1,5 @@
+objectFitImages()
+
 var qs = document.querySelector.bind(document)
 var qsa = document.querySelectorAll.bind(document)
 

website/source/assets/javascripts/consul-connect/home-hero.js

@@ -4,11 +4,11 @@ var qsa = document.querySelectorAll.bind(document)
 var $$wrappers = qsa('#home-hero .videos > div') // all the wrappers for the videos
 var $$videos = qsa('#home-hero video') // all the videos
 var $$videoControls = qsa('#home-hero .controls > div') // carousel controllers
-var currentIndex = 0 // currently playing video
+var currentIndex = 1 // currently playing video
 var playbackRate = 2 // video playback speed
 
 // initiate a video change
-function initialiateVideoChange(index) {
+function initiateVideoChange(index) {
   var wrapper = $$wrappers[currentIndex]
   var nextWrapper = $$wrappers[index]
 
@@ -68,27 +68,42 @@ function playVideo(index, wrapper) {
   currentIndex = index
 }
 
-// loop through videos to set up options/listeners
+function initiateVideos() {
-for (var i = 0; i < $$videos.length; i++) {
+  // remove 'active' from wrappers which may be 
-  // set video default speed
+  // there on page load because of turbolinks
-  $$videos[i].playbackRate = playbackRate
+  for (var i = 0; i < $$wrappers.length; i++) {
+    $$wrappers[i].classList.remove('active')
+  }
 
-  // listen for video ending, then go to the next video
+  // loop through videos to set up options/listeners
-  $$videos[i].addEventListener('ended', function() {
+  for (var i = 0; i < $$videos.length; i++) {
-    var nextIndex = currentIndex + 1
+    // set video default speed
-    initialiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
+    $$videos[i].playbackRate = playbackRate
-  })
+
+    // listen for video ending, then go to the next video
+    $$videos[i].addEventListener('ended', function() {
+      var nextIndex = currentIndex + 1
+      initiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
+    })
+  }
+
+  for (var i = 0; i < $$videoControls.length; i++) {
+    // remove 'playing' from controls which may be 
+    // there on page load because of turbolinks
+    $$videoControls[i].classList.remove('playing')
+
+    // listen for control clicks and initiate videos appropriately
+    $$videoControls[i].addEventListener('click', function() {
+      if (!this.classList.contains('playing')) {
+        initiateVideoChange(this.dataset.index)
+      }
+    })
+  }
+
+  // go to first video to start this thing
+  if ($$videos.length > 0) {
+    initiateVideoChange(0)
+  }
 }
 
-for (var i = 0; i < $$videoControls.length; i++) {
+document.addEventListener('turbolinks:load', initiateVideos)
-  $$videoControls[i].addEventListener('click', function() {
-    if (!this.classList.contains('playing')) {
-      initialiateVideoChange(this.dataset.index)
-    }
-  })
-}
-
-// go to first video to start this thing
-if ($$videos.length > 0) {
-  initialiateVideoChange(0)
-}

website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js

@@ -0,0 +1 @@
+var objectFitImages=function(){"use strict";function t(t,e){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+t+"' height='"+e+"'%3E%3C/svg%3E"}function e(t){if(t.srcset&&!m&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function i(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=l.exec(i));)r[e[1]]=e[2];return r}function r(e,i,r){var n=t(i||1,r||0);p.call(e,"src")!==n&&b.call(e,"src",n)}function n(t,e){t.naturalWidth?e(t):setTimeout(n,100,t,e)}function c(t){var c=i(t),o=t[a];if(c["object-fit"]=c["object-fit"]||"fill",!o.img){if("fill"===c["object-fit"])return;if(!o.skipTest&&g&&!c["object-position"])return}if(!o.img){o.img=new Image(t.width,t.height),o.img.srcset=p.call(t,"data-ofi-srcset")||t.srcset,o.img.src=p.call(t,"data-ofi-src")||t.src,b.call(t,"data-ofi-src",t.src),t.srcset&&b.call(t,"data-ofi-srcset",t.srcset),r(t,t.naturalWidth||t.width,t.naturalHeight||t.height),t.srcset&&(t.srcset="");try{s(t)}catch(t){window.console&&console.warn("https://bit.ly/ofi-old-browser")}}e(o.img),t.style.backgroundImage='url("'+(o.img.currentSrc||o.img.src).replace(/"/g,'\\"')+'")',t.style.backgroundPosition=c["object-position"]||"center",t.style.backgroundRepeat="no-repeat",t.style.backgroundOrigin="content-box",/scale-down/.test(c["object-fit"])?n(o.img,function(){o.img.naturalWidth>t.width||o.img.naturalHeight>t.height?t.style.backgroundSize="contain":t.style.backgroundSize="auto"}):t.style.backgroundSize=c["object-fit"].replace("none","auto").replace("fill","100% 100%"),n(o.img,function(e){r(t,e.naturalWidth,e.naturalHeight)})}function s(t){var e={get:function(e){return t[a].img[e||"src"]},set:function(e,i){return t[a].img[i||"src"]=e,b.call(t,"data-ofi-"+i,e),c(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function o(t,e){var i=!h&&!t;if(e=e||{},t=t||"img",f&&!e.skipTest||!d)return!1;"img"===t?t=document.getElementsByTagName("img"):"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r<t.length;r++)t[r][a]=t[r][a]||{skipTest:e.skipTest},c(t[r]);i&&(document.body.addEventListener("load",function(t){"IMG"===t.target.tagName&&o(t.target,{skipTest:e.skipTest})},!0),h=!0,t="img"),e.watchMQ&&window.addEventListener("resize",o.bind(null,t,{skipTest:e.skipTest}))}var a="bfred-it:object-fit-images",l=/(object-fit|object-position)\s*:\s*([-\w\s%]+)/g,u="undefined"==typeof Image?{style:{"object-position":1}}:new Image,g="object-fit"in u.style,f="object-position"in u.style,d="background-size"in u.style,m="string"==typeof u.currentSrc,p=u.getAttribute,b=u.setAttribute,h=!1;return o.supportsObjectFit=g,o.supportsObjectPosition=f,function(){function t(t,e){return t[a]&&t[a].img&&("src"===e||"srcset"===e)?t[a].img:t}f||(HTMLImageElement.prototype.getAttribute=function(e){return p.call(t(this,e),e)},HTMLImageElement.prototype.setAttribute=function(e,i){return b.call(t(this,e),e,String(i))})}(),o}();

website/source/assets/stylesheets/consul-connect/components/_carousel.scss

@@ -125,6 +125,7 @@
     img {
       max-height: 240px;
       object-fit: cover;
+      font-family: 'object-fit: cover;';
       width: 100%;
 
       @media (min-width: 450px) {
@@ -151,25 +152,22 @@
 
       span {
         display: inline-block;
-        padding-left: 30px;
         position: relative;
 
-        &:before {
+        &:first-child {
-          content: "";
+          padding-left: 30px;
-          background: url("/assets/images/consul-connect/icons/video.svg")
+
-            no-repeat center center;
+          &:before {
-          width: 20px;
+            content: "";
-          height: 20px;
+            background: url("/assets/images/consul-connect/icons/video.svg")
-          position: absolute;
+              no-repeat center center;
-          top: 0;
+            width: 20px;
-          left: 0;
+            height: 20px;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
         }
-      }
-
-      a {
-        color: $consul-black;
-        display: inline-block;
-        position: relative;
 
         &:last-child {
           font-weight: 600;

website/source/assets/stylesheets/consul-connect/components/_hero.scss

@@ -2,7 +2,7 @@
   background: url("/assets/images/consul-connect/hero-bg.png") no-repeat top
     center;
   background-size: cover;
-  margin-top: -94px;
+  margin-top: -92px;
   padding: 126px 40px 56px;
   text-align: center;
 
@@ -11,6 +11,7 @@
   }
 
   @media (min-width: 992px) {
+    margin-top: -112px;
     padding-top: 214px;
     padding-bottom: 120px;
   }
@@ -38,7 +39,7 @@
     border-radius: 2px;
     display: inline-block;
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.5px;
     line-height: 20px;
     margin-bottom: 24px;

website/source/assets/stylesheets/consul-connect/components/_use-cases.scss

@@ -12,7 +12,7 @@
   }
 
   h3 {
-    font-weight: 800;
+    font-weight: 600;
     margin: 40px 0 0;
 
     span {

website/source/assets/stylesheets/consul-connect/pages/_home.scss

@@ -37,10 +37,8 @@
           }
 
           & > div {
-            padding-left: 21px;
+            @media (min-width: 992px) and (max-width: 1199px) {
-
+              padding-left: 21px;
-            @media (min-width: 1200px) {
-              padding-left: 0;
             }
           }
 
@@ -77,21 +75,34 @@
             display: inline-block;
             font-size: 1.4rem;
             padding: 16px;
+            line-height: 1.7;
 
             @media (min-width: 992px) {
+              line-height: 1.4;
               padding-left: 12px;
               padding-right: 12px;
             }
 
             span {
-              background: $consul-red;
+              &:first-child {
-              border-radius: 3px;
+                background: $consul-red;
-              color: #fff;
+                border-radius: 3px;
-              font-size: 1.2rem;
+                color: #fff;
-              font-weight: 700;
+                font-size: 1.2rem;
-              margin-right: 8px;
+                font-weight: 700;
-              padding: 2px 9px;
+                margin-right: 4px;
-              text-transform: uppercase;
+                padding: 2px 9px;
+                text-transform: uppercase;
+
+                @media (min-width: 992px) {
+                  float: left;
+                  margin-right: 8px;
+                }
+              }
+
+              &:last-child {
+                display: inline-block;
+              }
             }
 
             svg {
@@ -135,7 +146,7 @@
             color: $consul-black;
             display: inline-block;
             font-size: 1.4rem;
-            font-weight: 700;
+            font-weight: 600;
             margin: 24px 0 48px;
             padding-bottom: 4px;
             transition: all 0.25s ease;
@@ -185,7 +196,7 @@
         display: flex;
         flex-direction: column;
         font-size: 1.2rem;
-        font-weight: 700;
+        font-weight: 600;
         justify-content: center;
         margin: 0 25px;
         text-transform: uppercase;
@@ -352,6 +363,17 @@
         width: 100%;
         height: 100%;
       }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        background: $black;
+        opacity: 0.02;
+      }
     }
   }
 

website/source/configuration.html.erb

@@ -217,8 +217,8 @@ description: |-
         <h2>Case Studies</h2>
       </div>
       <div class='g-carousel'>
-        <div class="siema">
+        <div class='siema'>
-          <div class='card' href='#'>
+          <a class='card' href='https://www.hashicorp.com/resources/groupon-orchestrates-daas-consul'>
             <div>
               <img src='/assets/images/consul-connect/case-studies/case-study_03.jpg' alt=''>
             </div>
@@ -226,10 +226,10 @@ description: |-
               <span class='tag video'>Video</span>
               <h4>How Groupon Orchestrates Databases as a Service with HashiCorp Consul</h4>
               <p>Group​o​n provides centrally managed, containerized database instances to its engineering teams. To make this process faster, more robust, and operationally safe, they deliver Databases-as-a-Service via an orchestration layer backed by HashiCorp Consul.</p>
-              <a href='https://www.hashicorp.com/resources/groupon-orchestrates-daas-consul'>Watch</a>
+              <span>Watch</span>
             </div>
-          </div>
+          </a>
-          <div class='card' href='#'>
+          <a class='card' href='https://www.hashicorp.com/resources/citadel-scaling-hashicorp-nomad-consul'>
             <div>
               <img src='/assets/images/consul-connect/case-studies/case-study_04.jpg' alt=''>
             </div>
@@ -237,9 +237,9 @@ description: |-
               <span class='tag video'>Video</span>
               <h4>Citadel - Extreme Scaling with HashiCorp Nomad and Consul</h4>
               <p>In this talk from HashiConf 2016, Caius Howcroft covers Citadel's use of HashiCorp Nomad and Consul to gain rapid scaling of its compute resources, for immediate market insights.</p>
-              <a href='https://www.hashicorp.com/resources/citadel-scaling-hashicorp-nomad-consul'>Watch</a>
+              <span>Watch</span>
             </div>
-          </div>
+          </a>
         </div>
         <ul class='pagination'>
           <li class='active'></li>
@@ -271,5 +271,6 @@ description: |-
 </div>
 
 <% content_for :scripts do %>
+  <script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
   <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
 <% end %>

website/source/discovery.html.erb

@@ -233,8 +233,8 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
         <h2>Case Studies</h2>
       </div>
       <div class='g-carousel'>
-        <div class="siema">
+        <div class='siema'>
-          <div class='card' href='#'>
+          <a class='card' href='https://www.hashicorp.com/resources/twitch-driving-towards-a-modern-infrastructure'>
             <div>
               <img src='/assets/images/consul-connect/case-studies/case-study_01.jpg' alt=''>
             </div>
@@ -242,10 +242,10 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
               <span class='tag video'>Video</span>
               <h4>Twitch - Driving Towards a Modern Infrastructure</h4>
               <p>In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.</p>
-              <a href='https://www.hashicorp.com/resources/twitch-driving-towards-a-modern-infrastructure'>Watch</a>
+              <span>Watch</span>
             </div>
-          </div>
+          </a>
-          <div class='card' href='#'>
+          <a class='card' href='https://www.hashicorp.com/resources/jet-com-nomad-auto-proxy-consul-template-nginx'>
             <div>
               <img src='/assets/images/consul-connect/case-studies/case-study_02.jpg' alt=''>
             </div>
@@ -253,9 +253,9 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
               <span class='tag video'>Video</span>
               <h4>Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX</h4>
               <p>Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.</p>
-              <a href='https://www.hashicorp.com/resources/jet-com-nomad-auto-proxy-consul-template-nginx'>Watch</a>
+              <span>Watch</span>
             </div>
-          </div>
+          </a>
         </div>
         <ul class='pagination'>
           <li class='active'></li>
@@ -287,5 +287,6 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
 </div>
 
 <% content_for :scripts do %>
+  <script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
   <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
 <% end %>

website/source/index.html.erb

@@ -12,7 +12,7 @@ description: |-
         <div>
           <div>
             <a class='notification' href='https://www.hashicorp.com/blog/consul-1-2-service-mesh'>
-              <span>New</span> HashiCorp Consul 1.2: Service Mesh. Read the blog post <svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'><path fill='#650D34' d='M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z'/></svg>
+              <span>New</span> HashiCorp Consul 1.2: Service Mesh. Read the blog <span>post <svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'><path fill='#650D34' d='M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z'/></svg><span>
             </a>
             <h1>Service Mesh Made Easy</h1>
             <p>Consul is a distributed service mesh to connect, secure, and configure services across any runtime platform and public or private cloud</p>
@@ -61,6 +61,7 @@ description: |-
               <video muted='muted'>
                 <source src='//consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4' type='video/mp4'>
               </video>
+              <div class='overlay'></div>
             </div>
           </div>
         </div>