convert all settings to mobile friendly

api/classes/organizr.class.php

@@ -2745,6 +2745,120 @@ class Organizr
 		);
 	}
 	
+	public function systemMenuLists()
+	{
+		$userManagementMenu = [
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_user_manage_users',
+				'anchor' => 'settings-user-manage-users-anchor',
+				'name' => 'Manage Users'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_user_manage_groups',
+				'anchor' => 'settings-user-manage-groups-anchor',
+				'name' => 'Manage Groups'
+			],
+			[
+				'active' => false,
+				'api' => false,
+				'anchor' => 'settings-user-import-users-anchor',
+				'name' => 'Import Users'
+			],
+		];
+		$customizeMenu = [
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_customize_appearance',
+				'anchor' => 'settings-customize-appearance-anchor',
+				'name' => 'Appearance',
+			],
+			[
+				'active' => false,
+				'api' => false,
+				'anchor' => 'settings-customize-marketplace-anchor',
+				'name' => 'Marketplace',
+				'onclick' => 'loadMarketplace(\'themes\');'
+			],
+		];
+		$tabEditorMenu = [
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_tab_editor_tabs',
+				'anchor' => 'settings-tab-editor-tabs-anchor',
+				'name' => 'Tabs'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_tab_editor_categories',
+				'anchor' => 'settings-tab-editor-categories-anchor',
+				'name' => 'Categories'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_sso',
+				'anchor' => 'settings-tab-editor-homepage-anchor',
+				'name' => 'Homepage Items'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_logs',
+				'anchor' => 'settings-tab-editor-homepage-order-anchor',
+				'name' => 'Homepage Order'
+			],
+		];
+		$systemSettingsMenu = [
+			[
+				'active' => true,
+				'api' => false,
+				'anchor' => 'settings-settings-about-anchor',
+				'name' => 'About'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_main',
+				'anchor' => 'settings-settings-main-anchor',
+				'name' => 'Main'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_sso',
+				'anchor' => 'settings-settings-sso-anchor',
+				'name' => 'SSO'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_logs',
+				'anchor' => 'settings-settings-logs-anchor',
+				'name' => 'Logs'
+			],
+			[
+				'active' => false,
+				'api' => false,
+				'anchor' => 'settings-settings-updates-anchor',
+				'name' => 'Updates'
+			],
+			[
+				'active' => false,
+				'api' => 'api/v2/page/settings_settings_backup',
+				'anchor' => 'settings-settings-backup-anchor',
+				'name' => 'Backup'
+			],
+			[
+				'active' => false,
+				'api' => false,
+				'anchor' => 'settings-settings-donate-anchor',
+				'name' => 'Donate'
+			],
+		];
+		$systemMenus['system_settings'] = $this->buildSettingsMenus($systemSettingsMenu, 'System Settings');
+		$systemMenus['tab_editor'] = $this->buildSettingsMenus($tabEditorMenu, 'Tab Editor');
+		$systemMenus['customize'] = $this->buildSettingsMenus($customizeMenu, 'Customize');
+		$systemMenus['user_management'] = $this->buildSettingsMenus($userManagementMenu, 'User Management');
+		return $systemMenus;
+	}
+	
 	public function updateConfigMultiple($array)
 	{
 		return ($this->updateConfig($array)) ? true : false;
@@ -6486,11 +6600,11 @@ class Organizr
 		return '
 		<h3 lang="en">' . ucwords($app) . ' SOCKS API Connection</h3>
 		<p>Using this feature allows you to access the API without having to reverse proxy it.  Just access it from: </p>
-		<code>' . $this->getServerPath() . 'api/v2/socks/' . $app . '/</code>
+		<code class="elip hidden-xs">' . $this->getServerPath() . 'api/v2/socks/' . $app . '/</code>
 		<p>If you are using multiple URL\'s (using the csv method) you will have to use the url like these: </p>
-		<code>' . $this->getServerPath() . 'api/v2/multiple/socks/' . $app . '/1</code>
+		<code class="elip hidden-xs">' . $this->getServerPath() . 'api/v2/multiple/socks/' . $app . '/1</code>
 		<br/>
-		<code>' . $this->getServerPath() . 'api/v2/multiple/socks/' . $app . '/2</code>
+		<code class="elip hidden-xs">' . $this->getServerPath() . 'api/v2/multiple/socks/' . $app . '/2</code>
 		';
 	}
 	

api/functions/organizr-functions.php

@@ -760,4 +760,27 @@ trait OrganizrFunctions
 			</body>
 			</html>';
 	}
+	
+	public function buildSettingsMenus($menuItems, $menuName)
+	{
+		$selectMenuItems = '';
+		$unorderedListMenuItems = '';
+		$menuNameLower = strtolower(str_replace(' ', '-', $menuName));
+		foreach ($menuItems as $menuItem) {
+			$anchorShort = str_replace('-anchor', '', $menuItem['anchor']);
+			$active = ($menuItem['active']) ? 'active' : '';
+			$apiPage = ($menuItem['api']) ? 'loadSettingsPage2(\'' . $menuItem['api'] . '\',\'#' . $anchorShort . '\',\'' . $menuItem['name'] . '\');' : '';
+			$onClick = ($menuItem['onclick']) ? $menuItem['onclick'] : '';
+			$selectMenuItems .= '<option value="#' . $menuItem['anchor'] . '" lang="en">' . $menuItem['name'] . '</option>';
+			$unorderedListMenuItems .= '
+				<li onclick="changeSettingsMenu(\'Settings::' . $menuName . '::' . $menuItem['name'] . '\'); ' . $apiPage . $onClick . '" role="presentation" class="' . $active . '">
+					<a id="' . $menuItem['anchor'] . '" href="#' . $anchorShort . '" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">
+						<span lang="en">' . $menuItem['name'] . '</span>
+					</a>
+			</li>';
+		}
+		$selectMenu = '<select class="form-control settings-dropdown-box ' . $menuNameLower . '-menu w-100 visible-xs">' . $selectMenuItems . '</select>';
+		$unorderedListMenu = '<ul class="nav customtab2 nav-tabs nav-non-mobile hidden-xs" data-dropdown="' . $menuNameLower . '-menu" role="tablist">' . $unorderedListMenuItems . '</ul>';
+		return $selectMenu . $unorderedListMenu;
+	}
 }

api/pages/settings.php

@@ -12,6 +12,7 @@ function get_page_settings($Organizr)
 		return false;
 	}
 	$Organizr->writeLog('success', 'Admin Function -  Accessed Settings Page', $Organizr->user['username']);
+	$systemMenus = $Organizr->systemMenuLists();
 	return $Organizr->pluginFiles('js', true) . '
 <script>
 	(function() {
@@ -57,16 +58,7 @@ function get_page_settings($Organizr)
 				<div class="content-wrap">
 					<! -- TAB EDITOR -->
 					<section id="settings-main-tab-editor">
-						<ul class="nav customtab2 nav-tabs" role="tablist">
-							<li onclick="changeSettingsMenu(\'Settings::Tab Editor::Tabs\');loadSettingsPage2(\'api/v2/page/settings_tab_editor_tabs\',\'#settings-tab-editor-tabs\',\'Tab Editor\');" role="presentation" class=""><a id="settings-tab-editor-tabs-anchor" href="#settings-tab-editor-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Tabs</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::Tab Editor::Categories\');loadSettingsPage2(\'api/v2/page/settings_tab_editor_categories\',\'#settings-tab-editor-categories\',\'Category Editor\');" role="presentation" class=""><a id="settings-tab-editor-categories-anchor" href="#settings-tab-editor-categories" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-layout-list-thumb"></i></span><span class="hidden-xs" lang="en">Categories</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::Tab Editor::Homepage Items\');loadSettingsPage2(\'api/v2/page/settings_tab_editor_homepage\',\'#settings-tab-editor-homepage\',\'Homepage Items\');" role="presentation" class=""><a id="settings-tab-editor-homepage-anchor" href="#settings-tab-editor-homepage" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-home"></i></span><span class="hidden-xs" lang="en">Homepage Items</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::Tab Editor::Homepage Order\');loadSettingsPage2(\'api/v2/page/settings_tab_editor_homepage_order\',\'#settings-tab-editor-homepage-order\',\'Homepage Order\');" role="presentation" class=""><a id="settings-tab-editor-homepage-order-anchor" href="#settings-tab-editor-homepage-order" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-exchange-vertical"></i></span><span class="hidden-xs" lang="en">Homepage Order</span></a>
-							</li>
-						</ul>
+						' . $systemMenus['tab_editor'] . '
 						<!-- Tab panes -->
 						<div class="tab-content">
 							<div role="tabpanel" class="tab-pane fade" id="settings-tab-editor-tabs">
@@ -80,17 +72,13 @@ function get_page_settings($Organizr)
 								<h2 lang="en">Loading...</h2>
 							</div>
 							<div role="tabpanel" class="tab-pane fade" id="settings-tab-editor-homepage-order">
-								<h2 lang="en">Coming Soon...</h2>
+								<h2 lang="en">Loading...</h2>
 							</div>
 						</div>
 					</section>
 					<! -- Customize -->
 					<section id="settings-main-customize">
-						<ul class="nav customtab2 nav-tabs" role="tablist">
-							<li onclick="changeSettingsMenu(\'Settings::Customize::Appearance\');loadSettingsPage2(\'api/v2/page/settings_customize_appearance\',\'#settings-customize-appearance\',\'Customize Appearance\');" role="presentation" class=""><a id="settings-customize-appearance-anchor" href="#settings-customize-appearance" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-eye"></i></span><span class="hidden-xs" lang="en">Appearance</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::Customize::Marketplace\');loadMarketplace(\'themes\');" role="presentation" class=""><a id="settings-customize-marketplace-anchor" href="#settings-customize-marketplace" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-shopping-cart-full"></i></span><span class="hidden-xs" lang="en">Marketplace</span></a></li>
-						</ul>
+						' . $systemMenus['customize'] . '
 						<!-- Tab panes -->
 						<div class="tab-content">
 							<div role="tabpanel" class="tab-pane fade" id="settings-customize-appearance">
@@ -126,14 +114,7 @@ function get_page_settings($Organizr)
 					</section>
 					<! -- USER MANAGEMENT -->
 					<section id="settings-main-user-management">
-						<ul class="nav customtab2 nav-tabs" role="tablist">
-							<li onclick="changeSettingsMenu(\'Settings::User Management::Manage Users\');loadSettingsPage2(\'api/v2/page/settings_user_manage_users\',\'#settings-user-manage-users\',\'User Management\');" role="presentation" class=""><a id="settings-user-manage-users-anchor" href="#settings-user-manage-users" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-id-badge"></i></span><span class="hidden-xs" lang="en">Users</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::User Management::Manage Groups\');loadSettingsPage2(\'api/v2/page/settings_user_manage_groups\',\'#settings-user-manage-groups\',\'Group Management\');" role="presentation" class=""><a id="settings-user-manage-groups-anchor" href="#settings-user-manage-groups" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-briefcase"></i></span><span class="hidden-xs" lang="en">Groups</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::User Management::Import Users\');" role="presentation" class=""><a id="settings-user-import-users-anchor" href="#settings-user-import-users" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-import"></i></span><span class="hidden-xs" lang="en">Import</span></a>
-							</li>
-						</ul>
+						' . $systemMenus['user_management'] . '
 						<!-- Tab panes -->
 						<div class="tab-content">
 							<div role="tabpanel" class="tab-pane fade" id="settings-user-manage-users">
@@ -166,31 +147,7 @@ function get_page_settings($Organizr)
 					</section>
 					<! -- SYSTEM SETTINGS -->
 					<section id="settings-main-system-settings">
-						<select class="form-control settings-dropdown-box w-100 visible-xs">
-							<option value="#settings-settings-about-anchor">About</option>
-							<option value="#settings-settings-main-anchor">Main</option>
-							<option value="#settings-settings-sso-anchor">SSO</option>
-							<option value="#settings-settings-logs-anchor">Logs</option>
-							<option value="#update-button">Updates</option>
-							<option value="#settings-settings-backup-anchor">Backup</option>
-							<option value="#settings-settings-donate-anchor">Donate</option>
-						</select>
-						<ul class="nav customtab2 nav-tabs hidden-xs" role="tablist">
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::About\')" role="presentation" class="active"><a id="settings-settings-about-anchor" href="#settings-settings-about" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-info-alt"></i></span><span class="hidden-xs" lang="en">About</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::Main\');loadSettingsPage2(\'api/v2/page/settings_settings_main\',\'#settings-settings-main\',\'Main Settings\');" role="presentation" class=""><a id="settings-settings-main-anchor" href="#settings-settings-main" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-settings"></i></span><span class="hidden-xs" lang="en">Main</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::SSO\');loadSettingsPage2(\'api/v2/page/settings_settings_sso\',\'#settings-settings-sso\',\'SSO\');" role="presentation" class=""><a id="settings-settings-sso-anchor" href="#settings-settings-sso" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-key"></i></span><span class="hidden-xs" lang="en">Single Sign-On</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::Logs\');loadSettingsPage2(\'api/v2/page/settings_settings_logs\',\'#settings-settings-logs\',\'Log Viewer\');" role="presentation" class=""><a id="settings-settings-logs-anchor" href="#settings-settings-logs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-receipt"></i></span><span class="hidden-xs" lang="en">Logs</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::Updates\')" role="presentation" class=""><a id="update-button" href="#settings-settings-updates" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-package"></i></span> <span class="hidden-xs" lang="en">Updates</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::Backup\');loadSettingsPage2(\'api/v2/page/settings_settings_backup\',\'#settings-settings-backup\',\'Backup\');" role="presentation" class=""><a id="settings-settings-backup-anchor" href="#settings-settings-backup" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-export"></i></span><span class="hidden-xs" lang="en">Backup</span></a>
-							</li>
-							<li onclick="changeSettingsMenu(\'Settings::System Settings::Donate\')" role="presentation" class=""><a id="settings-settings-donate-anchor" href="#settings-settings-donate" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-money"></i></span> <span class="hidden-xs" lang="en">Donate</span></a>
-							</li>
-						</ul>
+					' . $systemMenus['system_settings'] . '
 						<!-- Tab panes -->
 						<div class="tab-content">
 							<div role="tabpanel" class="tab-pane fade" id="settings-settings-main">

api/plugins/bookmark/settings.js

@@ -51,8 +51,18 @@ function bookmarkLaunch(){
 
 // TAB MANAGEMENT
 function bookmarkTabsLaunch(){
-	var menuList = `<li onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Tabs');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_tabs','#settings-tab-editor-tabs','Tab Editor');" role="presentation"><a id="settings-tab-editor-tabs-anchor" href="#settings-tab-editor-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Tabs</span></a></li>`;
-	$('#settings-main-tab-editor .nav-tabs').append(menuList);
+	var menuList = `<li class="bookmarkTabsMenu-added" onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Tabs');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_tabs','#settings-tab-editor-bookmark-tabs','Bookmark Tab Editor');" role="presentation"><a id="settings-tab-editor-bookmark-tabs-anchor" href="#settings-tab-editor-bookmark-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Tabs</span></a></li>`;
+	let menuListAlt = `<option value="#settings-tab-editor-bookmark-tabs-anchor" lang="en">Bookmark Tabs</option>`;
+	let div = `
+	<div role="tabpanel" class="tab-pane fade" id="settings-tab-editor-bookmark-tabs">
+		<h2 lang="en">Loading...</h2>
+	</div>
+	`;
+	if($('.bookmarkCategoryMenu-added').length === 0 ){
+		$('#settings-main-tab-editor .nav-tabs').append(menuList);
+		$('.settings-dropdown-box.tab-editor-menu').append(menuListAlt);
+		$('#settings-main-tab-editor .tab-content').append(div);
+	}
 }
 
 function getColorPickerOptionsWithCallback(func){
@@ -68,7 +78,7 @@ function buildBookmarkTabEditor(){
 			organizrCatchError(e,data);
 		}
 		$('#bookmarkTabEditorTable').html(buildBookmarkTabEditorItem(response.data));
-		
+
 		// initialize color pickers only first time
 		if(!colorPickerInitialized){
 			$("input.bookmark-pick-a-color").ColorPickerSliders({
@@ -77,7 +87,7 @@ function buildBookmarkTabEditor(){
 				hsvpanel: true,
 				previewformat: 'hex',
 				flat: true,
-				onchange: function(container, color){ 
+				onchange: function(container, color){
 					generatePreviewBookmarkNewTab();
 					generatePreviewBookmarkEditTab();
 				}
@@ -473,8 +483,19 @@ $(document).on('input', "#edit-bookmark-tab-form-inputTextColor", generatePrevie
 
 // CATEGORY MANAGEMENT
 function bookmarkCategoriesLaunch(){
-	var menuList = `<li onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Categories');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_categories','#settings-tab-editor-tabs','Tab Editor');" role="presentation"><a id="settings-tab-editor-tabs-anchor" href="#settings-tab-editor-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Categories</span></a></li>`;
-	$('#settings-main-tab-editor .nav-tabs').append(menuList);
+	var menuList = `<li class="bookmarkCategoryMenu-added" onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Categories');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_categories','#settings-tab-editor-bookmark-categories','Bookmark Category Editor');" role="presentation"><a id="settings-tab-editor-bookmark-categories-anchor" href="#settings-tab-editor-bookmark-categories" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Categories</span></a></li>`;
+	let menuListAlt = `<option value="#settings-tab-editor-bookmark-categories-anchor" lang="en">Bookmark Categories</option>`;
+	let div = `
+	<div role="tabpanel" class="tab-pane fade" id="settings-tab-editor-bookmark-categories">
+		<h2 lang="en">Loading...</h2>
+	</div>
+	`;
+	if($('.bookmarkCategoryMenu-added').length === 0 ){
+		$('#settings-main-tab-editor .nav-tabs').append(menuList);
+		$('.settings-dropdown-box.tab-editor-menu').append(menuListAlt);
+		$('#settings-main-tab-editor .tab-content').append(div);
+	}
+
 }
 
 function buildBookmarkCategoryEditor(){
@@ -653,4 +674,4 @@ function submitBookmarkCategoryOrder(){
 	}).fail(function(xhr) {
 		OrganizrApiError(xhr, 'Update Error');
 	});
-}
+}

js/custom.js

@@ -1886,5 +1886,10 @@ $(document).on('change', '[id*=-form-chooseI]', function (e) {
 $(document).on("change", ".settings-dropdown-box", function () {
 	let id = $(this).val();
 	$(id).click();
-	console.log(id);
+});
+$(document).on('click', '.nav-non-mobile li a', function() {
+	let id = $(this).attr('id');
+	let menu = $(this).parent().parent().attr('data-dropdown');
+	$('.' + menu).val('#' + id);
+
 });

js/functions.js

@@ -1212,12 +1212,17 @@ function buildPluginsItem(array){
 	activePlugins = (activePlugins.length !== 0) ? activePlugins : '<h2 class="text-center" lang="en">Nothing Active</h2>';
 	inactivePlugins = (inactivePlugins.length !== 0) ? inactivePlugins : '<h2 class="text-center" lang="en">Everything Active</h2>';
 	var panes = `
-	<ul class="nav customtab2 nav-tabs" role="tablist">
-		<li onclick="changeSettingsMenu('Settings::Plugins::Active')" role="presentation" class="active"><a href="#settings-plugins-active" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-file"></i></span><span class="hidden-xs" lang="en">Active</span></a>
+	<select class="form-control settings-dropdown-box plugin-menu w-100 visible-xs">
+		<option value="#settings-plugins-active-anchor" lang="en">Active</option>
+		<option value="#settings-plugins-inactive-anchor" lang="en">Inactive</option>
+		<option value="#settings-plugins-marketplace-anchor" lang="en">Marketplace</option>
+	</select>
+	<ul class="nav customtab2 nav-tabs nav-non-mobile hidden-xs" data-dropdown="plugin-menu" role="tablist">
+		<li onclick="changeSettingsMenu('Settings::Plugins::Active')" role="presentation" class="active"><a id="settings-plugins-active-anchor" href="#settings-plugins-active" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-file"></i></span><span class="hidden-xs" lang="en">Active</span></a>
 		</li>
-		<li onclick="changeSettingsMenu('Settings::Plugins::Inactive')" role="presentation" class=""><a href="#settings-plugins-inactive" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-zip"></i></span><span class="hidden-xs" lang="en">Inactive</span></a>
+		<li onclick="changeSettingsMenu('Settings::Plugins::Inactive')" role="presentation" class=""><a id="settings-plugins-inactive-anchor" href="#settings-plugins-inactive" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-zip"></i></span><span class="hidden-xs" lang="en">Inactive</span></a>
 		</li>
-		<li onclick="changeSettingsMenu('Settings::Plugins::Marketplace');loadMarketplace('plugins');" role="presentation" class=""><a href="#settings-plugins-marketplace" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-shopping-cart-full"></i></span><span class="hidden-xs" lang="en">Marketplace</span></a>
+		<li onclick="changeSettingsMenu('Settings::Plugins::Marketplace');loadMarketplace('plugins');" role="presentation" class=""><a id="settings-plugins-marketplace-anchor" href="#settings-plugins-marketplace" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-shopping-cart-full"></i></span><span class="hidden-xs" lang="en">Marketplace</span></a>
 		</li>
 	</ul>
 	<!-- Tab panes -->
@@ -1793,15 +1798,15 @@ function buildHomepageItem(array){
 		$.each(array, function(i,v) {
 			if(v.enabled){
 				listing += `
-				<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
+				<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
 					<div class="white-box bg-org m-0">
 						<div class="el-card-item p-0 editHomepageItemBox-`+v.name+`">
 							<div class="el-card-avatar el-overlay-1">
 								<a onclick="editHomepageItem('`+v.name+`')"><img class="lazyload tabImages mouse" data-src="`+v.image+`"></a>
 							</div>
 							<div class="el-card-content">
-								<h3 class="box-title">`+v.name+`</h3>
-								<small class="elip text-uppercase">`+v.category+`</small><br>
+								<h3 class="box-title elip">`+v.name+`</h3>
+								<small class="elip text-uppercase elip">`+v.category+`</small><br>
 							</div>
 						</div>
 					</div>
@@ -10013,7 +10018,7 @@ function clickPath(type,path=null){
             break;
         case 'update':
             $('#settings-main-system-settings-anchor').trigger('click');
-            $('#update-button').trigger('click');
+            $('#settings-settings-updates-anchor').trigger('click');
             break;
         case 'sso':
             $('#settings-main-system-settings-anchor').trigger('click');