Consistent layout for upgrades.

index.html

@@ -61,7 +61,7 @@
         <hr>
         <ul class="media-list">
           <li class="media" ng-repeat="w in hrc.workers" ng-show="w.is_visible()">
-            <img style="display: none" class="pull-left" class="media-object" src="{{ w.image }}" alt="">
+            <img style="display: none" class="pull-left media-object" src="{{ w.image }}" alt="">
             <div class="media-body">
               <h4 class="media-heading">{{ w.name }} <span ng-show="w.hired > 0" class="badge">{{ w.hired }}</span></h4>
               <p ng-show="w.hired > 0">{{ w.description }} They produce {{ w.rate }} data per second.</p>
@@ -74,17 +74,16 @@
       <div class="col-xs-2 scrollable" id="Upgrades" ng-controller="UpgradesController as uc">
         <h1>Upgrades</h1>
         <hr>
-        <a href="#"
-           class="thumbnail"
-           ng-repeat="u in uc.upgrades"
-           ng-show="u.is_visible()"
-           ng-disabled="!u.is_available()"
-           ng-click="u.buy()"
-           data-toggle="tooltip"
-           data-placement="bottom"
-           title="{{ u.name }}: {{ u.description }} ">
-           <img src="{{ u.image }}" alt="{{ u.name }}"> <small>{{ u.cost | currency }}</small>
-        </a>
+        <ul class="media-list">
+          <li class="media" ng-repeat="u in uc.upgrades" ng-show="u.is_visible()">
+            <img class="pull-left media-object" src="{{ u.image }}" alt="">
+            <div class="media-body">
+              <h4 class="media-heading">{{ u.name }}</h4>
+              <p>{{ u.description }}</p>
+              <button class="btn" ng-disabled="!u.is_available()" ng-click="u.buy()">Buy <small>({{ u.cost | currency }})</small></button>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>