dbxe
/
fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menu - Split longer submenus into two columns of items.

This commit is contained in:
fusionate 2023-10-17 00:27:59 +00:00
parent 694d701757
commit dd1ba159ab
No known key found for this signature in database
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/classes/menu.php
View File

@ -1004,7 +1004,7 @@ if (!class_exists('menu')) {
else { else {
$menu_main_icon = null; $menu_main_icon = null;
} }
$menu_main_item = "<span class='d-sm-none d-md-none d-lg-inline' style='margin-left: 5px;'>".$menu_parent['menu_language_title']."</span>\n"; $menu_main_item = " <span class='d-sm-none d-md-none d-lg-inline' style='margin-left: 5px;'>".$menu_parent['menu_language_title']."</span>\n";
} }
else { else {
$menu_main_item = $menu_parent['menu_language_title']; $menu_main_item = $menu_parent['menu_language_title'];
@ -1014,7 +1014,15 @@ if (!class_exists('menu')) {
$html .= " ".$menu_main_icon.$menu_main_item; $html .= " ".$menu_main_icon.$menu_main_item;
$html .= " </a>\n"; $html .= " </a>\n";
if ($submenu) { if ($submenu) {
$html .= " <ul class='dropdown-menu'>\n"; $columns = @sizeof($menu_parent['menu_items']) > 20 ? 2 : 1;
$column_current = 1;
$mod_ul = $columns > 1 ? 'multi-column' : null;
$html .= " <ul class='dropdown-menu ".$mod_ul."'>\n";
if ($columns > 1) {
$html .= " <div class='row'>\n";
$html .= " <div class='col-12 col-sm-6 pr-sm-0'>\n";
$html .= " <ul class='multi-column-dropdown'>\n";
}
foreach ($menu_parent['menu_items'] as $index_sub => $menu_sub) { foreach ($menu_parent['menu_items'] as $index_sub => $menu_sub) {
$mod_a_2 = $menu_sub['menu_item_link']; $mod_a_2 = $menu_sub['menu_item_link'];
if ($mod_a_2 == '') { if ($mod_a_2 == '') {
@ -1030,7 +1038,20 @@ if (!class_exists('menu')) {
$menu_sub_icon = null; $menu_sub_icon = null;
} }
} }
$html .= " <li class='nav-item'><a class='nav-link' href='".$mod_a_2."' ".$mod_a_3.">".($_SESSION['theme']['menu_sub_icons'] ? "<span class='fas fa-bar d-inline-block d-sm-none float-left' style='margin: 4px 10px 0 25px;'></span>" : null).escape($menu_sub['menu_language_title']).$menu_sub_icon."</a></li>\n"; $html .= " <li class='nav-item'><a class='nav-link' href='".$mod_a_2."' ".$mod_a_3.">".($_SESSION['theme']['menu_sub_icons']['boolean'] != 'false' ? "<span class='fas fa-bar d-inline-block d-sm-none float-left' style='margin: 4px 10px 0 25px;'></span>" : null).escape($menu_sub['menu_language_title']).$menu_sub_icon."</a></li>\n";
if ($columns > 1 && $column_current == 1 && ($index_sub+1) > (ceil(@sizeof($menu_parent['menu_items'])/2)-1)) {
$html .= " </ul>\n";
$html .= " </div>\n";
$html .= " <div class='col-12 col-sm-6 pl-sm-0'>\n";
$html .= " <ul class='multi-column-dropdown'>\n";
$column_current = 2;
}
}
if ($columns > 1) {
$html .= " </ul>\n";
$html .= " </div>\n";
$html .= " </div>\n";
} }
$html .= " </ul>\n"; $html .= " </ul>\n";
} }

20
themes/default/css.php
View File

@ -619,8 +619,16 @@ else { //default: white
<?php unset($br); ?> <?php unset($br); ?>
} }
/* sub menu container (multiple columns) */
@media(min-width: 576px) {
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column {
width: 330px;
}
}
/* sub menu item */ /* sub menu item */
ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link { ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link,
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link {
font-family: <?=$menu_sub_text_font?>; font-family: <?=$menu_sub_text_font?>;
color: <?=$menu_sub_text_color?>; color: <?=$menu_sub_text_color?>;
font-size: <?=$menu_sub_text_size?>; font-size: <?=$menu_sub_text_size?>;
@ -628,9 +636,17 @@ else { //default: white
padding: 3px 14px !important; padding: 3px 14px !important;
} }
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown {
list-style-type: none;
padding-left: 0;
}
ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:hover, ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:hover,
ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:focus, ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:focus,
ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:active { ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:active,
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:hover,
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:focus,
ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:active {
color: <?=$menu_sub_text_color_hover?>; color: <?=$menu_sub_text_color_hover?>;
background: <?=$menu_sub_background_color_hover?>; background: <?=$menu_sub_background_color_hover?>;
outline: none; outline: none;