luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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
This commit is contained in:
RJ Spiker 2018-06-28 12:43:30 -06:00 committed by Jack Pearkes
parent 48c5a35d1c
commit 88b3641c56
10 changed files with 113 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/source/assets/javascripts/consul-connect/carousel.js
View File

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

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

@ -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
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')
}
// 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)
})
// 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)

1
website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js vendored Normal file
View File

@ -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}();

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

@ -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;
&: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;
}
}
}
a {
color: $consul-black;
display: inline-block;
position: relative;
&:last-child {
font-weight: 600;

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

@ -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;

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

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

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

@ -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;
}
}
}

15
website/source/configuration.html.erb
View File

@ -217,8 +217,8 @@ 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>
@ -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>
<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>
@ -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 %>

15
website/source/discovery.html.erb
View File

@ -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='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>
@ -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>
<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>
@ -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 %>

3
website/source/index.html.erb
View File

@ -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>