diff --git a/app/assets/images/pages/play/modal/play-items-modal-background-narrow.png b/app/assets/images/pages/play/modal/play-items-modal-background-narrow.png new file mode 100644 index 000000000..facca4861 Binary files /dev/null and b/app/assets/images/pages/play/modal/play-items-modal-background-narrow.png differ diff --git a/app/styles/play/modal/play-items-modal.sass b/app/styles/play/modal/play-items-modal.sass index b0accbd1b..5dd58c300 100644 --- a/app/styles/play/modal/play-items-modal.sass +++ b/app/styles/play/modal/play-items-modal.sass @@ -15,14 +15,18 @@ //- Clear modal defaults .modal-dialog padding: 0 - + width: 1230px + height: 660px + background: none //- Background - #play-items-modal-bg + #play-items-modal-bg, #play-items-modal-narrow-bg position: absolute top: -69px left: -8px - + + #play-items-modal-narrow-bg + display: none //- Header @@ -44,6 +48,7 @@ top: 10px width: 160px height: 66px + @include rotate(5deg) #gems-count position: absolute @@ -66,7 +71,8 @@ font-size: 30px padding-top: 7px cursor: pointer - + @include rotate(-3deg) + &:hover color: yellow @@ -114,7 +120,7 @@ width: 669px height: 507px overflow: hidden - + .tab-pane height: 100% @@ -350,3 +356,41 @@ background: rgb(72, 106, 113) opacity: 1 color: rgba(255,255,255, 0.4) + +@media only screen and (max-width: 1300px) + #play-items-modal + overflow-x: hidden + + .tab-content + width: 469px + + #play-items-modal-bg + display: none + + #play-items-modal-narrow-bg + display: block + + .modal-dialog + width: 1024px + left: 25px + + h1 + display: none + + #gems-count-container + left: 213px + + #close-modal + left: 390px + + .nano-content + padding-left: 20px + + #item-title + left: 698px + + #item-details-body + left: 648px + + #selected-item-unlock-button + left: 645px diff --git a/app/templates/play/modal/play-items-modal.jade b/app/templates/play/modal/play-items-modal.jade index 5c57762b4..b9ebed2f0 100644 --- a/app/templates/play/modal/play-items-modal.jade +++ b/app/templates/play/modal/play-items-modal.jade @@ -1,6 +1,7 @@ .modal-dialog .modal-content img(src="/images/pages/play/modal/play-items-modal-background.png")#play-items-modal-bg + img(src="/images/pages/play/modal/play-items-modal-background-narrow.png")#play-items-modal-narrow-bg h1.big-font(data-i18n="play.items") diff --git a/app/views/play/modal/PlayItemsModal.coffee b/app/views/play/modal/PlayItemsModal.coffee index 998433127..ccce43cca 100644 --- a/app/views/play/modal/PlayItemsModal.coffee +++ b/app/views/play/modal/PlayItemsModal.coffee @@ -91,7 +91,6 @@ module.exports = class PlayItemsModal extends ModalView model.silhouetted = model.isSilhouettedItem() model.equippable = 'Warrior' in model.getAllowedHeroClasses() # Temp: while there are no wizards/rangers model.comingSoon = not model.getFrontFacingStats().props.length and not _.size model.getFrontFacingStats().stats # Temp: while there are placeholder items - console.log model.name, 'is comingSoon?', model.comingSoon, model.getFrontFacingStats() @idToItem[model.id] = model if needMore @@ -110,8 +109,6 @@ module.exports = class PlayItemsModal extends ModalView super() return unless @supermodel.finished() Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'game-menu-open', volume: 1 - @$el.find('.modal-dialog').css({width: "1230px", height: "660px", background: 'none'}) - @$el.find('.background-wrapper').css({'background', 'none'}) @$el.find('.nano:visible').nanoScroller({alwaysVisible: true}) @itemDetailsView = new ItemDetailsView() @insertSubView(@itemDetailsView)