Properly position the portal builder mobile menu

Closes issue #1599
NCEAS · Dec 28, 2020 · dd76c1d · dd76c1d
1 parent 7c83b3e
commit dd76c1d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/src/css/metacatui-common.responsive.css b/src/css/metacatui-common.responsive.css
@@ -357,11 +357,10 @@
 		transition: bottom 0.3s;
 	}
 
+	/* Default position of portal pages nav on mobile. */
+	/* This will be changed by PortalEditorView */
+	.PortalView .section-links-container,
 	.Editor.Portal .section-links-toggle-container {
-		bottom: 73px;
-	}
-
-	.PortalView .section-links-container {
 		bottom: 0;
 	}
 

diff --git a/src/js/views/EditorView.js b/src/js/views/EditorView.js
@@ -294,16 +294,26 @@ function(_, $, Backbone, SignInView, EditorSubmitMessageTemplate){
     * Show the editor footer controls (Save bar)
     */
     showControls: function(){
-      this.$(".editor-controls").removeClass("hidden").slideDown();
+      var view = this;
+      this.$(".editor-controls").removeClass("hidden").slideDown(300, function(){
+        if(typeof view.handleScroll === "function"){
+          view.handleScroll()
+        }
+      });
+
     },
 
     /**
     * Hide the editor footer controls (Save bar)
     */
     hideControls: function(){
-        this.hideSaving();
-
-      this.$(".editor-controls").slideUp();
+      var view = this;
+      this.hideSaving();
+      this.$(".editor-controls").slideUp(300, function(){
+        if(typeof view.handleScroll === "function"){
+          view.handleScroll()
+        }
+      });
     },
 
     /**

diff --git a/src/js/views/portals/editor/PortalEditorView.js b/src/js/views/portals/editor/PortalEditorView.js
@@ -896,17 +896,30 @@ function(_, $, Backbone, Portal, PortalImage, Filters, EditorView, SignInView,
     * This function is called whenever the window is scrolled.
     */
     handleScroll: function() {
-      var menu = $(".section-links-toggle-container")[0],
-          menuHeight = $(menu).height(),
-          editorFooterHeight = 73,
-          hiddenHeight = (menuHeight * -1) + 73;
-      var currentScrollPos = window.pageYOffset;
-      if(MetacatUI.appView.prevScrollpos > currentScrollPos) {
-        menu.style.bottom = "73px";
-      } else {
-        menu.style.bottom = hiddenHeight +"px";
+      try {
+
+        var menu = $(".section-links-toggle-container")[0],
+          editorFooter = this.$("#editor-footer")[0],
+          editorFooterHeight = editorFooter ? editorFooter.offsetHeight : 0;
+          menuHeight = menu ? menu.offsetHeight : 0,
+          hiddenHeight = (menuHeight * -1) + editorFooterHeight,
+          currentScrollPos = window.pageYOffset;
+
+        if(!menu){
+          return
+        }
+        if(MetacatUI.prevScrollpos >= currentScrollPos) {
+          // when scrolling upward
+          menu.style.bottom = editorFooterHeight + "px";
+        } else {
+          // when scrolling downward
+          menu.style.bottom = hiddenHeight + "px";
+        }
+        MetacatUI.prevScrollpos = currentScrollPos;
+
+      } catch (error) {
+        console.log("There was an error adjusting menu position on scroll. Error details: " + error);
       }
-      MetacatUI.appView.prevScrollpos = currentScrollPos;
     },
 
     /**