Skip to content

Commit

Permalink
Closes #5406 - Mobile navigation improvements, with thanks to @Alex-e…
Browse files Browse the repository at this point in the history 
…107nl
  • Loading branch information
@CaMer0n
CaMer0n committed Jan 23, 2025
1 parent a7d03ba commit b4907e5
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 61 deletions.
30 changes: 20 additions & 10 deletions e107_core/templates/admin_template.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">';
Expand All @@ -27,7 +26,7 @@
<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>
Expand All @@ -39,7 +38,7 @@
<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>
Expand All @@ -51,13 +50,13 @@
// 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}" >
<b class="caret"></b>
</a>
<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
Expand Down Expand Up @@ -195,11 +194,21 @@
<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 class="hidenavbig">
{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 class="navbar-collapse collapse">
{ADMIN_NAVIGATION=no-main}
{ADMIN_NAVIGATION=enav_popover}
<div>
<div class="hidenavsmall">
{ADMIN_NAVIGATION=enav_logout}
{ADMIN_NAVIGATION=enav_language}
{ADMIN_NAVIGATION=enav_home}
Expand All @@ -208,8 +217,9 @@
{ADMIN_DEBUG}
{ADMIN_NOTIFICATIONS}
{ADMIN_UPDATE}
</div>
</div>
</div>
</div>
</div>
<div class="admin-container container-fluid">
Expand Down
163 changes: 115 additions & 48 deletions e107_themes/bootstrap3/admin_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1984,24 +1984,45 @@ 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);
}
.navbar-collapse.collapse {
display: none!important;
}

.hidenavsmall {
display: none!important;
}

.hidenavbig {
display: block!important;
}
/*
.navbar-nav {
float: none!important;
Expand All @@ -2027,66 +2048,112 @@ div.admin-left-panel-collapsed .nav-pills > li > a > span > i { opacity: 1 }
overflow: hidden!important;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .pre-scrollable {
max-height: 480px;
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .pre-scrollable {
max-height: 680px;
}
.nav-admin.navbar-left li a {
padding-left: 16px;
padding-right: 13px;

}

.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;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
color: #fff;
text-decoration: none;
outline: 0;
background-color: transparent;
}

/* Nav Buttons */

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; }
.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;
}

}
.navbar-right .dropdown-menu {
left: auto;
right: 0;
}

/*
.navbar-nav > li {
float: left;
}

@media only screen and (min-width : 768px) {
.is-table-row {
display: table;
width: 100%;
margin:0;
#searchquery {
float: left;
width: 35%;
}

}
.is-table-row > .admin-right-panel, .is-table-row > .admin-left-panel{
float: none;
display: table-cell;
vertical-align: top;
#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;
}
.admin-left-panel {
background-color: #303030;
!*margin-top: -37px;*!
padding-right: 0;
padding-left: 0;
background:#3c3c3c;

.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);
}

.col-lg-2 { width: 12%}
.col-lg-10 { width: 88%}
.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 changes: 1 addition & 1 deletion e107_themes/bootstrap3/css/bootstrap-dark.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 1 addition & 2 deletions e107_themes/bootstrap3/css/modern-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit b4907e5

Please sign in to comment.