MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Convert sidebar modules to accordion on mobile

Browse Source 
On screens < 992px, sidebar-left and sidebar-right card modules
are transformed into Bootstrap accordion items via JS. Card headers
become collapsible toggles, card bodies collapse. On desktop resize
the accordion reverts to normal cards.

CSS scoped to mobile breakpoint styles the accordion buttons and
removes card borders for a clean stacked look.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-04 15:53:47 -05:00
parent 1abdd9a253
commit b637b78a4d
2 changed files with 126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/media/css/template.css
View File

@@ -15844,6 +15844,39 @@ body:not(.has-sidebar-right) .site-grid .container-component {
grid-area: side-r;
}
/* Sidebar accordion on mobile */
@media (max-width: 991.98px) {
.container-sidebar-left.accordion .card,
.container-sidebar-right.accordion .card {
border: none;
border-bottom: 1px solid var(--border-color, #dee2e6);
border-radius: 0;
}
.container-sidebar-left.accordion .card-header,
.container-sidebar-right.accordion .card-header {
padding: 0;
background: none;
border: none;
}
.container-sidebar-left.accordion .accordion-button,
.container-sidebar-right.accordion .accordion-button {
padding: .75rem 1rem;
font-weight: 600;
font-size: .95rem;
background: var(--bs-body-bg, #fff);
color: var(--body-font-color, #444);
}
.container-sidebar-left.accordion .accordion-button:not(.collapsed),
.container-sidebar-right.accordion .accordion-button:not(.collapsed) {
background: var(--bs-body-bg, #fff);
color: var(--link-color, #3565e5);
box-shadow: none;
}
}
.container-main-top {
grid-area: main-t;
}