Fix mapper page bugs + other things (#611)

* fix centering of explore headers

* make sure the mobile map title updates

* styling was broken on admin pages

* fixup callbacks when fetching user

* enable loading more

app/assets/javascripts/src/Metamaps.Backbone.js

@@ -157,6 +157,8 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
     if (isActiveMap) {
       Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
       this.updateMapWrapper()
+      // mobile menu
+      $('#header_content').html(this.get('name'))
     }
   },
   updateMapWrapper: function () {

app/assets/javascripts/src/Metamaps.Map.js

@@ -552,6 +552,8 @@ Metamaps.Map.InfoBox = {
       var name = $(this).html()
       Metamaps.Active.Map.set('name', name)
       Metamaps.Active.Map.trigger('saved')
+      // mobile menu
+      $('#header_content').html(name)
     })
 
     $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {

app/assets/javascripts/src/Metamaps.Router.js

@@ -47,9 +47,9 @@
         Metamaps.GlobalUI.hideDiv('#yield')
 
         Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
-        //Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
         Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
         Metamaps.GlobalUI.showDiv('#exploreMaps')
+        $('#exploreMaps').scrollTop(0)
 
         Metamaps.GlobalUI.Search.open()
         Metamaps.GlobalUI.Search.lock()
@@ -124,7 +124,7 @@
         if (Metamaps.Router.currentPage === 'mapper') {
           path += '/' + Metamaps.Maps.Mapper.mapperId
         }
-
+        
         Metamaps.Router.navigate(path)
       }
       var navigateTimeout = function () {
@@ -147,9 +147,9 @@
       Metamaps.GlobalUI.Search.lock()
       Metamaps.GlobalUI.showDiv('#exploreMaps')
       Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
-      // Metamaps.Famous.maps.resetScroll() // sets scroll back to top
+      $('#exploreMaps').scrollTop(0)
       if (id) {
-        Metamaps.Header.fetchUserThenchangeSection(!!Metamaps.Active.Mapper, id)
+        Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, id)
       }
       else Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, section)
       Metamaps.GlobalUI.hideDiv('#yield')

app/assets/javascripts/src/Metamaps.Views.js

@@ -57,11 +57,11 @@ Metamaps.Views.init = function () {
       this.listenTo(this.collection, 'successOnFetch', this.handleSuccess)
       this.listenTo(this.collection, 'errorOnFetch', this.handleError)
     },
-    render: function (mapperObj, cbArg) {
+    render: function (mapperObj, cb) {
       var that = this
 
       if (typeof mapperObj === 'function') {
-        var cb = mapperObj
+        cb = mapperObj
         mapperObj = null
       }
 
@@ -80,10 +80,25 @@ Metamaps.Views.init = function () {
         that.el.appendChild(view.render().el)
       })
       this.$el.append('<div class="clearfloat"></div>')
+      
+      if (this.collection.length >= 20 && this.collection.page != "loadedAll") {
+        this.$el.append('<button class="button loadMore">load more</button>')
+        this.$el.append('<div class="clearfloat"></div>')
+      }
+      
       $('#exploreMaps').empty().html(this.el) 
+      this.$el.find('.loadMore').click(that.loadMore.bind(that))
       if (cb) cb()
       Metamaps.Loading.hide()
     },
+    loadMore: function () {
+      if (this.collection.page != "loadedAll") {
+        this.collection.getMaps();
+      }
+      else {
+        this.$el.find('.loadMore').hide()
+      }
+    },
     handleSuccess: function (cb) {
       if (this.collection && this.collection.id === 'mapper') {
         this.fetchUserThenRender(cb)

app/assets/stylesheets/admin.scss.erb

@@ -63,7 +63,7 @@
 .blackBox {
   width: 760px;
   margin: 0 auto;
-  padding: 20px 0 60px 20px;
+  padding: 80px 0 60px 20px;
   background: rgba(0, 0, 0, 0.4);
   color: white;
   overflow: hidden;

app/assets/stylesheets/clean.css.erb

@@ -603,6 +603,11 @@
   margin-top: 110px;
 }
 
+.button.loadMore {
+  margin: 10px auto 20px;
+  display: block;
+}
+
 .appsPage #exploreMapsHeader {
   display: block;
 }
@@ -626,12 +631,11 @@
   height:42px;
   background-color:#EEEEEE;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+  text-align: center;
 }
 
 .exploreMapsCenter {
-   margin: 0 auto;
    display: block;
-   width: 419px;
 }
 
 .exploreMapsButton {