Closes #5406 - Mobile navigation improvements, with thanks to @Alex-e107nl

e107_core/templates/admin_template.php

@@ -18,7 +18,6 @@
 if (!defined('e107_INIT')) { exit(); }
 
 
-
 $ADMIN_TEMPLATE['nav']['start'] = '<ul class="nav nav-admin navbar-nav navbar-left">';
 
 $ADMIN_TEMPLATE['nav']['start_other'] = '<ul class="nav nav-admin navbar-nav navbar-right">';
@@ -27,7 +26,7 @@ $ADMIN_TEMPLATE['nav']['button'] = '
 	<li class="dropdown">
 		<a class="dropdown-toggle navbar-admin-button"  role="button" data-toggle="dropdown" data-target="#" href="{LINK_URL}" title="{LINK_DESCRIPTION}">
 		 {LINK_IMAGE}
-		{LINK_TEXT}
+		<span class="hidenavsmall">{LINK_TEXT}</span>
 		</a> 
 		{SUB_MENU}
 	</li>
@@ -39,7 +38,7 @@ $ADMIN_TEMPLATE['nav']['button_active'] = '
 	<li class="dropdown active">
 		<a class="dropdown-toggle navbar-admin-button"  role="button" data-toggle="dropdown" data-target="#" href="{LINK_URL}" title="{LINK_DESCRIPTION}">
 		{LINK_IMAGE}
-		{LINK_TEXT}
+		<span class="hidenavsmall">{LINK_TEXT}</span>
 		</a>
 		{SUB_MENU}
 	</li>
@@ -51,13 +50,13 @@ $ADMIN_TEMPLATE['nav']['button_active'] = '
 // Leave Admin Area. 
 $ADMIN_TEMPLATE['nav']['button_enav_home'] = '
 	<li class="dropdown admin-nav-home">
-		<a class="dropdown-toggle nav-home-main" title="'.ADLAN_53.'" href="'.e_HTTP.'" >
+		<a class="dropdown-toggle" title="'.ADLAN_53.'" role="button" data-toggle="dropdown" data-target="#" href="{LINK_URL}" >{LINK_IMAGE} {LINK_TEXT} 
-		 {LINK_IMAGE} {LINK_TEXT} 
+		 
-		 </a><a class="dropdown-toggle nav-home-caret" title="'.ADLAN_53.'" role="button" data-toggle="dropdown" data-target="#" href="{LINK_URL}" >
 		<b class="caret"></b>
 		</a> 
 		{SUB_MENU}
 	</li>
+
 ';
 
 // Change Language
@@ -195,11 +194,7 @@ $ADMIN_TEMPLATE['header'] =  '
 			<a class="brand navbar-brand" href="'.e_ADMIN_ABS.'admin.php" title="'.LAN_RETURN_TO_FRONT_PANEL.'">
 				<img class="admin-logo" src="'.e_THEME_ABS.'bootstrap3/images/logo.webp" alt="e107"  />
 			</a>
-		</div>
+			<div class="hidenavbig">
-		<div class="navbar-collapse collapse">
-			{ADMIN_NAVIGATION=no-main}
-			{ADMIN_NAVIGATION=enav_popover}
-			<div>
 				{ADMIN_NAVIGATION=enav_logout}
 				{ADMIN_NAVIGATION=enav_language}
 				{ADMIN_NAVIGATION=enav_home}
@@ -210,6 +205,21 @@ $ADMIN_TEMPLATE['header'] =  '
 				{ADMIN_UPDATE}
 			</div>
 		</div>
+		<div class="navbar-collapse collapse">
+			{ADMIN_NAVIGATION=no-main}
+			{ADMIN_NAVIGATION=enav_popover}
+				<div class="hidenavsmall">
+				{ADMIN_NAVIGATION=enav_logout}
+				{ADMIN_NAVIGATION=enav_language}
+				{ADMIN_NAVIGATION=enav_home}
+				{ADMIN_MULTISITE}
+				{ADMIN_PM}
+				{ADMIN_DEBUG}
+				{ADMIN_NOTIFICATIONS}
+				{ADMIN_UPDATE}
+				</div>
+		</div>
+		
 	</div>
 </div>
 <div class="admin-container container-fluid">

e107_themes/bootstrap3/admin_style.css

@@ -1984,16 +1984,31 @@ div.admin-left-panel-collapsed .nav-pills > li > a > span > i { opacity: 1 }
 /* ul.navbar-nav.navbar-left > li > a > i { display:none; } */
 
 }
+.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
+  line-height: 0;
+
+}
 
 
 
+.navbar-nav {
+	border-right: 0px solid #393939;
+}
+
+
+.hidenavbig {
+		display: none!important;
+		}
+
 @media (max-width: 1100px) {
 	.navbar-header {
 		float: none;
+		width: calc(100vw); /* Prevent a wide screen from hiding the navigation */
 		}
 	.navbar-toggle {
 		display: block;
 		}
+	
 	.navbar-collapse {
 		border-top: 1px solid transparent;
 		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
@@ -2001,7 +2016,13 @@ div.admin-left-panel-collapsed .nav-pills > li > a > span > i { opacity: 1 }
 	.navbar-collapse.collapse {
 		display: none!important;
 		}
+	.hidenavsmall {
+		display: none!important;
+		}
 		
+	.hidenavbig {
+		display: block!important;
+		}
     /*
 	.navbar-nav {
 		float: none!important;
@@ -2028,65 +2049,111 @@ div.admin-left-panel-collapsed .nav-pills > li > a > span > i { opacity: 1 }
 		}
 
 	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .pre-scrollable 	 {
-		max-height: 480px;
+		max-height: 680px;
+		}
+	.nav-admin.navbar-left li a {
+		padding-left: 16px;
+		padding-right: 13px;
+		
 		}
 			
-    /* Nav Buttons */
+	.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
+		color: #fff;
+		background-color: #393939;
+		}
 		
-    ul.nav-admin { margin:0; padding:0; width:100%; }
+	.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
-     ul.nav-admin .dropdown-menu { position: static }
+		color: #fff;
-    ul.nav-admin > li { display:inline-block; width:calc(14.285% - 15px) ; margin-bottom:0; margin-right:15px; text-align:center  }
+		text-decoration: none;
-    ul.nav-admin > li > a {  border:1px solid silver; margin-top:15px; width:100%; height:110px; }
+		outline: 0;
-    .navbar-collapse  ul.nav-admin > li > a:after { content: attr(title) !important; font-size:105%; display:block; padding-top:0px; padding-bottom:10px;    }
+		background-color: transparent;
-    .navbar-collapse ul.nav-admin > li > a i { font-size: 300% !important; text-align:center; margin-bottom:10px }
+		}
-    #e-admin-core-update { display: none }
+
-     ul.nav.nav-admin.navbar-nav.navbar-left li.dropdown.open ul.dropdown-menu li a { font-size:120%; padding:5px; }
+	.navbar-nav>li>a:hover{
-    .navbar-nav > li.active > a, .navbar-nav > li > a:hover {  border-left-color: inherit; }
+		background-image:-webkit-linear-gradient(#393939,#393939 40%,#393939);background-image:-o-linear-gradient(#393939,#393939 40%,#393939);background-image:linear-gradient(#393939,#393939 40%,#393939);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff000000', GradientType=0);filter:none
+		}
+	
+	.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
+		background-color: #393939;
+		color: #fff;
+		}
 
-    ul.navbar-right { display:inline-block;   float:none !important; width:calc(14.285% - 15px);  margin-right:10px; margin-bottom:30px}
-    ul.navbar-right > li { display:inline-block; width: 100%; float:left; width:100%; }
-    .navbar-collapse  ul.nav-admin.navbar-right > li > a { height:100px; display:inline-block; width:100%;  }
-    .navbar-collapse  ul.nav-admin.navbar-right > li > a::after {content: '' !important;     }
 }
 
 @media only screen and (max-width : 768px) {
-    ul.nav-admin > li { display:inline-block; width:calc(50% - 18px) ; width: 100;}
+ .navbar-right {
-    .navbar-nav .open .dropdown-menu { width: calc(200% + 45px) !important; float:left; margin-left:-5px; margin-right:-5px; background-color: black;}
+    float: right !important;
-    .navbar-nav .open .dropdown-menu { position: absolute;  }
+    margin-right: 0px;
-    .navbar-nav .open .dropdown-menu > li { width: calc(33% - 10px) !important; float:left; border:1px solid silver; margin:5px}
-    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .pre-scrollable {  max-height: 1000px; }
-    ul.navbar-right {  width:calc(50% - 18px) ; float: left !important; margin-bottom:0; margin-right: 10px !important;}
-     ul.navbar-right li { width: 100% }
-     .navbar-collapse.collapse.in div { display:inline-block; width:100%;  padding-bottom:30px }
-
   }
 
-/*
+  .navbar-right .dropdown-menu {
-
+    left: auto;
-@media only screen and (min-width : 768px) {
+    right: 0;
-    .is-table-row {
-        display: table;
-        width: 100%;
-       margin:0;
-
-    }
-    .is-table-row > .admin-right-panel, .is-table-row > .admin-left-panel{
-        float: none;
-        display: table-cell;
-       vertical-align: top;
-
-    }
-}
-.admin-left-panel {
-background-color: #303030;
-!*margin-top: -37px;*!
-padding-right: 0;
-padding-left: 0;
-background:#3c3c3c;
-
   }
 
-.col-lg-2 { width: 12%}
+  .navbar-nav > li {
-.col-lg-10 { width: 88%}
+    float: left;
+  }
 
-*/
+#searchquery {
+float: left;
+width: 35%;
+}
+
+#filter-options {
+ float: left !important;
+}
+
+#admin-ui-list-search::before {
+ display: none; /* TODO FIX my position */
+}
+
+#admin-ui-list-total-records {
+  padding-top: 25px;
+  text-align: center;
+}
+
+   .navbar-nav .open .dropdown-menu {
+    position: fixed;
+    top:100px;
+    left:0;
+    right: auto;
+    width: calc(100vw);
+    background-color: #212121;
+    border: 0;
+    box-shadow: inherit;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+
+    height: calc(100vh - 105px);
+    overflow-y: scroll;
+	padding-bottom:15px;
+  }
+
+span.e-toggle-sidebar.close { display:none; }
+
+.form-control.select.filter { width:100px }
+
+.navbar-nav .open .dropdown-menu > li > a { padding-top: 10px; padding-bottom: 10px; }
+
+  .nav ul.dropdown-menu.oversized {
+  width: calc(100vw);
+}
+
+.nav ul.dropdown-menu.oversized li          { width: 50%; float:left; }
+
+	.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
+    margin-right: -15px;
+    margin-left: -15x;
+  }
+  
+	.navbar-collapse.in {
+	overflow-y: visible;
+  }
+  
+	.nav-admin.navbar-left li a {
+	padding-left: 16px;
+	padding-right: 13px;
+  }
+
+
+}

e107_themes/bootstrap3/css/bootstrap-dark.min.css

@@ -1430,7 +1430,7 @@ td.visible-print,th.visible-print{display:table-cell!important}
 .navbar-inverse .badge{background-color:#080808}
 .navbar-nav>li>a{border-right:1px solid rgba(0,0,0,.2);border-left:1px solid rgba(255,255,255,.1)}
 .navbar-nav>li.active>a,.navbar-nav>li>a:hover{border-left-color:transparent}
-.navbar-nav>li>a:hover{background-image:-webkit-linear-gradient(#000,#000 40%,#000);background-image:-o-linear-gradient(#000,#000 40%,#000);background-image:linear-gradient(#000,#000 40%,#000);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff000000', GradientType=0);filter:none}
+
 .navbar .nav .open>a{border-color:transparent}
 .navbar-form{margin-left:5px;margin-right:5px}
 .plupload_button,button.button,input.button{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 12px;font-size:16px;line-height:1.42857143;border-radius:4px;user-select:none}

e107_themes/bootstrap3/css/modern-dark.css

@@ -842,8 +842,7 @@ tbody.collapse.in{display:table-row-group}
 .pull-right>.dropdown-menu{right:0;left:auto}
 .dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9;content:""}
 .dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}
-@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}
+@media (min-width:768px){
-.navbar-right .dropdown-menu-left{left:0;right:auto}
 }
 .btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}
 .btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}