TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dynamic sidebar controls. When the screen is too narrow, it automatically swaps to a select dropdown instead of toggleable, single selection buttons.

Browse Source
This commit is contained in:
Christian Bastian
2024-07-21 22:07:29 -04:00
parent a348dbafbb
commit 35250a99a3
2 changed files with 217 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/model-manager.css
View File

@@ -28,32 +28,41 @@
gap: 16px;
}
.model-manager.sidebar-left {
/* sidebar buttons */
.model-manager .sidebar-buttons {
overflow: hidden;
color: var(--input-text);
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.model-manager .sidebar-buttons .radio-button-group-active {
border-color: var(--fg-color);
color: var(--fg-color);
overflow: hidden;
}
.model-manager[data-sidebar-state="left"] {
width: 50%;
left: 0%;
}
.model-manager.sidebar-top {
.model-manager[data-sidebar-state="top"] {
height: 50%;
top: 0%;
}
.model-manager.sidebar-bottom {
.model-manager[data-sidebar-state="bottom"] {
height: 50%;
top: 50%;
}
.model-manager.sidebar-right {
.model-manager[data-sidebar-state="right"] {
width: 50%;
left: 50%;
}
.model-manager .sidebar-buttons .sidebar-button-active {
border-color: var(--fg-color);
color: var(--fg-color);
overflow: hidden;
}
/* common */
.model-manager h1 {
min-width: 0;
@@ -165,15 +174,6 @@
user-select: none;
}
/* sidebar buttons */
.model-manager .sidebar-buttons {
overflow: hidden;
color: var(--input-text);
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
/* main content */
.model-manager .model-manager-panel {
color: var(--fg-color);
@@ -528,6 +528,11 @@
float: right;
}
.model-manager .model-manager-head .topbar-right select {
padding: 0;
font-size: 24px;
}
/* search dropdown */
.model-manager .search-models {
display: flex;