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
hashicorp · Jun 28, 2018 · da3ed7d · da3ed7d
1 parent d0dd2a1
commit da3ed7d
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 72 deletions.
diff --git a/website/source/assets/javascripts/consul-connect/carousel.js b/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)
 

diff --git a/website/source/assets/javascripts/consul-connect/home-hero.js b/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
-for (var i = 0; i < $$videos.length; i++) {
-  // set video default speed
-  $$videos[i].playbackRate = playbackRate
-
-  // listen for video ending, then go to the next video
-  $$videos[i].addEventListener('ended', function() {
-    var nextIndex = currentIndex + 1
-    initialiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
-  })
+function initiateVideos() {
+  // remove 'active' from wrappers which may be 
+  // there on page load because of turbolinks
+  for (var i = 0; i < $$wrappers.length; i++) {
+    $$wrappers[i].classList.remove('active')
+  }
+
+  // loop through videos to set up options/listeners
+  for (var i = 0; i < $$videos.length; i++) {
+    // set video default speed
+    $$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++) {
-  $$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)
-}
+document.addEventListener('turbolinks:load', initiateVideos)
diff --git a/website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js b/website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js
diff --git a/website/source/assets/stylesheets/consul-connect/components/_carousel.scss b/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 {
-          content: "";
-          background: url("/assets/images/consul-connect/icons/video.svg")
-            no-repeat center center;
-          width: 20px;
-          height: 20px;
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
-      }
+        &:first-child {
+          padding-left: 30px;
 
-      a {
-        color: $consul-black;
-        display: inline-block;
-        position: relative;
+          &:before {
+            content: "";
+            background: url("/assets/images/consul-connect/icons/video.svg")
+              no-repeat center center;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
 
         &:last-child {
           font-weight: 600;

diff --git a/website/source/assets/stylesheets/consul-connect/components/_hero.scss b/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;

diff --git a/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss b/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 {

diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss
@@ -37,10 +37,8 @@
           }
 
           & > div {
-            padding-left: 21px;
-
-            @media (min-width: 1200px) {
-              padding-left: 0;
+            @media (min-width: 992px) and (max-width: 1199px) {
+              padding-left: 21px;
             }
           }
 
@@ -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;
-              border-radius: 3px;
-              color: #fff;
-              font-size: 1.2rem;
-              font-weight: 700;
-              margin-right: 8px;
-              padding: 2px 9px;
-              text-transform: uppercase;
+              &:first-child {
+                background: $consul-red;
+                border-radius: 3px;
+                color: #fff;
+                font-size: 1.2rem;
+                font-weight: 700;
+                margin-right: 4px;
+                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;
+      }
     }
   }
 

diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb
@@ -217,29 +217,29 @@ description: |-
         <h2>Case Studies</h2>
       </div>
       <div class='g-carousel'>
-        <div class="siema">
-          <div class='card' href='#'>
+        <div class='siema'>
+          <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>
             <div class='content'>
               <span class='tag video'>Video</span>
               <h4>How Groupon Orchestrates Databases as a Service with HashiCorp Consul</h4>
               <p>Groupon 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>
-          <div class='card' href='#'>
+          </a>
+          <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>
             <div class='content'>
               <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 %>
diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb
@@ -233,29 +233,29 @@ 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='card' href='#'>
+        <div class='siema'>
+          <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>
             <div class='content'>
               <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>
-          <div class='card' href='#'>
+          </a>
+          <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>
             <div class='content'>
               <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 %>
diff --git a/website/source/index.html.erb b/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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ @@
       }
       h3 {
-        font-weight: 800;
+        font-weight: 600;
         margin: 40px 0 0;
         span {
@@ Expand Down @@