Refactored inventory file NPCs to use Bootstrap v3 grid and CSS instead of tables

website/views/options/inventory/drops.jade

@@ -94,13 +94,9 @@
 
     .col-md-6.border-left
       h2=env.t('market')
-      .row-fluid
-        table.npc_alex_container
-          tr
-            td
+      .npc_alex_container
         .pull-left(class="#{env.worldDmg.market ? 'npc_alex_broken' : 'npc_alex'}")
-            td
-              .popover.static-popover.fade.right.in
+        .popover.static-popover.fade.right.in.pull-left
           .arrow
           h3.popover-title
             a(target='_blank', href='http://www.kickstarter.com/profile/523661924')=env.t('alexander')

website/views/options/inventory/mounts.jade

@@ -14,25 +14,21 @@ mixin mountList(source)
       -}
 
 .container-fluid
-  .stable.row-fluid
-    table
-      tr
-        td
-          div(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
-        td
-          .popover.static-popover.fade.right.in
-            .arrow
+  .stable.row: .col-xs-12
+    .pull-left-sm.col-centered(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
+      .arrow.hidden-xs
       h3.popover-title
         a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
       .popover-content
         p=env.t('mattShall', {name: "{{user.profile.name}}"})
         h4= env.t('mountMasterProgress') + ': {{mountCount}} / {{totalMounts}} ' + env.t('mountsTamed')
-    .col-md-12
+  .row.col-md-12
     +mountList(env.Content.dropEggs)
-    .col-md-12
+  .row.col-md-12
     h4=env.t('questMounts')
     +mountList(env.Content.questEggs)
-    .col-md-12
+  .row.col-md-12
     h4=env.t('rareMounts')
     menu
       div

website/views/options/inventory/pets.jade

@@ -14,27 +14,23 @@ mixin petList(source)
               button(class="pet-evolved pet-button Pet-#{pet}", ng-if='user.items.pets["#{pet}"]<0')
 
 .container-fluid
-  .stable.row-fluid
-    table
-      tr
-        td
-          div(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
-        td
-          .popover.static-popover.fade.right.in
-            .arrow
+  .stable.row: .col-xs-12
+    .pull-left-sm.col-centered(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
+      .arrow.hidden-xs
       h3.popover-title
         a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
       .popover-content
         p=env.t('mattBochText1')
         h4=env.t('beastMasterProgress') + ': {{petCount}} / {{totalPets}} ' + env.t('petsFound')
 
-    .col-md-12
+  .row.col-md-12
     +petList(env.Content.dropEggs)
-    .col-md-12
+  .row.col-md-12
     h4=env.t('questPets')
     +petList(env.Content.questEggs)
 
-    .col-md-12
+  .row.col-md-12
     h4=env.t('rarePets')
     menu
       div

website/views/options/inventory/seasonal-shop.jade

@@ -1,12 +1,8 @@
 .container-fluid
-  .stable.row-fluid
-    table
-      tr
-        td
-          .seasonalshop_summer2015
-        td
-          .popover.static-popover.fade.right.in
-            .arrow
+  .stable.row: .col-xs-12
+    .seasonalshop_summer2015.pull-left-sm.col-centered
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
+      .arrow.hidden-xs
       h3.popover-title!=env.t('seasonalShopTitle', {linkStart:"<a href='http://blog.habitrpg.com/who' target='_blank'>", linkEnd: "</a>"})
       .popover-content
         p!=env.t('seasonalShopSummerText')

website/views/options/inventory/time-travelers.jade

@@ -1,24 +1,16 @@
 .container-fluid
-  .stable.row-fluid(ng-if='user.purchased.plan.consecutive.trinkets <= 0')
-    table
-      tr
-        td
-          .npc_timetravelers
-        td
-          .popover.static-popover.fade.right.in
-            .arrow
+  .stable.row(ng-if='user.purchased.plan.consecutive.trinkets <= 0'): .col-xs-12
+    .npc_timetravelers.pull-left-sm.col-centered
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
+      .arrow.hidden-xs
       h3.popover-title!=env.t('timeTravelersTitleNoSub', {linkStartTyler: "<a href='https://github.com/lefnire' target='_blank'>", linkStartVicky: "<a href='http://blog.habitrpg.com/who' target='_blank'>", linkEnd: "</a>"})
       .popover-content
         p!=env.t('timeTravelersPopoverNoSub', {linkStart: "<a href='https://habitrpg.com/#/options/settings/subscription' target='_blank'>", linkEnd: "</a>"})
 
-  .stable.row-fluid(ng-if='user.purchased.plan.consecutive.trinkets > 0')
-    table
-      tr
-        td
-          .npc_timetravelers_active
-        td
-          .popover.static-popover.fade.right.in
-            .arrow
+  .stable.row(ng-if='user.purchased.plan.consecutive.trinkets > 0'): .col-xs-12
+    .npc_timetravelers_active.pull-left-sm.col-centered
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
+      .arrow.hidden-xs
       h3.popover-title=env.t('timeTravelersTitle')
       .popover-content
         .pull-right