Made item shop fit on iPad and small screens.

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

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")
     

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)