Make mobile TOC close menu on item or toggle click + mobile CSS fixes

Relates to issue #1144
NCEAS · Nov 4, 2019 · bf94e23 · bf94e23
1 parent 8dfd880
commit bf94e23
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -5683,7 +5683,7 @@ ul.side-nav-items {
     box-sizing: border-box;
     bottom: 0px;
     padding: 20px;
-    z-index:3;
+    z-index: 11;
 }
 .metadata-view #editor-footer{
     display: none;

diff --git a/src/css/metacatui-common.responsive.css b/src/css/metacatui-common.responsive.css
@@ -193,19 +193,19 @@
 		margin: 0px 3px 0px 3px;
 	}
 
-	#portal-section-tabs {
+	.portal-view #portal-section-tabs {
 		flex-direction: row;
 		flex-wrap: nowrap;
-		overflow: auto;
-		padding: 0 5px;
+		overflow-x: scroll;
+		padding: 0 6px 6px 6px;
 		box-sizing: border-box;
 	}
 
-	#portal-section-tabs li.section-link-container {
+	.portal-view #portal-section-tabs li.section-link-container {
     width: auto;
 		border-radius: 5px;
 		margin: 0 2px;
-		padding: 10px;
+		padding: 6px;
 		white-space: nowrap;
 	}
 
@@ -214,6 +214,12 @@
 		text-align: center;
 	}
 
+	.portal-display-text h2 {
+		font-size: 1.5em;
+		line-height: 1.4;
+		padding: 10px 2px;
+	}
+
 	.tab-pane.portal-section-view {
     width: 100vw;
 		overflow-y: scroll;
@@ -283,6 +289,16 @@
 	.toc .mobile > .second-level-items {
 		min-width: 48vw;
 	}
+
+	.toc .mobile > .second-level-items .dropdown-menu {
+		width: 100%;
+		min-width: 100%;
+		margin-left: -7px;
+	}
+
+	.toc .mobile > .top-level-items .dropdown-menu {
+		min-width: 100%;
+	}
 
 	.toc .mobile > .top-level-items {
 		margin: 0;
@@ -310,7 +326,7 @@
 	}
 
 	/* make markdown content take full width */
-	.markdown.span9 {
+	.portal-section-content > .markdown {
     padding: 13px 10px;
     width: 100vw;
     box-sizing: border-box;

diff --git a/src/js/templates/tableOfContents.html b/src/js/templates/tableOfContents.html
@@ -4,13 +4,13 @@
 <div class="mobile">
   <div class="top-level-items dropdown">
     <a class="dropdown-toggle ellipsis" data-toggle="dropdown" href="#">Table of Contents</a><i class="icon-caret-down"></i>
-    <div class="dropdown-menu">
+    <div class="dropdown-menu hidden">
       <%=ulTemplate%>
     </div>
   </div>
   <i class="icon-caret-right mobile-toc-divider hidden"></i>
   <div class ="second-level-items dropdown hidden">
     <a class="dropdown-toggle ellipsis" data-toggle="dropdown" href="#"></a><i class="icon-caret-down"></i>
-    <div class="dropdown-menu"></div>
+    <div class="dropdown-menu hidden"></div>
   </div>
 </div>
diff --git a/src/js/views/TOCView.js b/src/js/views/TOCView.js
@@ -30,6 +30,10 @@ define(["jquery",
         templateInvisibleH1: _.template(
             '<h1 id="<%=linkDisplay%>" style="display: inline"></h1>'
         ),
+
+        events: {
+          'click .dropdown'       : 'toggleDropdown'
+    		},
 
         //The element on the page that contains the content that this table of contents
         //  is associated with.
@@ -360,6 +364,39 @@ define(["jquery",
             console.log("error adding extra scrollSpy functionality to portal section, error message: " + error);
           }
         },
+
+        /**        
+         * toggleDropdown - Extends bootstrap's dropdown menu functionality by
+         * hiding the dropdown menu when the user clicks the dropdown toggle or
+         * any of the options within the dropdown menu.
+         *          
+         * @param  {event} e The click event on any part of the dropdown element
+         */         
+        toggleDropdown: function(e){
+
+          try {
+            if(e && e.target && $(e.target).closest(".dropdown").children(".dropdown-menu")){
+
+                  // The entire dropdown element including toggle and menu
+              var $dropdown = $(e.target).closest(".dropdown"),
+                  // The menu that we wish to show and hide on click
+                  $menu     = $dropdown.children(".dropdown-menu");
+
+              // Wait for bootstrap to add or remove the open class on $dropdown
+              setTimeout(function () {
+                if($menu.hasClass("hidden") || $dropdown.hasClass("open")){
+                  $menu.removeClass("hidden");
+                } else {
+                  $menu.addClass("hidden");
+                }
+              }, 5);
+
+            }
+          } catch (error) {
+            console.log("error hiding TOC dropdown menu on click, error message: " + error);
+          }
+
+        },
 
 
         /**