Closes #989

.gitmodules

@@ -1,6 +1,6 @@
-[submodule "web/components"]
-	path = web/components
-	url = https://github.com/lbryio/components
 [submodule "web/scss/color"]
 	path = web/scss/color
 	url = https://github.com/lbryio/color
+[submodule "web/components"]
+	path = web/components
+	url = https://github.com/lbryio/components

view/template/nav/_header.php

@@ -166,10 +166,10 @@
               </drawer-child>
 
             <drawer-child>
-                <a href="https://lbry.tech/spec">
+              <a href="https://lbry.tech/spec">
-                    <strong>The Spec</strong>
+                <strong>The Spec</strong>
-                    <span>Read a formal technical description of how LBRY works</span>
+                <span>Read a formal technical description of how LBRY works</span>
-                </a>
+              </a>
             </drawer-child>
 
               <drawer-child>

web/components

@@ -1 +1 @@
-Subproject commit bcde1c9131da7b3f9d71d9bff5d91f115b756efc
+Subproject commit fac5d5c4461301bfbef4794e67123a050dd5d8fc

web/js/global.js

@@ -1,5 +1,4 @@
 window.lbry = {};
-//document.domain = 'lbry.com';
 
 jQuery.fn.extend({
   jFor: function() {
@@ -7,13 +6,11 @@ jQuery.fn.extend({
         target = self.data('for') || self.attr('for');
 
     if (!target)
-    {
       return $();
-    }
+
-    if (target instanceof jQuery) //can be set in JS
+    if (target instanceof jQuery)
-    {
       return target;
-    }
+
     return $(target.toString());
   }
 });
@@ -23,59 +20,52 @@ $(document).ready(function() {
 
   body.on('click', 'a', onAnchorClick);
 
-  if (window.twttr)
+  if (window.twttr) {
-  {
     twttr.events.bind('follow', onTwitterFollow);
   }
 
-  window.fbAsyncInit = function()
+  window.fbAsyncInit = function() {
-  {
     window.FB.Event.subscribe('edge.create', onFacebookLike);
   }
 
-  function onAnchorClick()
+  function onAnchorClick() {
-  {
     var anchor = $(this),
         action = anchor.data('action');
 
-    if (action == 'toggle')
+    if (action == 'toggle') {
-    {
       anchor.jFor().toggle();
       anchor.data('toggle-count', 1 + (anchor.data('toggle-count') ? anchor.data('toggle-count') : 0));
       anchor.find('.toggle-even, .toggle-odd').hide();
       anchor.find(anchor.data('toggle-count') % 2 == 1 ? '.toggle-odd' : '.toggle-even').show();
     }
-    if (action == 'toggle-class')
+
-    {
+    if (action == 'toggle-class') {
       anchor.jFor().toggleClass(anchor.data('class'));
     }
-    if (anchor.data('facebook-track') && window.fbq)
+
-    {
+    if (anchor.data('facebook-track') && window.fbq) {
       fbq('track', "Lead");
     }
-    if (anchor.data('twitter-track-id') && window.twttr)
+
-    {
+    if (anchor.data('twitter-track-id') && window.twttr) {
       twttr.conversion.trackPid(anchor.data('twitter-track-id'));
     }
-    if (anchor.data('analytics-category') && anchor.data('analytics-action') && anchor.data('analytics-label') && window.ga)
+
-    {
+    if (anchor.data('analytics-category') && anchor.data('analytics-action') && anchor.data('analytics-label') && window.ga) {
       ga('send', 'event', anchor.data('analytics-category'), anchor.data('analytics-action'), anchor.data('analytics-label'));
     }
   }
 
-  function resizeVideo(iframe)
+  function resizeVideo(iframe) {
-  {
     var maxWidth = Math.min(iframe.offsetParent().width(), iframe.data('maxWidth')),
         maxHeight = iframe.data('maxHeight'),
         ratio = iframe.data('aspectRatio');
 
-    if (ratio && maxWidth && maxHeight)
+    if (ratio && maxWidth && maxHeight) {
-    {
       var height = maxWidth * ratio,
           width = maxWidth;
 
-      if (height > maxHeight)
+      if (height > maxHeight) {
-      {
         height = maxHeight;
         width = maxHeight * 1 / ratio;
       }
@@ -86,36 +76,23 @@ $(document).ready(function() {
     }
   }
 
-  function onTwitterFollow (intentEvent)
+  function onTwitterFollow(intentEvent) {
-  {
+    if (!intentEvent || !ga)
-    if (!intentEvent || !ga) return;
+      return;
+
     ga('send', 'social', 'Twitter', 'follow', window.location.href);
   }
 
-  function onFacebookLike()
+  function onFacebookLike() {
-  {
+    if (!ga)
-    if (!ga) return;
+      return;
+
     ga('send', 'social', 'Facebook', 'like', window.location.href);
   }
-  //
-  // $('.video > video').each(function() {
-  //   var iframe = $(this);
-  //   iframe.data('maxWidth', iframe.attr('width'));
-  //   iframe.data('maxHeight', iframe.attr('height'));
-  //   iframe.data('aspectRatio', iframe.attr('height') / iframe.attr('width'))
-  //     .removeAttr('height')
-  //     .removeAttr('width');
-  //
-  //   resizeVideo(iframe);
-  // });
-  //
-  // $(window).resize(function() {
-  //   $('.video > video').each(function() {
-  //     resizeVideo($(this));
-  //   })
-  // });
 });
 
+
+
 // Automatically open external links in new tabs
 document.querySelectorAll("a[href]").forEach(link => {
   if (link.href.indexOf(location.hostname) === -1) {
@@ -126,28 +103,30 @@ document.querySelectorAll("a[href]").forEach(link => {
 
 // Greet visitors from .tech
 document.addEventListener("DOMContentLoaded", () => {
-  if (
+  switch(true) {
-    document.referrer.includes("http://localhost:8080") ||
+    case document.referrer.includes("http://localhost:8080"):
-    document.referrer.includes("https://lbry.tech")
+    case document.referrer.includes("https://lbry.tech"):
-  ) {
+      const html = `
-    const html = `
+        <section class="alert" id="tech-greeting">
-      <section class="alert" id="tech-greeting">
+          <div class="inner-wrap">
-        <div class="inner-wrap">
+            <p><strong>Welcome to the consumer side of LBRY!</strong> You've had fun delving into the tech, we hope.</p>
-          <p><strong>Welcome to the consumer side of LBRY!</strong> You've had fun delving into the tech, we hope.</p>
+            <br><br>
-          <br><br>
+            <p>Here by accident? Come back to <a href="${document.referrer}">the techno scene</a>.</p>
-          <p>Here by accident? Come back to <a href="${document.referrer}">the techno scene</a>.</p>
 
-          <button id="close-alert">&times;</button>
+            <button id="close-alert">&times;</button>
-        </div>
+          </div>
-      </section>
+        </section>
-    `;
+      `;
 
-    document.querySelector("body").insertAdjacentHTML("afterend", html);
+      document.querySelector("body").insertAdjacentHTML("afterend", html);
 
-    document.getElementById("close-alert").onclick = () => {
+      document.getElementById("close-alert").onclick = () => {
-      document.getElementById("tech-greeting").style.display = "none";
+        document.getElementById("tech-greeting").style.display = "none";
-    };
+      };
+
+      break;
+
+    default:
+      break;
   }
 });
-
-

web/scss/components/_header.scss

@@ -99,6 +99,10 @@ drawer-children {
 }
 
 drawer-child {
+  > a {
+    display: block;
+  }
+
   @media (min-width: 951px) {
     &.drawer--social {
       &:hover {