Restored item comparison in InventoryView, now o'ertop the hero.

app/styles/game-menu/inventory-view.sass

@@ -109,6 +109,7 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
     .hero-container
       //background-color: rgba(31, 0, 200, 0.25)
       float: left
+      position: relative
 
       .equipped-hero-canvas
         width: $heroContainerWidth
@@ -165,44 +166,48 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
     cursor: pointer
     
   #selected-items
+    $selectedItemsContainerMargin: 20px
+    $selectedItemMargin: 10px
+    $selectedItemImageSize: 75px
+    $swapItemHeight: 40px
+    $swapItemWidth: 60px
+
     position: absolute
-    height: $selectedAreaHeight
-    left: 0
-    right: 0
-    bottom: 0
+    top: $selectedItemsContainerMargin
+    right: $selectedItemsContainerMargin
+    bottom: $selectedItemsContainerMargin + $heroContainerBottomMargin
+    left: $selectedItemsContainerMargin
     text-align: center
 
     #selected-equipped-item, #selected-available-item
       text-align: left
-      position: absolute
-      bottom: 0
-      top: 0
       overflow: scroll
-      padding: 10px
-      height: 100%
-      width: 49%
-      display: flex
-      align-items: center
+      margin: 0
+      height: 48.4%
+      height: -webkit-calc(50% - $selectedItemMargin / 2)
+      height: calc(50% - $selectedItemMargin / 2)
+      width: 100%
+      padding: 20px 10px 10px 10px
       
       img
-        width: 100px
-        height: 100px
+        margin-top: 21px
+        width: $selectedItemImageSize
+        height: $selectedItemImageSize
         
       .item-info
-        margin-left: 110px
-      
-    #selected-equipped-item
-      left: 0
-    
-    #selected-available-item
-      right: 0
+        margin-left: $selectedItemImageSize + 10px
 
-  $swapItemHeight: 40px
-    
-  #swap-button
-    position: relative
-    top: ($selectedAreaHeight / 2) - ($swapItemHeight / 2)
-    height: $swapItemHeight
-    font-size: 24px
-    line-height: 24px
-    display: inline-block
+    #selected-equipped-item
+      margin-bottom: $selectedItemMargin
+      
+    #swap-button
+      position: absolute
+      top: 50%
+      left: 50%
+      margin-top: -($swapItemHeight / 2)
+      margin-left: -($swapItemWidth / 2)
+      width: $swapItemWidth
+      height: $swapItemHeight
+      font-size: 24px
+      line-height: 24px
+      display: inline-block

app/templates/game-menu/inventory-view.jade

@@ -1,4 +1,4 @@
-div#equipped
+#equipped
   .item-slot-row
     for slot in ['left-ring', 'neck', 'eyes', 'head', 'wrists', 'right-ring']
       .item-slot(data-slot=slot)
@@ -18,6 +18,13 @@ div#equipped
   .hero-container
     //(data-hero-id=hero.get('original'))
     canvas.equipped-hero-canvas
+    #selected-items
+      #selected-equipped-item.well
+        .item-view-stub
+      #selected-available-item.well
+        .item-view-stub
+      button#swap-button.btn.btn-danger
+        span.glyphicon.glyphicon-transfer
 
   .item-slot-column.pull-right
     for slot in ['waist', 'feet', 'right-hand', 'pet']
@@ -52,16 +59,9 @@ div#equipped
   //    - }
   //    .clearfix
   //- }
-    
-div#available-equipment
+
+#available-equipment
   h4#stash-description
   for item in items
     .list-group-item(class=item.classes, data-item-id=item.id)
       
-div#selected-items.secret
-  #selected-equipped-item.well
-    .item-view-stub
-  #selected-available-item.well
-    .item-view-stub
-  button#swap-button.btn.btn-danger
-    span.glyphicon.glyphicon-transfer

app/views/game-menu/InventoryView.coffee

@@ -103,6 +103,7 @@ module.exports = class InventoryView extends CocoView
           hoverClass: 'droppable-hover'
           tolerance: 'pointer'
 
+    @$el.find('#selected-items').hide()  # Hide until one is selected
     @delegateEvents()
 
   afterInsert: ->
@@ -120,13 +121,17 @@ module.exports = class InventoryView extends CocoView
     wasActive = slot.hasClass('selected')
     @unselectAllSlots()
     @unselectAllAvailableEquipment() if slot.hasClass('disabled')
-    @selectSlot(slot) unless wasActive  # and not $(e.target).closest('.item-view')[0]
+    if wasActive
+      @hideSelectedSlotItem()
+    else
+      @selectSlot(slot)
     @onSelectionChanged()
 
   onAvailableItemClick: (e) ->
     itemContainer = $(e.target).closest('.list-group-item')
+    wasActive = itemContainer.hasClass 'active'
     @unselectAllAvailableEquipment()
-    @selectAvailableItem(itemContainer)
+    @selectAvailableItem(itemContainer) unless wasActive
     @onSelectionChanged()
 
   onAvailableItemDoubleClick: (e) ->
@@ -242,28 +247,30 @@ module.exports = class InventoryView extends CocoView
       @selectedEquippedItemView = new ItemView({
         item: item, includes: {name: true, stats: true, props: true}})
       @insertSubView(@selectedEquippedItemView, @$el.find('#selected-equipped-item .item-view-stub'))
-
     else
       @selectedEquippedItemView.$el.show()
       @selectedEquippedItemView.item = item
       @selectedEquippedItemView.render()
+    @$el.find('#selected-items').show()
 
   hideSelectedSlotItem: ->
     @selectedEquippedItemView?.$el.hide()
+    @$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible')
 
   showSelectedAvailableItem: (item) ->
     if not @selectedAvailableItemView
       @selectedAvailableItemView = new ItemView({
         item: item, includes: {name: true, stats: true, props: true}})
       @insertSubView(@selectedAvailableItemView, @$el.find('#selected-available-item .item-view-stub'))
-
     else
       @selectedAvailableItemView.$el.show()
       @selectedAvailableItemView.item = item
       @selectedAvailableItemView.render()
+    @$el.find('#selected-items').show()
 
   hideSelectedAvailableItem: ->
     @selectedAvailableItemView?.$el.hide()
+    @$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible')
 
   getCurrentEquipmentConfig: ->
     config = {}