mirror of https://github.com/status-im/consul.git
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
Jack Pearkes
parent
d0dd2a15be
commit
da3ed7d1ec
|
|
@ -1,3 +1,5 @@
|
|||
objectFitImages()
|
||||
|
||||
var qs = document.querySelector.bind(document)
|
||||
var qsa = document.querySelectorAll.bind(document)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
1
website/source/assets/javascripts/consul-connect/vendor/object-fit-images.min.js
vendored
Normal 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}();
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
margin: 40px 0 0;
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>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>
|
||||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue