diff --git a/app/styles/game-menu/inventory-modal.sass b/app/styles/game-menu/inventory-modal.sass
index cebd3e09e..be8bd00cd 100644
--- a/app/styles/game-menu/inventory-modal.sass
+++ b/app/styles/game-menu/inventory-modal.sass
@@ -301,15 +301,19 @@ $itemSlotGridHeight: 70px
//- Available equipment
+ &.Warrior #unequipped img.item:not(.Warrior), &.Ranger #unequipped img.item:not(.Ranger), &.Wizard #unequipped img.item:not(.Wizard)
+ // Our code hides and shows (modifies display), but we can be invisible this other way.
+ visibility: hidden
+ position: absolute
+
#unequipped
width: 222px
position: absolute
left: 370px
top: 112px
height: 450px
- overflow-y: scroll
border: 3px solid black
- padding: 9px
+ padding: 9px 0 9px 9px
background-color: white
#double-click-hint
@@ -330,6 +334,7 @@ $itemSlotGridHeight: 70px
padding: 1px
width: 60px
height: 60px
+ cursor: pointer
&.active
background-color: rgb(81,153,236)
@@ -350,6 +355,7 @@ $itemSlotGridHeight: 70px
&.equipped
background-color: #ff5
display: none
+ cursor: default
//.item-view
// cursor: default
@@ -359,6 +365,7 @@ $itemSlotGridHeight: 70px
&.restricted
background-color: rgba(255, 80, 67, 0.25)
+ cursor: default
//.item-view
// cursor: default
@@ -366,10 +373,13 @@ $itemSlotGridHeight: 70px
//.status-message .restricted-message
// display: inline
- //&.locked
+ &.locked
+ cursor: default
//background-color: gray
&.silhouette
+ cursor: default
+ pointer-events: none
@include filter(contrast(25%) brightness(25%))
opacity: 0.5
@@ -397,122 +407,22 @@ $itemSlotGridHeight: 70px
right: 414px
- //- Item details. Mostly the same as the item store view, but figured we'd probably
- // be futzing with details so just copied it. TODO: refactor?
+ //- Item details. Non-specific item-details-view styling is in item-details-view.sass.
- #item-title
- position: absolute
- width: 228px
- height: 50px
- left: 698px
- top: 56px
- z-index: 2
+ #item-details-view
- h2
- font-size: 20px
- margin: 12px 20px
- text-align: center
- color: rgb(53,40,25)
-
- #item-details-body
- position: absolute
- left: 650px
- top: 126px
- width: 330px
- height: 453px
- //background: rgba(100,100,100,0.5)
- overflow: scroll
-
- #item-container
- height: 163px
- width: 100%
-
- .item-img, .item-shadow
- width: 130px
- height: 130px
-
- .item-img
- top: 15px
-
- .item-shadow
- top: 25px
-
- img.hr
- width: 80%
- margin: 0 10% -3px
-
- &.faded
- opacity: 0.4
-
- .stat-row
- height: 24px
- position: relative
- font-size: 20px
- font-weight: bold
-
- .stat-label
- position: absolute
- left: 54px
- color: rgb(93,73,52)
-
- .stat
- position: absolute
- left: 150px
- color: rgb(42,38,28)
-
- #skills
- margin: 25px
-
- h3
- color: rgb(41,35,25)
-
- strong
- color: rgb(50,50,30)
-
- #selected-item-unlock-button
- left: 646px
- top: 594px
- width: 337px
- height: 41px
- font-size: 16px
-
- img
- height: 16px
-
- //- Item icons w/shadows (both in list and details areas)
-
- .item-img, .item-shadow, .item-silhouette
- position: absolute
- margin-left: auto
- margin-right: auto
- left: 0
- right: 0
- bottom: 0
-
- .item-img
- z-index: 1
-
- .item-shadow
- left: 5px
- @include filter(contrast(0%) brightness(0%))
- opacity: 0.2
-
- .item-silhouette
- @include filter(contrast(0%) brightness(0%))
- opacity: 0.3
+ #item-title
+ left: 698px
+ top: 56px
- .unlock-button
- position: absolute
- border: 3px solid rgb(7,65,83)
- background: rgb(0,119,168)
- color: white
- font-size: 16px
- border-radius: 0
+ #item-details-body
+ left: 650px
+
+ #selected-item-unlock-button
+ left: 646px
- &:disabled
- background: rgb(72, 106, 113)
- opacity: 1
- color: rgba(255,255,255, 0.4)
+
+ //- Equip/unequip/extra
#item-details-extra
position: absolute
diff --git a/app/styles/play/modal/play-items-modal.sass b/app/styles/play/modal/play-items-modal.sass
index 7692670c3..19e5dd548 100644
--- a/app/styles/play/modal/play-items-modal.sass
+++ b/app/styles/play/modal/play-items-modal.sass
@@ -123,8 +123,8 @@
.tab-pane
height: 100%
- .nano-content
- padding: 26px 51px 26px 26px
+ .nano-content
+ padding: 26px 51px 26px 26px
//- Item box
@@ -222,6 +222,23 @@
background: url(/images/pages/play/modal/item-box-background-selected.png)
+ //- Item details. Non-specific item-details-view styling is in item-details-view.sass.
+
+ #item-details-view
+
+ #item-title
+ left: 910px
+ top: 60px
+
+ #item-details-body
+ left: 860px
+
+ #selected-item-unlock-button
+ left: 856px
+
+
+#play-items-modal, #inventory-modal
+
//- Item list scrollbar
.nano-pane
@@ -236,89 +253,6 @@
margin-left: -3px
margin-right: -3px
- // color: red
-
-
- //- Item details
-
- #item-title
- position: absolute
- width: 228px
- height: 50px
- left: 910px
- top: 60px
- z-index: 2
-
- h2
- font-size: 20px
- margin: 12px 20px
- text-align: center
- color: rgb(53,40,25)
-
- #item-details-body
- position: absolute
- left: 860px
- top: 126px
- width: 330px
- height: 449px
- //background: rgba(100,100,100,0.5)
-
- #item-container
- height: 163px
- width: 100%
-
- .item-img, .item-shadow
- width: 130px
- height: 130px
-
- .item-img
- top: 15px
-
- .item-shadow
- top: 25px
-
- img.hr
- width: 80%
- margin: 0 10% -3px
-
- &.faded
- opacity: 0.4
-
- .stat-row
- height: 24px
- position: relative
- font-size: 20px
- font-weight: bold
-
- .stat-label
- position: absolute
- left: 54px
- color: rgb(93,73,52)
-
- .stat
- position: absolute
- left: 150px
- color: rgb(42,38,28)
-
- #skills
- margin: 25px
-
- h3
- color: rgb(41,35,25)
-
- strong
- color: rgb(50,50,30)
-
- #selected-item-unlock-button
- left: 856px
- top: 594px
- width: 337px
- height: 41px
- font-size: 16px
-
- img
- height: 16px
-
//- Item icons w/shadows (both in list and details areas)
@@ -358,6 +292,9 @@
opacity: 1
color: rgba(255,255,255, 0.4)
+
+//- Use the two-column layout and background image if we are on a narrow screen.
+
@media only screen and (max-width: 1300px)
#play-items-modal
overflow-x: hidden
diff --git a/app/templates/game-menu/inventory-modal.jade b/app/templates/game-menu/inventory-modal.jade
index 80d039377..846d23173 100644
--- a/app/templates/game-menu/inventory-modal.jade
+++ b/app/templates/game-menu/inventory-modal.jade
@@ -19,26 +19,28 @@
img.item(src=equipment[slot].getPortraitURL(), data-item-id=equipment[slot].id)
#unequipped
- if itemGroups
- if itemGroups.availableItems.models.length
- h4#available-description(data-i18n="inventory.available_item")
- for item in itemGroups.availableItems.models
- img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
- .clearfix
-
- #double-click-hint.alert.alert-info.secret(data-i18n="inventory.should_equip")
-
- if itemGroups.restrictedItems.models.length
- h4#restricted-description(data-i18n="inventory.restricted_title")
- for item in itemGroups.restrictedItems.models
- img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
- .clearfix
-
- if itemGroups.lockedItems.models.length
- h4#locked-description(data-i18n="play.locked")
- for item in itemGroups.lockedItems.models
- img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
- .clearfix
+ .nano
+ .nano-content
+ if itemGroups
+ if itemGroups.availableItems.models.length
+ h4#available-description(data-i18n="inventory.available_item")
+ for item in itemGroups.availableItems.models
+ img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+ .clearfix
+
+ #double-click-hint.alert.alert-info.secret(data-i18n="inventory.should_equip")
+
+ if itemGroups.restrictedItems.models.length
+ h4#restricted-description(data-i18n="inventory.restricted_title")
+ for item in itemGroups.restrictedItems.models
+ img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+ .clearfix
+
+ if itemGroups.lockedItems.models.length
+ h4#locked-description(data-i18n="play.locked")
+ for item in itemGroups.lockedItems.models
+ img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+ .clearfix
#item-details-view
#item-details-extra
diff --git a/app/views/game-menu/InventoryModal.coffee b/app/views/game-menu/InventoryModal.coffee
index bb82239e3..3da689a25 100644
--- a/app/views/game-menu/InventoryModal.coffee
+++ b/app/views/game-menu/InventoryModal.coffee
@@ -122,6 +122,7 @@ module.exports = class InventoryModal extends ModalView
@itemDetailsView = new ItemDetailsView()
@insertSubView(@itemDetailsView)
@requireLevelEquipment()
+ @$el.find('.nano').nanoScroller()
afterInsert: ->
super()
@@ -169,7 +170,9 @@ module.exports = class InventoryModal extends ModalView
tolerance: 'pointer'
makeEquippedSlotDraggable: (slot) ->
- unequip = => @unequipItemFromSlot slot
+ unequip = =>
+ @unequipItemFromSlot slot
+ @requireLevelEquipment()
shouldStayEquippedWhenDropped = (isValidDrop) ->
pos = $(@).position()
revert = Math.abs(pos.left) < $(@).outerWidth() and Math.abs(pos.top) < $(@).outerHeight()
@@ -381,6 +384,7 @@ module.exports = class InventoryModal extends ModalView
$('#play-level-button').prop('disabled', @remainingRequiredEquipment.length > 0)
setHero: (@selectedHero) ->
+ @$el.removeClass('Warrior Ranger Wizard').addClass(@selectedHero.get('heroClass'))
@render()
onShown: ->