From e2073f75b8bba7bd447408052468e5927aad38f7 Mon Sep 17 00:00:00 2001 From: hairlessbear Date: Thu, 16 Jul 2015 20:19:32 -0400 Subject: [PATCH] Refactored inventory file NPCs to use Bootstrap v3 grid and CSS instead of tables --- website/views/options/inventory/drops.jade | 240 +++++++++--------- website/views/options/inventory/mounts.jade | 46 ++-- website/views/options/inventory/pets.jade | 52 ++-- .../options/inventory/seasonal-shop.jade | 18 +- .../options/inventory/time-travelers.jade | 42 ++- 5 files changed, 187 insertions(+), 211 deletions(-) diff --git a/website/views/options/inventory/drops.jade b/website/views/options/inventory/drops.jade index 278174e339..bf58e5e8b0 100644 --- a/website/views/options/inventory/drops.jade +++ b/website/views/options/inventory/drops.jade @@ -94,132 +94,128 @@ .col-md-6.border-left h2=env.t('market') - .row-fluid - table.npc_alex_container - tr - td - .pull-left(class="#{env.worldDmg.market ? 'npc_alex_broken' : 'npc_alex'}") - td - .popover.static-popover.fade.right.in - .arrow - h3.popover-title - a(target='_blank', href='http://www.kickstarter.com/profile/523661924')=env.t('alexander') - .popover-content - p=env.t('welcomeMarket') - p - button.btn.btn-primary(ng-show='selectedEgg', ng-click='sellInventory()')=env.t('sellEggForGold', {itemType: "{{selectedEgg.text()}}", gold: "{{selectedEgg.value}}"}) - button.btn.btn-primary(ng-show='selectedPotion', ng-click='sellInventory()')=env.t('sellPotionForGold', {itemType: "{{selectedPotion.text()}}", gold: "{{selectedPotion.value}}"}) - button.btn.btn-primary(ng-show='selectedFood', ng-click='sellInventory()')=env.t('sellForGold', {item: "{{selectedFood.text()}}", gold: "{{selectedFood.value}}"}) - menu.inventory-list(type='list') - li.customize-menu - menu.pets-menu(label=env.t('eggs')) - p.muted!=env.t('dropsExplanation') + .npc_alex_container + .pull-left(class="#{env.worldDmg.market ? 'npc_alex_broken' : 'npc_alex'}") + .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') + .popover-content + p=env.t('welcomeMarket') + p + button.btn.btn-primary(ng-show='selectedEgg', ng-click='sellInventory()')=env.t('sellEggForGold', {itemType: "{{selectedEgg.text()}}", gold: "{{selectedEgg.value}}"}) + button.btn.btn-primary(ng-show='selectedPotion', ng-click='sellInventory()')=env.t('sellPotionForGold', {itemType: "{{selectedPotion.text()}}", gold: "{{selectedPotion.value}}"}) + button.btn.btn-primary(ng-show='selectedFood', ng-click='sellInventory()')=env.t('sellForGold', {item: "{{selectedFood.text()}}", gold: "{{selectedFood.value}}"}) + 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') - button.customize-option(class='Pet_Egg_{{::egg.key}}', - popover='{{::egg.notes()}}', popover-append-to-body='true', - popover-title!=env.t("egg", {eggType: "{{::egg.text()}}"}), + div(ng-repeat='egg in Content.eggs', ng-if='egg.canBuy') + button.customize-option(class='Pet_Egg_{{::egg.key}}', + popover='{{::egg.notes()}}', popover-append-to-body='true', + 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)') - 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", 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}}  + ng-click='purchase("eggs", Content.eggs.#{egg})') + p {{::Content.eggs.#{egg}.value}}  span.Pet_Currency_Gem1x.inline-gems - li.customize-menu - menu.pets-menu(label=env.t('hatchingPotions')) - p.muted!=env.t('dropsExplanation') - div(ng-repeat='pot in Content.hatchingPotions') - button.customize-option(class='Pet_HatchingPotion_{{::pot.key}}', - popover='{{::pot.notes()}}', popover-append-to-body='true', - popover-title!=env.t("potion", {potionType: "{{::pot.text()}}"}), - popover-trigger='mouseenter', popover-placement='top', - ng-click='purchase("hatchingPotions", pot)') - p - | {{::pot.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 - menu.pets-menu(label=env.t('food')) - p.muted!=env.t('dropsExplanation') - div(ng-repeat='food in Content.food', ng-if='food.canBuy') - button.customize-option(class='Pet_Food_{{::food.key}}', - popover='{{::food.notes()}}', popover-title='{{::food.text()}}', - popover-trigger='mouseenter', popover-placement='top', - popover-append-to-body='true', - ng-click='purchase("food", food)') - p - | {{::food.value}}  - span.Pet_Currency_Gem1x.inline-gems + li.customize-menu + menu.pets-menu(label=env.t('hatchingPotions')) + p.muted!=env.t('dropsExplanation') + div(ng-repeat='pot in Content.hatchingPotions') + button.customize-option(class='Pet_HatchingPotion_{{::pot.key}}', + popover='{{::pot.notes()}}', popover-append-to-body='true', + popover-title!=env.t("potion", {potionType: "{{::pot.text()}}"}), + popover-trigger='mouseenter', popover-placement='top', + ng-click='purchase("hatchingPotions", pot)') + p + | {{::pot.value}}  + 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  - 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  - 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  - 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  - 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', + li.customize-menu + menu.pets-menu(label=env.t('food')) + p.muted!=env.t('dropsExplanation') + div(ng-repeat='food in Content.food', ng-if='food.canBuy') + button.customize-option(class='Pet_Food_{{::food.key}}', + popover='{{::food.notes()}}', popover-title='{{::food.text()}}', + popover-trigger='mouseenter', popover-placement='top', popover-append-to-body='true', - ng-click='castStart(Content.spells.special.valentine)') - p - | {{Content.spells.special.valentine.value}} - span(class='shop_gold') + ng-click='purchase("food", food)') + p + | {{::food.value}}  + 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  + 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  + 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  + 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  + 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') diff --git a/website/views/options/inventory/mounts.jade b/website/views/options/inventory/mounts.jade index 08aea109dd..91499f49dd 100644 --- a/website/views/options/inventory/mounts.jade +++ b/website/views/options/inventory/mounts.jade @@ -14,28 +14,24 @@ 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 - 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 - +mountList(env.Content.dropEggs) - .col-md-12 - h4=env.t('questMounts') - +mountList(env.Content.questEggs) - .col-md-12 - h4=env.t('rareMounts') - menu - 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') + .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') + .row.col-md-12 + +mountList(env.Content.dropEggs) + .row.col-md-12 + h4=env.t('questMounts') + +mountList(env.Content.questEggs) + .row.col-md-12 + h4=env.t('rareMounts') + menu + 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') diff --git a/website/views/options/inventory/pets.jade b/website/views/options/inventory/pets.jade index 2d1a4e2b8e..f1dd1d0456 100644 --- a/website/views/options/inventory/pets.jade +++ b/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 - table - tr - td - div(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}") - td - .popover.static-popover.fade.right.in - .arrow - 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') + .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 - +petList(env.Content.dropEggs) - .col-md-12 - h4=env.t('questPets') - +petList(env.Content.questEggs) + .row.col-md-12 + +petList(env.Content.dropEggs) + .row.col-md-12 + h4=env.t('questPets') + +petList(env.Content.questEggs) - .col-md-12 - h4=env.t('rarePets') - menu - div - each t,k in env.Content.specialPets - - 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') - 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')) - .PixelPaw-Gold + .row.col-md-12 + h4=env.t('rarePets') + menu + div + each t,k in env.Content.specialPets + - 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') + 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')) + .PixelPaw-Gold .well.food-tray p(ng-show='foodCount < 1')=env.t('noFood') diff --git a/website/views/options/inventory/seasonal-shop.jade b/website/views/options/inventory/seasonal-shop.jade index f8d2f9c497..de971b3f89 100644 --- a/website/views/options/inventory/seasonal-shop.jade +++ b/website/views/options/inventory/seasonal-shop.jade @@ -1,15 +1,11 @@ .container-fluid - .stable.row-fluid - table - tr - td - .seasonalshop_summer2015 - td - .popover.static-popover.fade.right.in - .arrow - h3.popover-title!=env.t('seasonalShopTitle', {linkStart:"", linkEnd: ""}) - .popover-content - p!=env.t('seasonalShopSummerText') + .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:"", linkEnd: ""}) + .popover-content + p!=env.t('seasonalShopSummerText') .well(ng-if='User.user.achievements.rebirths > 0')=env.t('seasonalShopRebirth') diff --git a/website/views/options/inventory/time-travelers.jade b/website/views/options/inventory/time-travelers.jade index d373c966a3..3a8748751a 100644 --- a/website/views/options/inventory/time-travelers.jade +++ b/website/views/options/inventory/time-travelers.jade @@ -1,30 +1,22 @@ .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 - h3.popover-title!=env.t('timeTravelersTitleNoSub', {linkStartTyler: "", linkStartVicky: "", linkEnd: ""}) - .popover-content - p!=env.t('timeTravelersPopoverNoSub', {linkStart: "", linkEnd: ""}) + .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: "", linkStartVicky: "", linkEnd: ""}) + .popover-content + p!=env.t('timeTravelersPopoverNoSub', {linkStart: "", linkEnd: ""}) - .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 - h3.popover-title=env.t('timeTravelersTitle') - .popover-content - .pull-right - span.inventory_special_trinket.inline-gems - b x{{user.purchased.plan.consecutive.trinkets}} - p!=env.t('timeTravelersPopover', {linkStart: "", linkEnd: ""}) + .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 + span.inventory_special_trinket.inline-gems + b x{{user.purchased.plan.consecutive.trinkets}} + p!=env.t('timeTravelersPopover', {linkStart: "", linkEnd: ""}) .col-md-12 li.customize-menu.inventory-gear