From eab293cb66b2fbf409099cdd9db1cfcacb6d800c Mon Sep 17 00:00:00 2001
From: Nick Winter <livelily@gmail.com>
Date: Mon, 10 Nov 2014 18:13:04 -0800
Subject: [PATCH] Refactored item-details-view styling and shared styles
between InventoryModal and PlayItemsView, fixing scrollbars and text overflow
issues in the process. Dragging to unequip now updates restrictions again.
Worked on pointer cursors for equippable ittems. Hid items not usable by your
hero's class. Stopped silhouetted items from being clickable.
---
app/styles/game-menu/inventory-modal.sass | 140 ++++---------------
app/styles/play/modal/play-items-modal.sass | 107 +++-----------
app/templates/game-menu/inventory-modal.jade | 42 +++---
app/views/game-menu/InventoryModal.coffee | 6 +-
4 files changed, 74 insertions(+), 221 deletions(-)
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: ->