Update Bootstrap to 3.2, markup to match

flightjs · Oct 12, 2014 · fc59139 · fc59139
1 parent 299cacd
commit fc59139
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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) {