Add resizable viewer panes
This commit is contained in:
parent
a4ea4c120e
commit
2bdf622257
3 changed files with 110 additions and 7 deletions
18
frontend-js/dist/style.css
vendored
18
frontend-js/dist/style.css
vendored
|
|
@ -56,13 +56,22 @@ body.ol2013 {
|
|||
min-height: 0; /* erlaubt Scrollen in den Panes */
|
||||
}
|
||||
.three-pane { grid-template-columns: 220px 340px 1fr; }
|
||||
.four-pane { grid-template-columns: 220px 340px minmax(280px, 1fr) minmax(280px, 1fr); }
|
||||
.four-pane { grid-template-columns: 220px 6px 340px 6px minmax(280px, 1fr) 6px minmax(280px, 1fr); }
|
||||
.pane {
|
||||
border-right: 1px solid var(--ol-border);
|
||||
background: var(--ol-pane);
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
.pane-resizer {
|
||||
background: #f7f7f7;
|
||||
border-right: 1px solid var(--ol-border);
|
||||
cursor: col-resize;
|
||||
min-height: 0;
|
||||
}
|
||||
.pane-resizer:hover,
|
||||
.pane-resizer.dragging { background: var(--ol-sel-bd); }
|
||||
body.resizing { cursor: col-resize; user-select: none; }
|
||||
.pane-tree { background: var(--ol-tree); }
|
||||
.pane-target { border-right: 0; }
|
||||
.pane-head {
|
||||
|
|
@ -163,11 +172,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
|
||||
@media (max-width: 1180px) {
|
||||
.four-pane {
|
||||
grid-template-columns: 200px 320px minmax(300px, 1fr);
|
||||
}
|
||||
.pane-target {
|
||||
grid-column: 3;
|
||||
border-top: 1px solid var(--ol-border);
|
||||
grid-template-columns: 200px 6px 320px 6px minmax(280px, 1fr) 6px minmax(280px, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,6 +187,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
border-right: 0;
|
||||
border-bottom: 1px solid var(--ol-border);
|
||||
}
|
||||
.pane-resizer { display: none; }
|
||||
.pane-target { grid-column: auto; }
|
||||
.searchbar { top: 30px; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue