mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-08-02 12:48:26 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
camer0n
2025-01-22 17:26:51 -08:00
parent a7d03baa8d
commit b4907e53ff
4 changed files with 144 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
e107_core/templates/admin_template.php
View File

@@ -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.'" >
{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}" >
<a class="dropdown-toggle" title="'.ADLAN_53.'" role="button" data-toggle="dropdown" data-target="#" href="{LINK_URL}" >{LINK_IMAGE} {LINK_TEXT}
<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="navbar-collapse collapse">
{ADMIN_NAVIGATION=no-main}
{ADMIN_NAVIGATION=enav_popover}
<div>
<div class="hidenavbig">
{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">

167
e107_themes/bootstrap3/admin_style.css
View File

@@ -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%; }
ul.nav-admin .dropdown-menu { position: static }
ul.nav-admin > li { display:inline-block; width:calc(14.285% - 15px) ; margin-bottom:0; margin-right:15px; text-align:center }
ul.nav-admin > li > a { border:1px solid silver; margin-top:15px; width:100%; height:110px; }
.navbar-collapse ul.nav-admin > li > a:after { content: attr(title) !important; font-size:105%; display:block; padding-top:0px; padding-bottom:10px; }
.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.active > a, .navbar-nav > li > a:hover { border-left-color: inherit; }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
color: #fff;
text-decoration: none;
outline: 0;
background-color: transparent;
}
.navbar-nav>li>a:hover{
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-nav .open .dropdown-menu { width: calc(200% + 45px) !important; float:left; margin-left:-5px; margin-right:-5px; background-color: black;}
.navbar-nav .open .dropdown-menu { position: absolute; }
.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 {
float: right !important;
margin-right: 0px;
}
/*
@media only screen and (min-width : 768px) {
.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;
.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.col-lg-2 { width: 12%}
.col-lg-10 { width: 88%}
.navbar-nav > li {
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;
}
}

2
e107_themes/bootstrap3/css/bootstrap-dark.min.css vendored
View File

@@ -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}

3
e107_themes/bootstrap3/css/modern-dark.css
View File

@@ -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}
.navbar-right .dropdown-menu-left{left:0;right:auto}
@media (min-width:768px){
}
.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}
.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}