Fix dropdown menu styling: no rounded corners, no gaps, consistent hover
- border-radius: 0 on all dropdown-menu and dropdown-item - padding: 0 and margin: 0 on dropdown-menu - margin-left: 0 on submenu (no gap between parent and child) - margin-top: -1px on submenu (seamless border overlap) - CSS hover opens submenu on desktop, click on mobile - white-space: nowrap on dropdown items - Fix statistics getFullStats -> getStats - Fix Twig ?? operator -> default filter on dashboard/statistics - Asset server (public/asset.php) for production static file serving - .htaccess rewrite rules for themes/admin/plugins assets
This commit is contained in:
@@ -71,15 +71,22 @@
|
||||
.dropdown-menu {
|
||||
background-color: var(--header-bg) !important;
|
||||
border: 1px solid var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none !important;
|
||||
@@ -287,6 +294,50 @@ pre code {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-toggle {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
|
||||
float: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.dropdown-menu .dropdown-item {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 1rem;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-submenu.show > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: #e8e8e8;
|
||||
padding: 0.15rem 0.4rem;
|
||||
|
||||
@@ -71,15 +71,22 @@
|
||||
.dropdown-menu {
|
||||
background-color: var(--header-bg) !important;
|
||||
border: 1px solid var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none !important;
|
||||
@@ -287,6 +294,50 @@ pre code {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-toggle {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
|
||||
float: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.dropdown-menu .dropdown-item {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 1rem;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-submenu.show > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: #e8e8e8;
|
||||
padding: 0.15rem 0.4rem;
|
||||
|
||||
@@ -93,34 +93,41 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
});
|
||||
|
||||
// Handle nested dropdowns for touch devices using event delegation
|
||||
// Handle nested dropdowns — toggle submenu on click (for mobile/touch)
|
||||
// On desktop, CSS hover handles submenu display
|
||||
document.addEventListener('click', function(e) {
|
||||
const toggle = e.target.closest('.dropdown-submenu .dropdown-toggle');
|
||||
const toggle = e.target.closest('.dropdown-submenu > .dropdown-toggle');
|
||||
|
||||
if (toggle) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const submenu = toggle.closest('.dropdown-submenu');
|
||||
const submenu = toggle.parentElement;
|
||||
const dropdown = submenu.querySelector('.dropdown-menu');
|
||||
|
||||
// Close other submenus at the same level
|
||||
// Close other open submenus at the same level
|
||||
const parent = submenu.parentElement;
|
||||
parent.querySelectorAll('.dropdown-submenu').forEach(function(sibling) {
|
||||
parent.querySelectorAll(':scope > .dropdown-submenu').forEach(function(sibling) {
|
||||
if (sibling !== submenu) {
|
||||
sibling.classList.remove('show');
|
||||
var siblingMenu = sibling.querySelector('.dropdown-menu');
|
||||
if (siblingMenu) siblingMenu.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current submenu
|
||||
if (dropdown) dropdown.classList.toggle('show');
|
||||
if (dropdown) {
|
||||
dropdown.classList.toggle('show');
|
||||
submenu.classList.toggle('show');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Close all open submenus when clicking outside
|
||||
document.querySelectorAll('.dropdown-submenu .dropdown-menu.show').forEach(function(menu) {
|
||||
menu.classList.remove('show');
|
||||
document.querySelectorAll('.dropdown-submenu.show').forEach(function(sm) {
|
||||
sm.classList.remove('show');
|
||||
var menu = sm.querySelector('.dropdown-menu');
|
||||
if (menu) menu.classList.remove('show');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -110,17 +110,27 @@ $header-bg-opacity: 1;
|
||||
.dropdown-menu {
|
||||
background-color: var(--header-bg) !important;
|
||||
border: 1px solid var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove Bootstrap dropdown border/spacing on nav-tabs dropdown
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
// Hide Bootstrap dropdown arrow and use custom icon
|
||||
.dropdown-toggle::after {
|
||||
display: none !important;
|
||||
@@ -287,6 +297,61 @@ $header-bg-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
> .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Open submenu on hover (desktop)
|
||||
&:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Keep parent highlighted when hovering submenu
|
||||
&:hover > .dropdown-toggle {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
// Arrow pointing right
|
||||
> .dropdown-toggle .bi-chevron-right {
|
||||
float: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure dropdown items fill width and no gaps
|
||||
.dropdown-menu .dropdown-item {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Mobile: submenu appears below instead of beside, open on tap
|
||||
@media (max-width: 767.98px) {
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 1rem;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-submenu.show > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar styling
|
||||
.sidebar-column {
|
||||
background-color: var(--sidebar-bg) !important;
|
||||
|
||||
Reference in New Issue
Block a user