Merge pull request #1150 from onduhray/develop

Fixes #1028: weird inventory item spacing for eggs and potions.

styles/app/inventory.styl

@@ -20,13 +20,20 @@
     width: 100%
   td
     padding: 0.5em
-    width: 25%
+    //width: 25%
     &.active-pet
       background-color: $bad
       outline: 1px solid rgba(0,0,0,0.1)
       outline-offset: -1px
     &:hover, &:focus
       background-color: darken($better, 10%)
+    > div
+      margin:auto
+      margin-bottom:.5em
+  p
+    text-align:center
+    width:6.5em
+    height:2.5em
 
 .current-pet
     left: 0px
@@ -54,8 +61,14 @@
     clear:both
 .pets-menu > div
     float:left
-.hatchingPotions-menu > div
+    padding:.3em
+    p
+      text-align:center
+.hatchingPotion-menu > div
     float:left
+    padding:.3em
+    p
+      text-align:center
 
 .pet-button
     border: none

views/app/game-pane.html

@@ -111,7 +111,7 @@
         {/}
         <h4>Hatching Potions</h4>
         {#with _items.hatchingPotions as :hatchingPotion}
-        <table>
+        <table class="tab-pane pet-grid">
             <tr>
                 {#with :hatchingPotion[0]}<app:pets:hatchingPotion />{/}
                 {#with :hatchingPotion[1]}<app:pets:hatchingPotion />{/}

views/app/pets.html

@@ -33,13 +33,13 @@
 <hatchingPotion:>
     <td class="active-hatchingPotion" x-bind="click:buyHatchingPotion" data-hatchingPotion='{.name}'>
         <div class="Pet_HatchingPotion_{.name}"></div>
-        {.text}<br/><small>{.value} Gems<small>
+        <p>{.text}<br/><small>{.value} Gems<small></p>
     </td>
 
 <egg:>
     <td class="active-egg" x-bind="click:buyEgg" data-egg='{.name}'>
         <div rel=tooltip class="Pet_Egg_{.name}"></div>
-        {.text}<br/><small>{.value} Gems<small>
+        <p>{.text}<br/><small>{.value} Gems<small></p>
     </td>
 
 <inventory:>