adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-08-12 03:32:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): user-configurable sidebar breakpoint width

Browse Source 
The threshold above which the channel/DM list shows as a sidebar (vs.
collapsing to a top dropdown) is now user-configurable in
Settings -> Interface -> Layout. Persisted per device in LocalStorage
(key: mc-webui-sidebar-breakpoint, default: 992px, range: 600-2000).

Implementation: replaced hardcoded `@media (min-width: 992px)` with a
`.layout-wide` class on <html>, toggled by JS based on window.innerWidth
vs. the user's breakpoint. An inline script in <head> applies the class
synchronously to prevent layout flash on page load (same pattern as theme).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-05-06 21:35:56 +02:00
parent cf5e95579c
commit 927fc518f0
3 changed files with 112 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+15 -19
View File
@@ -130,14 +130,12 @@ main {
flex-shrink: 0;
}
/* Show sidebar and hide dropdown on wide screens */
@media (min-width: 992px) {
.channel-sidebar {
display: flex;
}
#channelSelectorWrapper {
display: none !important;
}
/* Show sidebar and hide dropdown on wide screens (toggled by JS via .layout-wide on <html>) */
.layout-wide .channel-sidebar {
display: flex;
}
.layout-wide #channelSelectorWrapper {
display: none !important;
}
/* Channel Selector Dropdown (base.html navbar, narrow screens) */
@@ -266,17 +264,15 @@ main {
flex-shrink: 0;
}
/* Show DM sidebar and hide mobile selector on wide screens */
@media (min-width: 992px) {
.dm-sidebar {
display: flex;
}
.dm-mobile-selector {
display: none !important;
}
.dm-desktop-header {
display: block !important;
}
/* Show DM sidebar and hide mobile selector on wide screens (toggled by JS via .layout-wide on <html>) */
.layout-wide .dm-sidebar {
display: flex;
}
.layout-wide .dm-mobile-selector {
display: none !important;
}
.layout-wide .dm-desktop-header {
display: block !important;
}
.dm-desktop-header {