nicolasmccurdy/rose

View on GitHub
client/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en" ng-app="rose" ng-controller="SearchController">
  <head>
    <meta charset="utf-8">
    <title>Rose</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- styles-->
    <link rel="stylesheet" href="/client.css">

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-22970573-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-22970573-1');
    </script>
  </head>
  <body>
    <!-- header-->
    <header>
      <h1>Rose</h1>
      <p>An interactive, technical, and openly editable Rosetta Stone for developers.</p>
    </header>

    <!-- search form-->
    <input type="search" class="search-input" ng-model="query" placeholder="Search for features, technologies, or code snippets" ng-change="resetFeatures()" autofocus>

    <!-- results-->
    <ol class="search-results" infinite-scroll="fetchFeatures()">
      <li class="card" ng-repeat="feature in features">
        <h2 class="panel-title" ng-bind-html="feature.name | highlight:query"></h2>

        <div class="table-responsive">
          <table>
            <tr ng-repeat="example in feature.examples">
              <td ng-bind-html="example.technology | highlight:query"></td>
              <td>
                <pre ng-if="query"><code ng-bind-html="example.snippet | highlight:query"></code></pre>
                <pre ng-if="!query"><code hljs hljs-source="example.snippet"></code></pre>
              </td>
            </tr>
          </table>
        </div>
      </li>
    </ol>
    <h2 ng-if="!features || features.length === 0">No results</h2>

    <!-- footer-->
    <footer>
      &copy; 2014 <a href="http://nickmccurdy.com/">Nick McCurdy</a><br>
      <a href="https://github.com/nickmccurdy/rose" target="_blank">GitHub Repository</a>
    </footer>

    <!-- scripts-->
    <script src="/client.js"></script>
  </body>
</html>