Improve scrolling behavior on mobile

fixes #221

src/client/site/craft_page/craft_page.jade

@@ -18,19 +18,19 @@
                 p.
                     Not sure what you'd like to make?  Try one of these:
                 .items
-                    a(href="/craft/potion_of_strength_ii_1_30")
+                    a(href="/" data-slug="potion_of_strength_ii_1_30")
                         img(src="/data/minecraft/items/potion_of_strength_ii_1_30/icon.png")
-                    a(href="/craft/quarry")
+                    a(href="/" data-slug="quarry")
                         img(src="/data/buildcraft/items/quarry/icon.png")
-                    a(href="/craft/quantumsuit_bodyarmor:quantumsuit_boots:quantumsuit_helmet:quantumsuit_leggings")
+                    a(href="/" data-slug="quantumsuit_bodyarmor:quantumsuit_boots:quantumsuit_helmet:quantumsuit_leggings")
                         img(src="/data/ic2_classic/items/quantumsuit_helmet/icon.png")
-                    a(href="/craft/solar_panel_vi")
+                    a(href="/" data-slug="solar_panel_vi")
                         img(src="/data/solar_flux/items/solar_panel_vi/icon.png")
-                    a(href="/craft/crystal_chest")
+                    a(href="/" data-slug="crystal_chest")
                         img(src="/data/iron_chests/items/crystal_chest/icon.png")
-                    a(href="/craft/digital_miner")
+                    a(href="/" data-slug="digital_miner")
                         img(src="/data/mekanism/items/digital_miner/icon.png")
-                    a(href="/craft/2.tesseract")
+                    a(href="/" data-slug="2.tesseract")
                         img(src="/data/thermal_expansion/items/tesseract/icon.png")
 
         section.want

src/client/site/craft_page/craft_page_controller.coffee

@@ -11,12 +11,15 @@ Craftsman                  = require '../../models/crafting/craftsman'
 CraftsmanWorkingController = require './craftsman_working/craftsman_working_controller'
 InventoryController        = require '../common/inventory/inventory_controller'
 PageController             = require '../page_controller'
+SimpleInventory            = require '../../models/crafting/simple_inventory'
 StepController             = require './step/step_controller'
 
 ########################################################################################################################
 
 module.exports = class CraftPageController extends PageController
 
+    @::SCROLL_BUFFER = 8 # px
+
     constructor: (options={})->
         if not options.imageLoader? then throw new Error 'options.imageLoader is required'
         if not options.modPack? then throw new Error 'options.modPack is required'
@@ -48,6 +51,21 @@ module.exports = class CraftPageController extends PageController
         @model.craftsman.want.remove itemSlug
         @onWantInventoryChanged()
 
+    onSampleClicked: (event)->
+        $el = $(event.target)
+        while $el.length > 0
+            inventoryText = $el.attr 'data-slug'
+            break if inventoryText
+            $el = $el.parent()
+
+        if inventoryText?
+            sampleInventory = new SimpleInventory
+            sampleInventory.parse inventoryText
+            @model.craftsman.want.addInventory sampleInventory
+            @_scrollTo @$workingSection
+
+        return false
+
     onWantInventoryChanged: ->
         text = @model.craftsman.want.unparse()
         url = c.url.crafting inventoryText:text
@@ -96,7 +114,7 @@ module.exports = class CraftPageController extends PageController
 
         @_workingSectionController = @addChild CraftsmanWorkingController, '.view__craftsman_working',
             model: @model.craftsman
-        @_workingSectionController.on c.event.click, -> window.scrollTo 0, 0
+        @_workingSectionController.on c.event.click, => @_scrollTo @$workingSection
 
         @$haveSection         = @$('section.have')
         @$instructionsSection = @$('section.instructions')
@@ -118,6 +136,11 @@ module.exports = class CraftPageController extends PageController
         @model.craftsman.have.on c.event.change, => @onHaveInventoryChanged()
 
         @model.craftsman.want.on c.event.change, => @refresh()
+
+        @model.craftsman.on c.event.change + ":stage", =>
+            return unless @model.craftsman.stage is Craftsman::STAGE.COMPLETE
+            @_scrollTo @$needSection
+
         super
 
     refresh: ->
@@ -132,7 +155,7 @@ module.exports = class CraftPageController extends PageController
 
     events: ->
         return _.extend super,
-            'click .instructions a': 'routeLinkClick'
+            'click .instructions a': 'onSampleClicked'
 
     # Private Methods ################################################################################
 
@@ -219,3 +242,28 @@ module.exports = class CraftPageController extends PageController
 
         while @_stepControllers.length > index
             @_stepControllers.pop().remove()
+
+    _scrollTo: ($targetEl)->
+        @_$scrollTarget = $targetEl
+
+        if @_scrollTimer?
+            clearTimeout @_scrollTimer
+
+        @_scrollTimer = setTimeout(=>
+            $el = @_$scrollTarget
+            @_scrollTimer = null
+
+            minScrollPosition = $el.offset().top + $el.height() - $(window).height() - @SCROLL_BUFFER
+            maxScrollPosition = $el.offset().top + @SCROLL_BUFFER
+            scrollPosition = $(window).scrollTop()
+
+            scrollTarget = scrollPosition
+            if scrollPosition > maxScrollPosition
+                scrollTarget = maxScrollPosition
+            else if scrollPosition < minScrollPosition
+                scrollTarget = minScrollPosition
+            else
+                return
+
+            $('html, body').animate {scrollTop:scrollTarget}, c.duration.normal
+        , c.duration.slow)

src/client/site/craft_page/craftsman_working/craftsman_working_controller.coffee

@@ -90,12 +90,12 @@ module.exports = class CraftsmanWorkingController extends BaseController
             @show @$message
             @$message.html message
 
-        if waiting?
-            @show @$waiting
-
         if outdated?
             @show @$outdated
 
+        if waiting?
+            @show @$waiting
+
         super
 
     # Backbone.View Overrides ######################################################################