feat: Refactor mobile navigation styles for improved layout and responsiveness
This commit is contained in:
+16
-29
@@ -711,31 +711,25 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-mobile-arranged .navbar-collapse {
|
@media (max-width: 520px) {
|
||||||
display: block;
|
.function-search-form {
|
||||||
}
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-mobile-arranged .navbar-nav {
|
.function-search-input,
|
||||||
flex-direction: column;
|
.function-search-btn,
|
||||||
}
|
.user-menu-btn,
|
||||||
|
.module-selector-bar .module-tab {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body.nav-mobile-tight .function-search-form {
|
.module-selector-bar .module-tabs {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.nav-mobile-tight .function-search-input,
|
.navbar-text {
|
||||||
body.nav-mobile-tight .function-search-btn,
|
font-size: 0.88rem;
|
||||||
body.nav-mobile-tight .user-menu-btn,
|
}
|
||||||
body.nav-mobile-tight .module-selector-bar .module-tab {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.nav-mobile-tight .module-selector-bar .module-tabs {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.nav-mobile-tight .navbar-text {
|
|
||||||
font-size: 0.88rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1468,13 +1462,6 @@
|
|||||||
if (!navRoot || !navContainer) return;
|
if (!navRoot || !navContainer) return;
|
||||||
const width = navContainer.clientWidth || window.innerWidth;
|
const width = navContainer.clientWidth || window.innerWidth;
|
||||||
navRoot.classList.remove('nav-compact', 'nav-ultra-compact');
|
navRoot.classList.remove('nav-compact', 'nav-ultra-compact');
|
||||||
navRoot.classList.toggle('nav-mobile-arranged', window.innerWidth < 992);
|
|
||||||
navRoot.classList.toggle('nav-mobile-tight', window.innerWidth < 520);
|
|
||||||
|
|
||||||
if (document.body) {
|
|
||||||
document.body.classList.toggle('nav-mobile-arranged', window.innerWidth < 992);
|
|
||||||
document.body.classList.toggle('nav-mobile-tight', window.innerWidth < 520);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.innerWidth < 992) {
|
if (window.innerWidth < 992) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user