@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/ripple.js

@@ -1,4 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,246 +0,0 @@
-<% 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

@@ -1,243 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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')