Mobile menu fixes

* Fixed close button for all menus.
* Added text label to Main Menu and MediaWiki Menu.
* Fixed menu icon css.

Signed-off-by: Mustafa Can Elmacı <[email protected]>

Author: Rupurudu

includes/smfCurve2Template.php

@@ -175,24 +175,24 @@ public function execute()
 			<!-- #header -->
 			<div id="wrapper">
 				<div id="upper_section">
-					<div id="inner_section">
-
-						<div class="inner_wrap">';
+					<div id="inner_section">';
 
 						// Do we have an SMF Menu ?
 						$this->smfMenu();
 
 						echo '
-						</div>
 						<hr class="clear ', (defined('SMF') && $this->showSMFmenu) ? '' : 'hidden', '">
 
-						<a class="menu_icon mobile_generic_menu_0"></a>
+						<a class="mobile_generic_menu_0">
+							<span class="menu_icon"></span>
+							<span class="text_menu">', $this->getMsg('smfcurve2-mw-menu')->text(), '</span>
+						</a>
 						<div id="genericmenu" class="floatleft">
 							<div id="mobile_generic_menu_0" class="popup_container">
 								<div class="popup_window description">
 									<div class="popup_heading">
 										', $this->getMsg('smfcurve2-mw-menu')->text(), '
-										<a href="javascript:void(0);" class="generic_icons delete hide_popUp"></a>
+										<a href="javascript:void(0);" class="main_icons hide_popup"></a>
 									</div>
 									<div class="genericmenu">
 										<ul class="dropmenu dropmenu_menu_0">';
@@ -424,7 +424,7 @@ public function userMenu($limitUrls = [], $inverseLimit = false, $menuID = 'u')
 				<div class="popup_window description">
 					<div class="popup_heading">
 						', $this->getMsg('smfcurve2-user-menu')->text(), '
-						<a href="javascript:void(0);" class="main_icons delete hide_popUp_', $menuID, '"></a>
+						<a href="javascript:void(0);" class="main_icons hide_popup"></a>
 					</div>
 					<div class="genericmenu">
 						<ul', $this->html('userlangattributes') , ' class="floatleft dropmenu dropmenu_menu_', $menuID, '" id="top_info">';
@@ -685,13 +685,16 @@ public function smfMenu()
 	{
 		if ((defined('SMF') && $this->showSMFmenu)) {
 			echo'
-			<a class="menu_icon mobile_generic_menu_main"></a>
-			<div id="genericmenu">
-				<div id="mobile_generic_menu_main" class="popup_container">
+			<a class="mobile_user_menu">
+				<span class="menu_icon"></span>
+				<span class="text_menu">', $this->getMsg('smfcurve2-mobile-menu')->text(), '</span>
+			</a>
+			<div id="main_menu">
+				<div id="mobile_user_menu" class="popup_container">
 					<div class="popup_window description">
 						<div class="popup_heading">
 							', $this->getMsg('smfcurve2-mobile-menu')->text(), '
-							<a href="javascript:void(0);" class="generic_icons delete hide_popUp_main"></a>
+							<a href="javascript:void(0);" class="main_icons hide_popup"></a>
 						</div>
 						', ssi_menubar(), '
 					</div>

resources/css/main.css

@@ -1425,6 +1425,16 @@ h1.forumtitle a {
 	box-shadow: 0 5px 5px rgba(255, 255, 255, 0.2) inset;
 	text-shadow: none;
 }
+
+a.mobile_user_menu,
+a[class^="mobile_generic_menu_"] {
+	display: none;
+}
+
+#main_menu {
+	margin: 0 0 4px 0;
+}
+
 /* User information. */
 #profile_menu_top::after {
 	content: " \25BC";
@@ -1562,10 +1572,6 @@ h1.forumtitle a {
 	line-height: 2.2em;
 }
 
-#main_menu {
-	margin: 10px 0 4px 0;
-}
-
 /* Levels 2 and 3 submenu wrapper. */
 .dropmenu li ul, .top_menu {
 	z-index: 90;

resources/css/responsive.css

@@ -41,14 +41,24 @@
 		max-width: 300px;
 		margin: 10px 0;
 	}
+	#mobile_user_menu .dropmenu,
 	div[id^="mobile_generic_menu_"] .generic_menu {
 		display: block;
 	}
+	a.mobile_user_menu,
+	a[class^="mobile_generic_menu_"] {
+		display: flex;
+		align-items: center;
+		margin: 0 0 4px 0;
+	}
+	a[class^="mobile_generic_menu_"] {
+		margin: 8px 0;
+	}
 	.menu_icon {
 		display: inline-block;
 		background: url(../images/menu.svg) no-repeat;
-		height: 20px;
-		width: 20px;
+		height: 24px;
+		width: 24px;
 	}
 	.dropmenu li, .dropmenu li:hover,
 	.dropmenu li a, .dropmenu li a:hover,

resources/scripts/custom.js

@@ -1,10 +1,11 @@
 $(function () {
 	// Top Section, User Tools
-	$( ".mobile_generic_menu_ue" ).click(function() {
-		$( "#mobile_generic_menu_ue" ).show();
-		});
-	$( ".hide_popUp_ue" ).click(function() {
-		$( "#mobile_generic_menu_ue" ).hide();
+	$(".mobile_generic_menu_ue").click(function () {
+		$("#mobile_generic_menu_ue").show();
+	});
+	// Close All Popups
+	$(".hide_popup").click(function () {
+		$("#mobile_generic_menu_ue").hide();
 	});
 });
 

resources/scripts/main.js

@@ -1,25 +1,23 @@
 $(function () {
 	// Top Section, User Tools
-	$( ".mobile_generic_menu_u" ).click(function() {
-		$( "#mobile_generic_menu_u" ).show();
-		});
-	$( ".hide_popUp_u" ).click(function() {
-		$( "#mobile_generic_menu_u" ).hide();
+	$(".mobile_generic_menu_u").click(function () {
+		$("#mobile_generic_menu_u").show();
 	});
-	
+
 	// MW Menu
-	$( ".mobile_generic_menu_0" ).click(function() {
-		$( "#mobile_generic_menu_0" ).show();
-		});
-	$( ".hide_popUp" ).click(function() {
-		$( "#mobile_generic_menu_0" ).hide();
+	$(".mobile_generic_menu_0").click(function () {
+		$("#mobile_generic_menu_0").show();
 	});
-	
+
 	// SMF Menu
-	$( ".mobile_generic_menu_main" ).click(function() {
-		$( "#mobile_generic_menu_main" ).show();
-		});
-	$( ".hide_popUp_main" ).click(function() {
-		$( "#mobile_generic_menu_main" ).hide();
+	$(".mobile_user_menu").click(function () {
+		$("#mobile_user_menu").show();
+	});
+
+	// Close All Popups
+	$(".hide_popup").click(function () {
+		$("#mobile_generic_menu_u").hide();		// Top Section, User Tools
+		$("#mobile_generic_menu_0").hide();		// MW Menu
+		$("#mobile_user_menu").hide();			// SMF Menu
 	});
 });