oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-04-20 22:13:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

UI: Sidebar defaults based on viewport width

Browse source
This commit is contained in:
oobabooga 2026-04-16 03:51:12 -07:00
parent 78a178de9e
commit 145f3297a2
2 changed files with 55 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

35
css/main.css
View file

@ -976,13 +976,6 @@ audio {
flex-shrink: 0;
box-sizing: content-box;
z-index: 10;
position: fixed;
top: 0;
background: var(--background-fill-primary);
}
#past-chats-row {
left: var(--header-width);
}
#past-chats-row:not(.negative-header) {
@ -990,7 +983,6 @@ audio {
}
#chat-controls {
right: 0;
padding: 1rem;
padding-bottom: 0;
overflow-y: scroll;
@ -1262,6 +1254,33 @@ audio {
right: 7px;
}
@media screen and (width <= 924px) {
#chat-controls.sidebar-shown {
position: fixed;
right: 0;
}
#past-chats-row.sidebar-shown {
position: fixed;
}
}
@media screen and (min-width: 1470px) {
#chat-controls,
#past-chats-row {
position: fixed;
top: 0;
background: var(--background-fill-primary);
}
#past-chats-row {
left: var(--header-width);
}
#chat-controls {
right: 0;
}
}
/* ----------------------------------------------
Dark theme

93
js/main.js
View file

@ -691,33 +691,30 @@ function handleIndividualSidebarClose(event) {
});
}
function toggleSidebar(sidebar, toggle) {
const isCurrentlyHidden = sidebar.classList.contains("sidebar-hidden");
const shouldClose = !isCurrentlyHidden;
// Apply visibility classes
sidebar.classList.toggle("sidebar-hidden", shouldClose);
sidebar.classList.toggle("sidebar-shown", !shouldClose);
function setSidebarState(sidebar, toggle, hidden) {
sidebar.classList.toggle("sidebar-hidden", hidden);
sidebar.classList.toggle("sidebar-shown", !hidden);
if (sidebar === headerBar) {
// Special handling for header bar
document.documentElement.style.setProperty("--header-width", shouldClose ? "0px" : "112px");
pastChatsRow.classList.toggle("negative-header", shouldClose);
pastChatsToggle.classList.toggle("negative-header", shouldClose);
toggle.innerHTML = shouldClose ? hamburgerMenuSVG : closeMenuSVG;
document.documentElement.style.setProperty("--header-width", hidden ? "0px" : "112px");
pastChatsRow.classList.toggle("negative-header", hidden);
pastChatsToggle.classList.toggle("negative-header", hidden);
toggle.innerHTML = hidden ? hamburgerMenuSVG : closeMenuSVG;
} else if (sidebar === pastChatsRow) {
// Past chats sidebar
toggle.classList.toggle("past-chats-closed", shouldClose);
toggle.classList.toggle("past-chats-open", !shouldClose);
toggle.innerHTML = shouldClose ? rightArrowSVG : leftArrowSVG;
toggle.classList.toggle("past-chats-closed", hidden);
toggle.classList.toggle("past-chats-open", !hidden);
toggle.innerHTML = hidden ? rightArrowSVG : leftArrowSVG;
} else if (sidebar === chatControlsRow) {
// Chat controls sidebar
toggle.classList.toggle("chat-controls-closed", shouldClose);
toggle.classList.toggle("chat-controls-open", !shouldClose);
toggle.innerHTML = shouldClose ? leftArrowSVG : rightArrowSVG;
toggle.classList.toggle("chat-controls-closed", hidden);
toggle.classList.toggle("chat-controls-open", !hidden);
toggle.innerHTML = hidden ? leftArrowSVG : rightArrowSVG;
}
}
function toggleSidebar(sidebar, toggle) {
setSidebarState(sidebar, toggle, !sidebar.classList.contains("sidebar-hidden"));
}
window.toggleSidebar = toggleSidebar;
function isMobile() {
@ -725,52 +722,18 @@ function isMobile() {
}
function initializeSidebars() {
const isOnMobile = isMobile();
const width = window.innerWidth;
const defaults = {
"sidebar-header-hidden": width <= 924,
"sidebar-past-chats-hidden": width < 1200,
"sidebar-chat-controls-hidden": width < 1470,
};
if (isOnMobile) {
// Mobile state: Hide sidebars and set closed states
[pastChatsRow, chatControlsRow, headerBar].forEach(el => {
el.classList.add("sidebar-hidden");
el.classList.remove("sidebar-shown");
});
document.documentElement.style.setProperty("--header-width", "0px");
pastChatsRow.classList.add("negative-header");
pastChatsToggle.classList.add("negative-header", "past-chats-closed");
pastChatsToggle.classList.remove("past-chats-open");
[chatControlsToggle, navigationToggle].forEach(el => {
el.classList.add("chat-controls-closed");
el.classList.remove("chat-controls-open");
});
pastChatsToggle.innerHTML = rightArrowSVG;
chatControlsToggle.innerHTML = leftArrowSVG;
navigationToggle.innerHTML = hamburgerMenuSVG;
} else {
// Desktop state: Show sidebars and set open states
[pastChatsRow, chatControlsRow].forEach(el => {
el.classList.remove("sidebar-hidden", "sidebar-shown");
});
pastChatsToggle.classList.add("past-chats-open");
pastChatsToggle.classList.remove("past-chats-closed");
[chatControlsToggle, navigationToggle].forEach(el => {
el.classList.add("chat-controls-open");
el.classList.remove("chat-controls-closed");
});
pastChatsToggle.innerHTML = leftArrowSVG;
chatControlsToggle.innerHTML = rightArrowSVG;
navigationToggle.innerHTML = closeMenuSVG;
SIDEBARS.forEach(({ element, toggle, key }) => {
if (localStorage.getItem(key) === "true") {
toggleSidebar(element, toggle);
}
});
}
SIDEBARS.forEach(({ element, toggle, key }) => {
const stored = localStorage.getItem(key);
const hidden = stored !== null ? stored === "true" : defaults[key];
setSidebarState(element, toggle, hidden);
});
}
initializeSidebars();