Only show the Via link on the mobile homepage

When visiting the Hypothesis homepage on mobile devices,
only show the Via link.

The bookmarklet is not practically installable for most
Android/iOS users, although the link is still there below
the laptop if anyone really wants to try.

Chrome extensions are currently not supported on mobile :(

h/static/scripts/browser-env-test.js

+var isMobile = navigator.userAgent.match(/\b(Mobile)\b/);
+var isMicrosoftEdge = navigator.userAgent.match(/\bEdge\b/);
+
+/**
+ * Dictionary defining the conditions that can be used
+ * to show or hide elements on the page depending on
+ * features of the app or site that are available
+ * in the current environment.
+ *
+ * Keys correspond to hyphenated class names prefixed with 'js-env',
+ * eg. 'js-env-browser-is-chrome'.
+ */
+var env = {
+  browserIsChrome: typeof window.chrome !== 'undefined',
+  browserIsOther: typeof window.chrome === 'undefined',
+  installerAvailable: !isMobile && !isMicrosoftEdge,
+};
+
+function hypenate(key) {
+  // 'camelCase' -> 'camel-case'
+  return key.replace(/[a-z]+/g, '$&-').toLowerCase().slice(0, -1);
+}
+
+/**
+ * Show or hide elements on the page depending on the capabilities
+ * of the current browser.
+ *
+ * Elements to be shown or hidden are marked up with
+ * 'js-env-$condition' classes. If all conditions evaluate to true,
+ * the 'is-hidden' class is removed from the element, otherwise
+ * it is added.
+ *
+ * The list of conditions is defined by hyphenated versions of the
+ * keys of the 'env' dictionary.
+ */
+function showSupportedElements(rootElement) {
+  var showElements = [];
+  var hideElements = [];
+
+  Object.keys(env).forEach(function (key) {
+    var selector = '.js-env-' + hypenate(key);
+    var elements = rootElement.querySelectorAll(selector);
+    for (var i = 0; i < elements.length; i++) {
+      if (env[key]) {
+        showElements.push(elements[i]);
+      } else {
+        hideElements.push(elements[i]);
+      }
+    }
+  });
+
+  showElements.forEach(function (el) {
+    el.classList.remove('is-hidden');
+  });
+  hideElements.forEach(function (el) {
+    el.classList.add('is-hidden');
+  });
+}
+
+module.exports = {
+  showSupportedElements: showSupportedElements,
+};

h/static/scripts/browser-test.js

-// TODO - Make this a CommonJS module and move it into
-// the site JS?
-var env = {
-  browserIsChrome: typeof window.chrome !== 'undefined',
-  browserIsOther: typeof window.chrome === 'undefined',
-};
-
-function hypenate(key) {
-  // 'camelCase' -> 'camel-case'
-  return key.replace(/[a-z]+/g, '$&-').toLowerCase().slice(0, -1);
-}
-
-Object.keys(env).forEach(function (key) {
-  var selector = '.js-' + hypenate(key);
-  var elements = document.querySelectorAll(selector);
-  for (var i = 0; i < elements.length; i++) {
-    if (env[key]) {
-      elements[i].classList.remove('is-hidden');
-    } else {
-      elements[i].classList.add('is-hidden');
-    }
-  }
-});

h/static/scripts/site.js

@@ -2,8 +2,10 @@ var CreateGroupFormController = require('./create-group-form');
 var DropdownMenuController = require('./dropdown-menu');
 var ShareGroupFormController = require('./share-group-form');
 
+var envTest = require('./browser-env-test');
+
 // load our customized version of Bootstrap which
-// provides a few basic UI components
+// provides a few basic UI components (eg. modal dialogs)
 require('./vendor/bootstrap');
 
 function setupGroupsController(path) {
@@ -19,5 +21,9 @@ document.addEventListener('DOMContentLoaded', function () {
     setupGroupsController(document.location.pathname);
   }
 
+  // setup components
   new DropdownMenuController(document);
+
+  // show/hide elements depending on the environment
+  envTest.showSupportedElements(document);
 });

h/static/styles/home.scss

@@ -41,17 +41,26 @@
     text-align: center;
   }
 
+  $laptop-image-width: 800px;
+  $laptop-image-height: 424px;
+
+  $laptop-screenshot-width: 620px;
+  $laptop-screenshot-height: 365px;
+
+  $laptop-screenshot-left-offset: 90px;
+  $laptop-screenshot-top-offset: 29px;
+
   .home__intro-laptop {
     position: relative;
-    width: 800px;
-    height: 424px;
+    width: $laptop-image-width;
+    height: $laptop-image-height;
     margin-left: auto;
     margin-right: auto;
   }
 
   .home__intro-image {
-    width: 800px;
-    height: 424px;
+    width: 100%;
+    height: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -65,10 +74,10 @@
 
     // screenshot size and positioning chosen to
     // fit in the screen area of the laptop image
-    width: 620px;
-    height: 365px;
-    top: 29px;
-    left: 90px;
+    max-width: $laptop-screenshot-width;
+    height: $laptop-screenshot-height;
+    top: $laptop-screenshot-top-offset;
+    left: $laptop-screenshot-left-offset;
   }
 
   .home__intro {
@@ -136,6 +145,10 @@
     margin-right: 10px;
   }
 
+  .installer__alt.is-hidden {
+    display: none;
+  }
+
   $proxy-border: 1px solid $color-alto;
   $proxy-border-radius: 4px;
 
@@ -226,8 +239,24 @@
   }
 
   @media only screen and (max-width: $break-tablet) {
+    .home__content {
+      margin-top: 40px;
+    }
+
+    .home__intro-container {
+      margin-top: 180px;
+    }
+
     .home__intro-laptop {
-      display: none;
+      width: $laptop-image-width / 3;
+      height: $laptop-image-height / 3;
+    }
+
+    .home__intro-screenshot {
+      width: $laptop-screenshot-width / 3;
+      height: $laptop-screenshot-height / 3;
+      left: $laptop-screenshot-left-offset / 3;
+      top: $laptop-screenshot-top-offset / 3;
     }
   }
 }