Mobile UI

public/client.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var logo;
+var searchInput;
+
+window.addEventListener("load", function(event) {
+  logo = document.querySelector("#home-logo");
+  searchInput = document.querySelector("header input");
+
+  checkSearchInput();
+
+
+  searchInput.addEventListener("focus", hideLogo, true);
+  searchInput.addEventListener("blur", checkSearchInput, true);
+});
+
+function hideLogo() {
+  logo.classList.add("searchUsed");
+}
+
+function checkSearchInput() {
+  if (searchInput.value === undefined || searchInput.value.length == 0) {
+    showLogo();
+  }
+  else {
+    hideLogo();
+  }
+}
+
+function showLogo() {
+  logo.classList.remove("searchUsed");
+}

public/style.css

@@ -2,119 +2,157 @@ html, body {
   margin: 0;
   padding: 0;
   background: #fff;
-  font: 11pt/2 'Droid Sans','Source Sans Pro',Ubuntu,Helvetica,Arial,sans-serif;
+  font: 16px/2 'Droid Sans','Source Sans Pro',Ubuntu,Helvetica,Arial,sans-serif;
   color: #222;
+  word-wrap: break-word;
+
+  /*
+   Google material color palette
+   https://material.io/guidelines/style/color.html
+  */
+  --blue-100: #bbdefb;
+  --blue-300: #64b5f6;
+  --blue-700: #1976d2;
 }
 
 
 /* header */
 
 header {
   position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 70px;
   background: #fafafa;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+  text-align: center;
 }
 
-header>nav {
+header > nav {
   max-width: 1000px;
   margin: 0 auto;
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 }
 
-header .home-logo {
-  flex-grow: 0;
-  flex-shrink: 0;
-  text-indent: -9999px;
+header a {
   display: inline-block;
-  width: 122px;
-  background: url(ofl-logo.svg) center center no-repeat;
-  background-origin: content-box;
+  height: 4.5em;
+  line-height: 4.5em;
 }
-header .home-logo>svg {
-  height: 50px;
-  vertical-align: middle;
+header a:hover,
+header a:focus {
+  background-color: #e8e8e8;
+  color: #000;
 }
 
-header form {
+#left-nav {
   flex-grow: 1;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+}
+
+#home-logo {
+  --logo-width: 122px;
+  --logo-padding: .5ex;
+  display: inline-block;
+  width: 0;
+  padding-left: calc(var(--logo-width) + 2 * var(--logo-padding));
+  overflow: hidden;
+  background-image: url(ofl-logo.svg);
+  background-position: var(--logo-padding) center;
+  background-size: calc(100% - 2 * var(--logo-padding)) auto;
+  background-repeat: no-repeat;
+  transition: padding .2s;
 }
 
-header .right-nav {
-  flex-grow: 0;
-  white-space: nowrap;
+header form {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 header input {
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   padding: 5px;
   background: #fff;
   border: 1px solid #cfd6e6;
   border-radius: 3px;
-  font-size: 0.95rem;
+  font-size: 1.05em;
   line-height: 1.2;
+  width: 100%;
 }
 
 header input:focus {
-  border-color: #5294e2;
+  border-color: var(--blue-300);
 }
 
 header button {
+  --icon-size: calc(1.2em + 2px);
+  --padding: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   margin-left: 4px;
-  padding: 5px 1ex;
-  background: #fbfbfb;
-  border: 1px solid #cfd6e6;
+  position: relative;
+  padding: 0 0 0 calc(var(--icon-size) + 2 * var(--padding));
+  width: 0;
+  height: calc(var(--icon-size) + 2 * var(--padding));
+  box-sizing: content-box;
+  overflow: hidden;
+  background-color: #fbfbfb;
+  border: 1px solid transparent;
   border-radius: 3px;
-  font-size: 0.95rem;
+  font-size: 1.05em;
   line-height: 1.2;
+  cursor: pointer;
 }
 header button::-moz-focus-inner {
   border: 0;
 }
 
-header button:hover,
 header button:focus {
-  background: #fff;
-  border-color: #abb1be;
+  border-color: var(--blue-300);
+}
+
+header button:hover {
+  background-color: var(--blue-300);
+  color: #fff;
 }
 
 header button:active {
-  background: #5294e2;
+  background-color: var(--blue-700);
+  border-color: transparent;
   color: #fff;
 }
 
-header a {
-  display: inline-block;
-  line-height: 70px;
+header svg {
+  display: block;
+  position: absolute;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  top: var(--padding);
+  left: var(--padding);
+  fill: currentcolor;
+}
+
+#right-nav > a {
   padding: 0 1ex;
   text-decoration: none;
   color: inherit;
 }
-header a:hover,
-header a:focus {
-  background-color: #e8e8e8;
-  color: #000;
-}
 
 
 /* main */
 
 #main {
   max-width: 1000px;
   margin: 0 auto;
-  min-height: calc(100vh - 70px - 10px);
+  min-height: calc(100vh - 5em - 10px);
   overflow: hidden;
-  padding: 70px 10px 10px;
+  padding: 5em 10px 10px;
 }
 
 .message {
@@ -197,4 +235,62 @@ a[href=''] {
   text-decoration: none;
   cursor: default;
   pointer-events: none;
+}
+
+
+
+/** MOBILE LAYOUT **/
+
+/* Tablet */
+@media (max-width: 800px) {
+  header {
+    font-size: 14px;
+  }
+
+  header > nav > div {
+    flex-basis: 100%;
+  }
+
+  #home-logo {
+    --logo-width: 92px;
+    line-height: 3em;
+    height: 3em;
+  }
+
+  header form {
+    flex-grow: 0;
+    padding: 0 .5ex;
+  }
+
+  #right-nav {
+    justify-content: center;
+  }
+
+  #right-nav > a {
+    line-height: 2.7em;
+    height: 2.7em;
+  }
+}
+
+/* Phone */
+@media (max-width: 440px) {
+  #home-logo {
+    --logo-width: 82px;
+    line-height: 2.8em;
+    height: 2.8em;
+  }
+
+  #home-logo.searchUsed {
+    padding: 0;
+  }
+
+  header form {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+
+  header form div {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
 }

views/partials/header.js

@@ -2,29 +2,36 @@ module.exports = function(options) {
   let str = `<!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
-<title>${options.title}</title>
-<link rel="stylesheet" type="text/css" href="/style.css" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${options.title}</title>
+  <link rel="stylesheet" type="text/css" href="/style.css" />
+  <script type="text/javascript" src="/client.js"></script>
 </head>
 <body>
-<header>
-<nav>
+  <header>
+    <nav>
+      <div id="left-nav">
+        <a href="/" id="home-logo" title="Open Fixture Library">Open Fixture Library</a>
 
-<a href="/" class="home-logo" title="Open Fixture Library">Open Fixture Library</a>
+        <form action="/search">
+          <div>
+            <input type="search" name="q" placeholder="Search fixtures" value="${options.searchQueryEscaped || ''}" />
+          </div>
+          <button type="submit">
+            Search
+            ${require('../partials/svg')({svgBasename: 'magnify'})}
+          </button>
+        </form>
+      </div>
 
-<form action="/search">
-<input type="search" name="q" placeholder="Search fixtures" value="${options.searchQueryEscaped || ''}" />
-<button type="submit">Search</button>
-</form>
-
-<div class="right-nav">
-<a href="/manufacturers">Manufacturers</a>
-<a href="/categories">Categories</a>
-<a href="/about">About</a>
-</div>
-
-</nav>
-</header>
+      <div id="right-nav">
+        <a href="/manufacturers">Manufacturers</a>
+        <a href="/categories">Categories</a>
+        <a href="/about">About</a>
+      </div>
+    </nav>
+  </header>
 <div id="main">`;
 
   options.messages.forEach(function(message) {

views/partials/svg.js

@@ -0,0 +1,3 @@
+module.exports = function(options) {
+  return require("fs").readFileSync(require("path").join(__dirname, '..', '..', 'public', options.svgBasename + '.svg'), 'utf8');
+}