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

website/views/options/inventory/drops.jade

@@ -94,132 +94,128 @@
 
     .col-md-6.border-left
       h2=env.t('market')
-      .row-fluid
+      .npc_alex_container
-        table.npc_alex_container
+        .pull-left(class="#{env.worldDmg.market ? 'npc_alex_broken' : 'npc_alex'}")
-          tr
+        .popover.static-popover.fade.right.in.pull-left
-            td
+          .arrow
-              .pull-left(class="#{env.worldDmg.market ? 'npc_alex_broken' : 'npc_alex'}")
+          h3.popover-title
-            td
+            a(target='_blank', href='http://www.kickstarter.com/profile/523661924')=env.t('alexander')
-              .popover.static-popover.fade.right.in
+          .popover-content
-                .arrow
+            p=env.t('welcomeMarket')
-                h3.popover-title
+            p
-                  a(target='_blank', href='http://www.kickstarter.com/profile/523661924')=env.t('alexander')
+              button.btn.btn-primary(ng-show='selectedEgg', ng-click='sellInventory()')=env.t('sellEggForGold', {itemType: "{{selectedEgg.text()}}", gold: "{{selectedEgg.value}}"})
-                .popover-content
+              button.btn.btn-primary(ng-show='selectedPotion', ng-click='sellInventory()')=env.t('sellPotionForGold', {itemType: "{{selectedPotion.text()}}", gold: "{{selectedPotion.value}}"})
-                  p=env.t('welcomeMarket')
+              button.btn.btn-primary(ng-show='selectedFood', ng-click='sellInventory()')=env.t('sellForGold', {item: "{{selectedFood.text()}}", gold: "{{selectedFood.value}}"})
-                  p
+      menu.inventory-list(type='list')
-                    button.btn.btn-primary(ng-show='selectedEgg', ng-click='sellInventory()')=env.t('sellEggForGold', {itemType: "{{selectedEgg.text()}}", gold: "{{selectedEgg.value}}"})
+        li.customize-menu
-                    button.btn.btn-primary(ng-show='selectedPotion', ng-click='sellInventory()')=env.t('sellPotionForGold', {itemType: "{{selectedPotion.text()}}", gold: "{{selectedPotion.value}}"})
+          menu.pets-menu(label=env.t('eggs'))
-                    button.btn.btn-primary(ng-show='selectedFood', ng-click='sellInventory()')=env.t('sellForGold', {item: "{{selectedFood.text()}}", gold: "{{selectedFood.value}}"})
+            p.muted!=env.t('dropsExplanation')
-        menu.inventory-list(type='list')
-          li.customize-menu
-            menu.pets-menu(label=env.t('eggs'))
-              p.muted!=env.t('dropsExplanation')
 
-              div(ng-repeat='egg in Content.eggs', ng-if='egg.canBuy')
+            div(ng-repeat='egg in Content.eggs', ng-if='egg.canBuy')
-                button.customize-option(class='Pet_Egg_{{::egg.key}}',
+              button.customize-option(class='Pet_Egg_{{::egg.key}}',
-                  popover='{{::egg.notes()}}', popover-append-to-body='true',
+                popover='{{::egg.notes()}}', popover-append-to-body='true',
-                  popover-title!=env.t("egg", {eggType: "{{::egg.text()}}"}),
+                popover-title!=env.t("egg", {eggType: "{{::egg.text()}}"}),
+                popover-trigger='mouseenter', popover-placement='top',
+                ng-click='purchase("eggs", egg)')
+              p {{::egg.value}} 
+                span.Pet_Currency_Gem1x.inline-gems
+            //- buyable quest eggs. TODO: Get this from a collection so we don't have to maintain this ridiculous comma-delimited list
+            //- The hard part will be the trex stuff, since it is allowed to exist with two quests
+            each egg,quest in {gryphon:'Gryphon',hedgehog:'Hedgehog',ghost_stag:'Deer',rat:'Rat',octopus:'Octopus',dilatory_derby:'Seahorse',harpy:'Parrot',rooster:'Rooster',spider:'Spider',owl:'Owl',penguin:'Penguin',rock:'Rock',bunny:'Bunny',slime:'Slime',sheep:'Sheep',kraken:'Cuttlefish',whale:'Whale'}
+              div(ng-show='user.achievements.quests.#{quest} > 0')
+                button.customize-option(class='Pet_Egg_#{egg}',
+                  popover='{{::Content.eggs.#{egg}.notes()}}', popover-append-to-body='true',
+                  popover-title!=env.t("egg", {eggType: "{{::Content.eggs.#{egg}.text()}}"}),
                   popover-trigger='mouseenter', popover-placement='top',
-                  ng-click='purchase("eggs", egg)')
+                  ng-click='purchase("eggs", Content.eggs.#{egg})')
-                p {{::egg.value}} 
+                p {{::Content.eggs.#{egg}.value}} 
-                  span.Pet_Currency_Gem1x.inline-gems
-              //- buyable quest eggs. TODO: Get this from a collection so we don't have to maintain this ridiculous comma-delimited list
-              //- The hard part will be the trex stuff, since it is allowed to exist with two quests
-              each egg,quest in {gryphon:'Gryphon',hedgehog:'Hedgehog',ghost_stag:'Deer',rat:'Rat',octopus:'Octopus',dilatory_derby:'Seahorse',harpy:'Parrot',rooster:'Rooster',spider:'Spider',owl:'Owl',penguin:'Penguin',rock:'Rock',bunny:'Bunny',slime:'Slime',sheep:'Sheep',kraken:'Cuttlefish',whale:'Whale'}
-                div(ng-show='user.achievements.quests.#{quest} > 0')
-                  button.customize-option(class='Pet_Egg_#{egg}',
-                    popover='{{::Content.eggs.#{egg}.notes()}}', popover-append-to-body='true',
-                    popover-title!=env.t("egg", {eggType: "{{::Content.eggs.#{egg}.text()}}"}),
-                    popover-trigger='mouseenter', popover-placement='top',
-                    ng-click='purchase("eggs", Content.eggs.#{egg})')
-                  p {{::Content.eggs.#{egg}.value}} 
-                    span.Pet_Currency_Gem1x.inline-gems
-
-              div(ng-show='(user.achievements.quests.trex + user.achievements.quests.trex_undead) > 0')
-                button.customize-option(class='Pet_Egg_TRex',
-                  popover='{{::Content.eggs.TRex.notes()}}', popover-append-to-body='true',
-                  popover-title!=env.t("egg", {eggType: "{{Content.eggs.TRex.text()}}"}),
-                  popover-trigger='mouseenter', popover-placement='top',
-                  ng-click='purchase("eggs", Content.eggs.TRex)')
-                p {{::Content.eggs.TRex.value}} 
                   span.Pet_Currency_Gem1x.inline-gems
 
-          li.customize-menu
+            div(ng-show='(user.achievements.quests.trex + user.achievements.quests.trex_undead) > 0')
-            menu.pets-menu(label=env.t('hatchingPotions'))
+              button.customize-option(class='Pet_Egg_TRex',
-              p.muted!=env.t('dropsExplanation')
+                popover='{{::Content.eggs.TRex.notes()}}', popover-append-to-body='true',
-              div(ng-repeat='pot in Content.hatchingPotions')
+                popover-title!=env.t("egg", {eggType: "{{Content.eggs.TRex.text()}}"}),
-                button.customize-option(class='Pet_HatchingPotion_{{::pot.key}}',
+                popover-trigger='mouseenter', popover-placement='top',
-                  popover='{{::pot.notes()}}', popover-append-to-body='true',
+                ng-click='purchase("eggs", Content.eggs.TRex)')
-                  popover-title!=env.t("potion", {potionType: "{{::pot.text()}}"}),
+              p {{::Content.eggs.TRex.value}} 
-                  popover-trigger='mouseenter', popover-placement='top',
+                span.Pet_Currency_Gem1x.inline-gems
-                  ng-click='purchase("hatchingPotions", pot)')
-                p
-                  |  {{::pot.value}} 
-                  span.Pet_Currency_Gem1x.inline-gems
 
-          li.customize-menu
+        li.customize-menu
-            menu.pets-menu(label=env.t('food'))
+          menu.pets-menu(label=env.t('hatchingPotions'))
-              p.muted!=env.t('dropsExplanation')
+            p.muted!=env.t('dropsExplanation')
-              div(ng-repeat='food in Content.food', ng-if='food.canBuy')
+            div(ng-repeat='pot in Content.hatchingPotions')
-                button.customize-option(class='Pet_Food_{{::food.key}}',
+              button.customize-option(class='Pet_HatchingPotion_{{::pot.key}}',
-                  popover='{{::food.notes()}}', popover-title='{{::food.text()}}',
+                popover='{{::pot.notes()}}', popover-append-to-body='true',
-                  popover-trigger='mouseenter', popover-placement='top',
+                popover-title!=env.t("potion", {potionType: "{{::pot.text()}}"}),
-                  popover-append-to-body='true',
+                popover-trigger='mouseenter', popover-placement='top',
-                  ng-click='purchase("food", food)')
+                ng-click='purchase("hatchingPotions", pot)')
-                p
+              p
-                  |  {{::food.value}} 
+                |  {{::pot.value}} 
-                  span.Pet_Currency_Gem1x.inline-gems
+                span.Pet_Currency_Gem1x.inline-gems
 
-          li.customize-menu
+        li.customize-menu
-            menu.pets-menu(label=env.t('quests'))
+          menu.pets-menu(label=env.t('food'))
-              p=env.t('whereAreMyQuests')
+            p.muted!=env.t('dropsExplanation')
-
+            div(ng-repeat='food in Content.food', ng-if='food.canBuy')
-          li.customize-menu
+              button.customize-option(class='Pet_Food_{{::food.key}}',
-            menu.pets-menu(label=env.t('special'))
+                popover='{{::food.notes()}}', popover-title='{{::food.text()}}',
-              div
+                popover-trigger='mouseenter', popover-placement='top',
-                button.customize-option(class='inventory_special_fortify',
-                  popover=env.t('fortifyPop'),
-                  popover-title=env.t('fortifyName'),
-                  popover-trigger='mouseenter', popover-placement='top',
-                  popover-append-to-body='true',
-                  ng-click='openModal("reroll")')
-                p
-                  | 4 
-                  span.Pet_Currency_Gem1x.inline-gems
-              div(ng-show='user.flags.rebirthEnabled')
-                button.customize-option(class='rebirth_orb',
-                  popover=env.t('rebirthPop'), popover-title=env.t('rebirthName'),
-                  popover-trigger='mouseenter', popover-placement='top',
-                  popover-append-to-body='true',
-                  ng-click='openModal("rebirth")')
-                p(ng-show='user.stats.lvl < 100')
-                  | 8&nbsp;
-                  span.Pet_Currency_Gem1x.inline-gems
-              div(ng-show='petCount >= 90 || mountCount >= 90')
-                button.customize-option(popover=env.t('petKeyPop'), popover-title=env.t('petKeyName'),
-                  popover-trigger='mouseenter', popover-placement='top',
-                  popover-append-to-body='true',
-                  ng-click='openModal("pet-key", {size:"lg"})', class='pet_key')
-                p(ng-show='petCount < 90 || mountCount < 90 || !user.achievements.triadBingo')
-                  | 4&nbsp;
-                  span.Pet_Currency_Gem1x.inline-gems
-              div(ng-if='user.purchased.plan.customerId', ng-class='::{transparent:(Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought) < 1}')
-                button.customize-option(popover=env.t('subGemPop'), popover-title=env.t('subGemName'),
-                  popover-trigger='mouseenter', popover-placement='top',
-                  popover-append-to-body='true',
-                  ng-click='user.ops.purchase({params:{type:"gems",key:"gem"}})')
-                  span.Pet_Currency_Gem.inline-gems
-                  .badge.badge-success.stack-count {{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}
-                p
-                  | 20&nbsp;
-                  span.shop_gold
-              // div
-                button.customize-option(class='inventory_special_valentine',
-                popover='{{::Content.spells.special.valentine.notes()}}',
-                popover-title='{{::Content.spells.special.valentine.text()}}',
-                popover-trigger='mouseenter', popover-placement='right',
                 popover-append-to-body='true',
-                ng-click='castStart(Content.spells.special.valentine)')
+                ng-click='purchase("food", food)')
-                p
+              p
-                  | {{Content.spells.special.valentine.value}}
+                |  {{::food.value}}&nbsp;
-                  span(class='shop_gold')
+                span.Pet_Currency_Gem1x.inline-gems
+
+        li.customize-menu
+          menu.pets-menu(label=env.t('quests'))
+            p=env.t('whereAreMyQuests')
+
+        li.customize-menu
+          menu.pets-menu(label=env.t('special'))
+            div
+              button.customize-option(class='inventory_special_fortify',
+                popover=env.t('fortifyPop'),
+                popover-title=env.t('fortifyName'),
+                popover-trigger='mouseenter', popover-placement='top',
+                popover-append-to-body='true',
+                ng-click='openModal("reroll")')
+              p
+                | 4&nbsp;
+                span.Pet_Currency_Gem1x.inline-gems
+            div(ng-show='user.flags.rebirthEnabled')
+              button.customize-option(class='rebirth_orb',
+                popover=env.t('rebirthPop'), popover-title=env.t('rebirthName'),
+                popover-trigger='mouseenter', popover-placement='top',
+                popover-append-to-body='true',
+                ng-click='openModal("rebirth")')
+              p(ng-show='user.stats.lvl < 100')
+                | 8&nbsp;
+                span.Pet_Currency_Gem1x.inline-gems
+            div(ng-show='petCount >= 90 || mountCount >= 90')
+              button.customize-option(popover=env.t('petKeyPop'), popover-title=env.t('petKeyName'),
+                popover-trigger='mouseenter', popover-placement='top',
+                popover-append-to-body='true',
+                ng-click='openModal("pet-key", {size:"lg"})', class='pet_key')
+              p(ng-show='petCount < 90 || mountCount < 90 || !user.achievements.triadBingo')
+                | 4&nbsp;
+                span.Pet_Currency_Gem1x.inline-gems
+            div(ng-if='user.purchased.plan.customerId', ng-class='::{transparent:(Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought) < 1}')
+              button.customize-option(popover=env.t('subGemPop'), popover-title=env.t('subGemName'),
+                popover-trigger='mouseenter', popover-placement='top',
+                popover-append-to-body='true',
+                ng-click='user.ops.purchase({params:{type:"gems",key:"gem"}})')
+                span.Pet_Currency_Gem.inline-gems
+                .badge.badge-success.stack-count {{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}
+              p
+                | 20&nbsp;
+                span.shop_gold
+            // div
+              button.customize-option(class='inventory_special_valentine',
+              popover='{{::Content.spells.special.valentine.notes()}}',
+              popover-title='{{::Content.spells.special.valentine.text()}}',
+              popover-trigger='mouseenter', popover-placement='right',
+              popover-append-to-body='true',
+              ng-click='castStart(Content.spells.special.valentine)')
+              p
+                | {{Content.spells.special.valentine.value}}
+                span(class='shop_gold')

website/views/options/inventory/mounts.jade

@@ -14,28 +14,24 @@ mixin mountList(source)
       -}
 
 .container-fluid
-  .stable.row-fluid
+  .stable.row: .col-xs-12
-    table
+    .pull-left-sm.col-centered(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
-      tr
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
-        td
+      .arrow.hidden-xs
-          div(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
+      h3.popover-title
-        td
+        a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
-          .popover.static-popover.fade.right.in
+      .popover-content
-            .arrow
+        p=env.t('mattShall', {name: "{{user.profile.name}}"})
-            h3.popover-title
+        h4= env.t('mountMasterProgress') + ': {{mountCount}} / {{totalMounts}} ' + env.t('mountsTamed')
-              a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
+  .row.col-md-12
-            .popover-content
+    +mountList(env.Content.dropEggs)
-              p=env.t('mattShall', {name: "{{user.profile.name}}"})
+  .row.col-md-12
-              h4= env.t('mountMasterProgress') + ': {{mountCount}} / {{totalMounts}} ' + env.t('mountsTamed')
+    h4=env.t('questMounts')
-    .col-md-12
+    +mountList(env.Content.questEggs)
-      +mountList(env.Content.dropEggs)
+  .row.col-md-12
-    .col-md-12
+    h4=env.t('rareMounts')
-      h4=env.t('questMounts')
+    menu
-      +mountList(env.Content.questEggs)
+      div
-    .col-md-12
+        each t,k in env.Content.specialMounts
-      h4=env.t('rareMounts')
+          - var animal = k.split('-')[0], color = k.split('-')[1]
-      menu
+          button(ng-if='user.items.mounts["#{animal}-#{color}"]', class="pet-button Mount_Head_#{animal}-#{color}", ng-class='{active: user.items.currentMount == "#{animal}-#{color}"}', ng-click='chooseMount("#{animal}", "#{color}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')
-        div
-          each t,k in env.Content.specialMounts
-            - var animal = k.split('-')[0], color = k.split('-')[1]
-            button(ng-if='user.items.mounts["#{animal}-#{color}"]', class="pet-button Mount_Head_#{animal}-#{color}", ng-class='{active: user.items.currentMount == "#{animal}-#{color}"}', ng-click='chooseMount("#{animal}", "#{color}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')

website/views/options/inventory/pets.jade

@@ -14,36 +14,32 @@ mixin petList(source)
               button(class="pet-evolved pet-button Pet-#{pet}", ng-if='user.items.pets["#{pet}"]<0')
 
 .container-fluid
-  .stable.row-fluid
+  .stable.row: .col-xs-12
-    table
+    .pull-left-sm.col-centered(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
-      tr
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
-        td
+      .arrow.hidden-xs
-          div(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
+      h3.popover-title
-        td
+        a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
-          .popover.static-popover.fade.right.in
+      .popover-content
-            .arrow
+        p=env.t('mattBochText1')
-            h3.popover-title
+        h4=env.t('beastMasterProgress') + ': {{petCount}} / {{totalPets}} ' + env.t('petsFound')
-              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)
+    +petList(env.Content.dropEggs)
-    .col-md-12
+  .row.col-md-12
-      h4=env.t('questPets')
+    h4=env.t('questPets')
-      +petList(env.Content.questEggs)
+    +petList(env.Content.questEggs)
 
-    .col-md-12
+  .row.col-md-12
-      h4=env.t('rarePets')
+    h4=env.t('rarePets')
-      menu
+    menu
-        div
+      div
-          each t,k in env.Content.specialPets
+        each t,k in env.Content.specialPets
-            - var egg = k.split('-')[0], pot = k.split('-')[1]
+          - var egg = k.split('-')[0], pot = k.split('-')[1]
-            button(ng-if='user.items.pets["#{egg}-#{pot}"]', class="pet-button Pet-#{egg}-#{pot}", ng-class='{active: user.items.currentPet == "#{egg}-#{pot}"}', ng-click='choosePet("#{egg}", "#{pot}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')
+          button(ng-if='user.items.pets["#{egg}-#{pot}"]', class="pet-button Pet-#{egg}-#{pot}", ng-class='{active: user.items.currentPet == "#{egg}-#{pot}"}', ng-click='choosePet("#{egg}", "#{pot}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')
-          a(target='_blank', href='http://habitrpg.wikia.com/wiki/Contributing_to_HabitRPG')
+        a(target='_blank', href='http://habitrpg.wikia.com/wiki/Contributing_to_HabitRPG')
-            button(ng-if='!user.items.pets["Dragon-Hydra"]', class="pet-button pet-not-owned", popover-trigger='mouseenter', popover-placement='right', popover=env.t('rarePetPop1'), popover-title=env.t('rarePetPop2'))
+          button(ng-if='!user.items.pets["Dragon-Hydra"]', class="pet-button pet-not-owned", popover-trigger='mouseenter', popover-placement='right', popover=env.t('rarePetPop1'), popover-title=env.t('rarePetPop2'))
-              .PixelPaw-Gold
+            .PixelPaw-Gold
 
   .well.food-tray
     p(ng-show='foodCount < 1')=env.t('noFood')

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

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

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

@@ -1,30 +1,22 @@
 .container-fluid
-  .stable.row-fluid(ng-if='user.purchased.plan.consecutive.trinkets <= 0')
+  .stable.row(ng-if='user.purchased.plan.consecutive.trinkets <= 0'): .col-xs-12
-    table
+    .npc_timetravelers.pull-left-sm.col-centered
-      tr
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
-        td
+      .arrow.hidden-xs
-          .npc_timetravelers
+      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>"})
-        td
+      .popover-content
-          .popover.static-popover.fade.right.in
+        p!=env.t('timeTravelersPopoverNoSub', {linkStart: "<a href='https://habitrpg.com/#/options/settings/subscription' target='_blank'>", linkEnd: "</a>"})
-            .arrow
-            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')
+  .stable.row(ng-if='user.purchased.plan.consecutive.trinkets > 0'): .col-xs-12
-    table
+    .npc_timetravelers_active.pull-left-sm.col-centered
-      tr
+    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
-        td
+      .arrow.hidden-xs
-          .npc_timetravelers_active
+      h3.popover-title=env.t('timeTravelersTitle')
-        td
+      .popover-content
-          .popover.static-popover.fade.right.in
+        .pull-right
-            .arrow
+          span.inventory_special_trinket.inline-gems
-            h3.popover-title=env.t('timeTravelersTitle')
+          b x{{user.purchased.plan.consecutive.trinkets}}
-            .popover-content
+        p!=env.t('timeTravelersPopover', {linkStart: "<a href='http://habitrpg.wikia.com/wiki/Mystery_Item' target='_blank'>", linkEnd: "</a>"})
-              .pull-right
-                span.inventory_special_trinket.inline-gems
-                b x{{user.purchased.plan.consecutive.trinkets}}
-              p!=env.t('timeTravelersPopover', {linkStart: "<a href='http://habitrpg.wikia.com/wiki/Mystery_Item' target='_blank'>", linkEnd: "</a>"})
 
     .col-md-12
       li.customize-menu.inventory-gear