From fc59139279640fe408a4d86287e404bd6f7441e9 Mon Sep 17 00:00:00 2001
From: Adrian Schaedle <schaedles@gmail.com>
Date: Sat, 11 Oct 2014 22:59:26 -0700
Subject: [PATCH] Update Bootstrap to 3.2, markup to match

---
 bower.json                                    |  2 +-
 public/index.html                             | 18 +++++++++---------
 public/js/component/ui_top_components_list.js | 11 +++++++----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/bower.json b/bower.json
index c4ab28e..78412b7 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,7 @@
     "mustache": "~0.7.2",
     "flight-components": "0.1.1",
     "underscore-amd": "~1.5.0",
-    "bootstrap": "~3.0.0",
+    "bootstrap": "~3.2.0",
     "moment": "~2.1.0"
   },
   "devDependencies": {
diff --git a/public/index.html b/public/index.html
index 7ab6bba..04b48f7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,7 @@
             <h1 class="site-title">Flight</h1>
           </div>
           <div class="col-sm-6">
-            <h2 class="site-tagline pull-right">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
+            <h2 class="site-tagline text-right">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
           </div>
         </div>
         <hr/>
@@ -36,18 +36,18 @@ <h2 class="site-tagline pull-right">Discover <a href='http://flightjs.github.io/
       <div class='components-wrapper'>
         <div class="row">
           <div class="col-md-4">
-            <ul id='top-forks' class='top-list nav nav-pills nav-stacked'>
-              <li class='header'>Most forked</li>
-            </ul>
+            <div id='top-forks' class='top-list list-group active'>
+              <div class='list-group-item header'>Most forked</div>
+            </div>
           </div>
           <div class="col-md-4">
-            <ul id='top-stars' class='top-list nav nav-pills nav-stacked'>
-              <li class='header'>Most starred</li>
+            <ul id='top-stars' class='top-list list-group active'>
+              <li class='list-group-item header'>Most starred</li>
             </ul>
           </div>
           <div class="col-md-4">
-            <ul id='recently-created' class='top-list nav nav-pills nav-stacked'>
-              <li class='header'>Recently created</li>
+            <ul id='recently-created' class='top-list list-group active'>
+              <li class='list-group-item header'>Recently created</li>
             </ul>
           </div>
         </div>
@@ -76,7 +76,7 @@ <h2 class="site-tagline pull-right">Discover <a href='http://flightjs.github.io/
       </div>
 
       <div id='footer'>
-        This list is automatically generated from the <a href='http://sindresorhus.com/bower-components/'>Bower</a> components list. Components must be prefixed with <strong>"flight-"</strong> in order to be visible.
+        <p class="text-muted">This list is automatically generated from the <a href='http://sindresorhus.com/bower-components/'>Bower</a> components list. Components must be prefixed with <strong>"flight-"</strong> in order to be visible.</p>
       </div>
     </div>
 
diff --git a/public/js/component/ui_top_components_list.js b/public/js/component/ui_top_components_list.js
index daaa4c8..009141b 100644
--- a/public/js/component/ui_top_components_list.js
+++ b/public/js/component/ui_top_components_list.js
@@ -30,11 +30,14 @@ define(function (require) {
 
 
     this.htmlFor = function (component) {
+      var template = [
+        '<a class="list-group-item" href="{{website}}">',
+          '<span class="badge">{{stat}}</span>',
+          '{{name}}',
+        '</a>'
+      ].join('\n');
       component.stat = this.attr.displayFunction(component[this.attr.compare]);
-      return Mustache.render(
-          "<li><a href='{{website}}'>{{name}}" +
-          "<span class='stat'>{{stat}}</span></a></li>"
-          , component);
+      return Mustache.render(template, component);
     };
     this.displayTopList = function (ev, data) {
       data.components.forEach(function (component) {