@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/ripple.js

@@ -0,0 +1,4 @@
+import { iterateArrayLike } from '../../core/dom.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+iterateArrayLike(document.querySelectorAll('.js .mdw-ripple'), Ripple.attach);

package/docs/pages/ripple.pug

@@ -0,0 +1,21 @@
+include ../_mixins.pug
+
++header("ripple")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        h6.mdw-type Javascript
+        .display-flex.flex-column.js
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="default" mdw-surface="binary") Default Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="primary" mdw-surface="binary") Primary Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary") Secondary Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="warn" mdw-surface="binary") Warn Ink
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        h6.mdw-type CSS Only
+        .display-flex.flex-column
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="default" mdw-surface="binary") Default Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="primary" mdw-surface="binary") Primary Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="secondary" mdw-surface="binary") Secondary Ink
+          .demo-core-item.mdw-elevation.mdw-ripple.mdw-theme(mdw-elevation="1" mdw-ink="warn" mdw-surface="binary") Warn Ink
+  script(src='ripple.min.js')

package/docs/pages/search.eta

@@ -0,0 +1,246 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'search'}) %>
+<div class="comparison js">
+  <div class="render">
+    <div class="display-flex" style="padding:8px;">
+      <div class="flex-1 display-flex" flex-column>
+        <p>Text field dropdown with:</p>
+        <ul>
+          <li>one-time search on first input</li>
+          <li>startsWith text filter</li>
+          <li>append input on selection</li>
+        </ul>
+        <div>
+          <label class="mdw-textfield mdw-theme" id="search-textfield-custom1" mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder=" " />
+            <div class="mdw-textfield__border">
+              <div class="mdw-textfield__outline-gap">
+                <div class="mdw-textfield__label">Property</div>
+              </div>
+            </div>
+            <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
+              <div class="custom-busy-indicator display-flex" flex-align-items="center">
+                <div class="mdw-progress-circle">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+                  </svg>
+                </div>
+                <div>Searching...</div>
+              </div>
+              <div class="mdw-list" id="search-list-custom1"></div>
+            </div>
+          </label>
+        </div>
+        <p>Current Selection: <span id="search-result-custom1"></span></p>
+        <p>Text field dropdown with:</p>
+        <ul>
+          <li>input-based search</li>
+          <li>300ms debounce</li>
+          <li>replace input on selection</li>
+          <li>disabled item filter</li>
+        </ul>
+        <div>
+          <label class="mdw-textfield mdw-theme" id="search-textfield-custom2" mdw-ink="primary" mdw-outlined>
+            <input class="mdw-textfield__input" placeholder=" " />
+            <div class="mdw-textfield__border">
+              <div class="mdw-textfield__outline-gap">
+                <div class="mdw-textfield__label">Property</div>
+              </div>
+            </div>
+            <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
+              <div class="custom-busy-indicator display-flex" flex-align-items="center">
+                <div class="mdw-progress-circle">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+                  </svg>
+                </div>
+                <div>Searching...</div>
+              </div>
+              <div class="custom-no-results-indicator display-flex" flex-align-items="center" style="display:none">No results found</div>
+              <div class="mdw-list" id="search-list-custom2"></div>
+            </div>
+          </label>
+        </div>
+        <p>Current Selection: <span id="search-result-custom2"></span></p>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="comparison js">
+  <div class="render">
+    <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
+      <div>12:30</div>
+      <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
+    </div>
+    <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+      <div class="mdw-appbar__action">
+        <div class="mdw-appbar__start">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+        </div>
+        <div class="mdw-appbar__title" mdw-custom>
+          <div class="mdw-textfield mdw-theme" id="search-textfield-simple" mdw-solo mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder="Search" />
+          </div>
+        </div>
+        <div class="mdw-appbar__end">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" id="search-list-simple">
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Attractions</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Dining</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Education</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Family</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Health</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Office</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Promotions</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Radio</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Recipes</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Sports</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Travel</a>
+        </li>
+      </ul>
+    </div>
+    <div class="androidnavbar">
+      <i class="material-icons back-button">&#xE3C8;</i>
+      <i class="material-icons">&#xE836;</i>
+      <i class="material-icons">&#xE835;</i>
+    </div>
+  </div>
+</div>
+<div class="comparison js">
+  <div class="render">
+    <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
+      <div>12:30</div>
+      <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
+    </div>
+    <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+      <div class="mdw-appbar__action">
+        <div class="mdw-appbar__start">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+        </div>
+        <div class="mdw-appbar__title" mdw-custom>
+          <div class="mdw-textfield mdw-theme" id="search-textfield-multiline" mdw-solo mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder="Search" />
+          </div>
+        </div>
+        <div class="mdw-appbar__end">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" id="search-list-multiline">
+        <li class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content mdw-overlay mdw-ripple">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Brunch this weekend?</div>
+              <div class="mdw-list__text-block">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
+              <div class="mdw-list__text-block">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Oui oui</div>
+              <div class="mdw-list__text-block">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Birthday gift</div>
+              <div class="mdw-list__text-block">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Recipe to try</div>
+              <div class="mdw-list__text-block">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Giants game</div>
+              <div class="mdw-list__text-block">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Montauk weekend</div>
+              <div class="mdw-list__text-block">-----</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="androidnavbar">
+      <i class="material-icons back-button">&#xE3C8;</i>
+      <i class="material-icons">&#xE836;</i>
+      <i class="material-icons">&#xE835;</i>
+    </div>
+  </div>
+</div>
+<script src="search.min.js"></script>

package/docs/pages/search.js

@@ -0,0 +1,243 @@
+import ListAdapter from '../../adapters/list/index.js';
+import SearchAdapter from '../../adapters/search/index.js';
+import * as ListContent from '../../components/list/content.js';
+import * as ListItem from '../../components/list/item.js';
+import * as TextField from '../../components/textfield/index.js';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+
+/** @typedef {{line1:string, line2:string}} CustomSearchResult */
+
+/** @type {SearchAdapter<any>} */
+let searchDocsSimple;
+/** @type {SearchAdapter<any>} */
+let searchDocsMultiline;
+
+/**
+ * @param {string} [filter]
+ * @return {CustomSearchResult[]}
+ */
+function performFakeSearch(filter) {
+  const results = [];
+  // eslint-disable-next-line guard-for-in, no-restricted-syntax
+  for (const key in navigator) {
+    /** @type {keyof Navigator} */
+    const navKey = (key);
+    const value = navigator[navKey] && navigator[navKey].toString();
+    if (!filter || key.indexOf(filter) !== -1 || (value && value.indexOf(filter) !== -1)) {
+      results.push({ line1: key, line2: value });
+    }
+  }
+  return results;
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function hideElement(element) {
+  element.style.setProperty('display', 'none');
+}
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function showElement(element) {
+  element.style.setProperty('display', '');
+}
+
+/**
+ * @param {HTMLLIElement} listItemElement
+ * @param {CustomSearchResult} result
+ * @return {void}
+ */
+function searchResultRenderer(listItemElement, result) {
+  if (!listItemElement.children.length) {
+    const markup = `
+    <div class="mdw-list__content mdw-theme" mdw-ink="secondary" aria-selected="false">
+      <div class="mdw-list__text">
+        <div class="mdw-list__text-line"></div>
+        <div class="mdw-list__text-line"></div>
+      </div>
+    </div>`;
+    // eslint-disable-next-line no-param-reassign
+    listItemElement.innerHTML = markup;
+    ListItem.attach(listItemElement);
+  }
+  const lines = listItemElement.getElementsByClassName('mdw-list__text-line');
+  setTextNode(lines[0], result.line1);
+  setTextNode(lines[1], result.line2);
+}
+
+/** @return {void} */
+function buildCustomSearch1() {
+  const textfield = document.getElementById('search-textfield-custom1');
+  const list = document.getElementById('search-list-custom1');
+  /** @type {HTMLElement} */
+  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+
+  // For purpose of this demo results are cached.
+  // Actual filter is performed by SearchAdapter
+
+  /** @type {ListAdapter<CustomSearchResult>} */
+  const customListAdapter = new ListAdapter({
+    element: list,
+    datasource: [],
+    render: searchResultRenderer,
+  });
+
+  /** @type {CustomSearchResult[]} */
+  let myCachedResults = null;
+
+  /** @type {SearchAdapter<CustomSearchResult>} */
+  const searchDocsCustom = new SearchAdapter({
+    textfield,
+    list,
+    searchOnFocus: false,
+    dropdown: true,
+    textFilter: 'startsWith',
+    suggestionMethod: 'append',
+    performSearch(input, resolve) {
+      // Use precached results
+      if (myCachedResults != null) {
+        resolve(myCachedResults);
+        return;
+      }
+
+      // Display a busy indicator
+      showElement(busyIndicator);
+
+      // Add results to a cached search adapter
+      myCachedResults = performFakeSearch();
+
+      // Let busy indicator spin to illustrate loading
+      setTimeout(() => {
+        // Send back the search results
+        resolve(myCachedResults);
+      }, 2000);
+    },
+    updateList(searchResults, resolve) {
+      // SearchAdapter signaling the UI is ready to update with search results
+
+      if (customListAdapter.datasource === searchResults) {
+        // Search results have already been mapped. Nothing to do.
+        // SearchAdapter handles item filtering.
+        resolve();
+        return;
+      }
+
+      // Directly assign search results as ListAdapter's data source
+      customListAdapter.datasource = searchResults;
+
+      // Remove busy indicator
+      hideElement(busyIndicator);
+
+      // Tell ListAdapter to perform a full refresh
+      customListAdapter.refresh();
+      resolve();
+    },
+  });
+
+  searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    /** @type {HTMLElement} */
+    const listContentElement = (event.target);
+    /** @type {HTMLLIElement} */
+    const listItemElement = (listContentElement.parentElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
+    const text = `${selectedItem.line1}:${selectedItem.line2}`;
+    document.getElementById('search-result-custom1').textContent = text;
+  });
+}
+
+/** @return {void} */
+function buildCustomSearch2() {
+  const textfield = document.getElementById('search-textfield-custom2');
+  const list = document.getElementById('search-list-custom2');
+  /** @type {HTMLElement} */
+  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+  /** @type {HTMLElement} */
+  const noResultsIndicator = (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
+
+  /** @type {ListAdapter<CustomSearchResult>} */
+  const customListAdapter = new ListAdapter({
+    element: list,
+    datasource: [],
+    render: searchResultRenderer,
+  });
+
+  // For purpose of this query is "searched" every time with no cache.
+  // SearchAdapter performs no filter
+
+  /** @type {SearchAdapter<CustomSearchResult>} */
+  const searchDocsCustom = new SearchAdapter({
+    textfield,
+    list,
+    debounce: 300,
+    dropdown: true,
+    filterItems: false,
+    performSearch(searchTerm, resolve) {
+      // Clear ListAdapter
+      customListAdapter.clear();
+
+      showElement(busyIndicator);
+      hideElement(noResultsIndicator);
+
+      const myData = performFakeSearch(searchTerm);
+      setTimeout(() => {
+        // Spin for 1000ms
+        resolve(myData);
+      }, 1000);
+    },
+    updateList(items, resolve) {
+      hideElement(busyIndicator);
+
+      if (!items.length) {
+        showElement(noResultsIndicator);
+        resolve();
+        return;
+      }
+
+      // Assign results to ListAdapter
+      customListAdapter.datasource = items;
+      customListAdapter.refresh();
+
+      resolve();
+    },
+  });
+  searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    /** @type {HTMLElement} */
+    const listContentElement = (event.target);
+    /** @type {HTMLLIElement} */
+    const listItemElement = (listContentElement.parentElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
+    const text = `${selectedItem.line1}:${selectedItem.line2}`;
+    document.getElementById('search-result-custom2').textContent = text;
+  });
+}
+
+/** @return {void} */
+function setupSearches() {
+  if (!searchDocsSimple) {
+    searchDocsSimple = new SearchAdapter({
+      textfield: document.getElementById('search-textfield-simple'),
+      list: document.getElementById('search-list-simple'),
+    });
+  }
+  if (!searchDocsMultiline) {
+    searchDocsMultiline = new SearchAdapter({
+      textfield: document.getElementById('search-textfield-multiline'),
+      list: document.getElementById('search-list-multiline'),
+      suggestionMethod: 'none',
+    });
+  }
+
+  buildCustomSearch1();
+  buildCustomSearch2();
+}
+
+/** @return {void} */
+function initializeMdwComponents() {
+  iterateArrayLike(document.querySelectorAll('.js .mdw-textfield'), TextField.attach);
+}
+
+initializeMdwComponents();
+setupSearches();

package/docs/pages/search.pug

@@ -0,0 +1,165 @@
+include ../_mixins.pug
+
++header("search")
+  .comparison.js
+    .render
+      .display-flex(style="padding:8px")
+        .flex-1.display-flex(flex-column)
+          p Text field dropdown with:
+          ul
+            li one-time search on first input
+            li startsWith text filter
+            li append input on selection
+          div
+            label.mdw-textfield#search-textfield-custom1.mdw-theme(mdw-ink="secondary")
+              input.mdw-textfield__input(placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Property
+              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
+                .custom-busy-indicator.display-flex(flex-align-items="center")
+                  .mdw-progress-circle
+                    svg(viewBox="0 0 24 24")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
+                  span Searching...
+                .mdw-list#search-list-custom1
+          p Current Selection: 
+            span#search-result-custom1
+          p Text field dropdown with:
+          ul
+            li input-based search
+            li 300ms debounce
+            li replace input on selection
+            li disabled item filter
+          div
+            label.mdw-textfield#search-textfield-custom2.mdw-theme(mdw-ink="primary" mdw-outlined)
+              input.mdw-textfield__input(placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Property
+              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
+                .custom-busy-indicator.display-flex(flex-align-items="center")
+                  .mdw-progress-circle
+                    svg(viewBox="0 0 24 24")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
+                  span Searching...
+                .custom-no-results-indicator.display-flex(flex-align-items="center" style="display:none")
+                  span No results found.
+                .mdw-list#search-list-custom2
+          p Current Selection: 
+            span#search-result-custom2
+  .comparison.js
+    .render
+      +androidstatusbar('primary 700', 'dark')
+      .mdw-appbar.mdw-theme(mdw-surface="primary 500" mdw-dark)
+        .mdw-appbar__action
+          .mdw-appbar__start
+            +mdwButton({ icon:true }).material-icons arrow_back
+          .mdw-appbar__title(mdw-custom)
+            .mdw-textfield#search-textfield-simple.mdw-theme(mdw-solo mdw-ink="secondary")
+              input.mdw-textfield__input(placeholder="Search")
+          .mdw-appbar__end
+            +mdwButton({ icon:true }).material-icons clear
+      .content
+        ul.mdw-list#search-list-simple
+          li.mdw-list__item
+            a.mdw-list__content Attractions
+          li.mdw-list__item
+            a.mdw-list__content Dining
+          li.mdw-list__item
+            a.mdw-list__content Education
+          li.mdw-list__item
+            a.mdw-list__content Family
+          li.mdw-list__item
+            a.mdw-list__content Health
+          li.mdw-list__item
+            a.mdw-list__content Office
+          li.mdw-list__item
+            a.mdw-list__content Promotions
+          li.mdw-list__item
+            a.mdw-list__content Radio
+          li.mdw-list__item
+            a.mdw-list__content Recipes
+          li.mdw-list__item
+            a.mdw-list__content Sports
+          li.mdw-list__item
+            a.mdw-list__content Travel
+      +androidnavbar
+
+  .comparison.js
+    .render
+      +androidstatusbar('primary 700', 'dark')
+      .mdw-appbar.mdw-theme(mdw-surface="primary 500" mdw-dark)
+        .mdw-appbar__action
+          .mdw-appbar__start
+            +mdwButton({ icon:true }).material-icons arrow_back
+          .mdw-appbar__title(mdw-custom)
+            .mdw-textfield#search-textfield-multiline.mdw-theme(mdw-solo mdw-ink="secondary")
+              input.mdw-textfield__input(placeholder="Search")
+          .mdw-appbar__end
+            +mdwButton({ icon:true}).material-icons clear
+      .content
+        ul.mdw-list#search-list-multiline
+          li.mdw-list__subheader.mdw-theme(mdw-ink="medium") Today
+          li.mdw-list__item
+            .mdw-list__content.mdw-overlay.mdw-ripple
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Brunch this weekend?
+                .mdw-list__text-block Ali Connors
+                  span.mdw-theme(mdw-ink="medium")  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Summer BBQ
+                  span.mdw-theme(mdw-ink="medium")  4
+                .mdw-list__text-block to Alex, Scott, Jennifer
+                  span.mdw-theme(mdw-ink="medium")  — Wish I could come. but I'm out of town this weekend.
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Oui oui
+                .mdw-list__text-block Sandra Adams
+                  span.mdw-theme(mdw-ink="medium")  — Do you have Paris recommendations? Have you ever been?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Birthday gift
+                .mdw-list__text-block Trevor Hansen
+                  span.mdw-theme(mdw-ink="medium")  — Have any ideas about what we should get Heidi for her birthday?
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Recipe to try
+                .mdw-list__text-block Britta Holt
+                  span.mdw-theme(mdw-ink="medium")  — We should eat this: Grated Squash, Corn, and tomatillo Tacos J
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Giants game
+                .mdw-list__text-block David Park
+                  span.mdw-theme(mdw-ink="medium")  — Any interest in seeing
+          li.mdw-list__item
+            .mdw-list__content
+              .mdw-list__avatar
+                i.material-icons(style="font-size:40px") 
+              .mdw-list__text
+                .mdw-list__text-line Montauk weekend
+                .mdw-list__text-block -----
+      +androidnavbar
+
+  
+  script(src='search.min.js')