DonVoo/Mail-Graveyard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add viewer search and dual pane

Browse source
This commit is contained in:
DonVoo 2026-07-05 23:24:00 +02:00
parent 9f2973e0e8
commit c5d761db98
3 changed files with 181 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend-js/dist/style.css vendored
View file

@ -48,13 +48,15 @@ body.ol2013 {
.tab:hover { background: var(--ol-blue-dark); color: #fff; }
.tab.active { background: #fff; color: var(--ol-blue); border-bottom-color: #fff; }
/* Dreispalter */
.three-pane {
/* Vier-Spalten-Viewer */
.three-pane,
.four-pane {
flex: 1 1 auto;
display: grid;
grid-template-columns: 220px 340px 1fr;
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); }
.pane {
border-right: 1px solid var(--ol-border);
background: var(--ol-pane);
@ -62,7 +64,7 @@ body.ol2013 {
min-height: 0;
}
.pane-tree { background: var(--ol-tree); }
.pane-read { border-right: 0; }
.pane-target { border-right: 0; }
.pane-head {
position: sticky; top: 0;
background: #eef3f8;
@ -72,6 +74,18 @@ body.ol2013 {
text-transform: none;
}
.searchbar {
position: sticky; top: 30px; z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
padding: 8px;
background: #fff;
border-bottom: 1px solid var(--ol-border);
}
.search-input { min-width: 0; }
.search-btn { padding-left: 10px; padding-right: 10px; }
/* Ordnerbaum */
.tree-node { padding: 4px 12px 4px 24px; cursor: pointer; white-space: nowrap; }
a.tree-node { display: block; color: inherit; text-decoration: none; }
@ -132,3 +146,28 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
}
.ok { color: #107c10; }
.bad { color: #d13438; }
@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);
}
}
@media (max-width: 820px) {
.four-pane,
.three-pane {
grid-template-columns: 1fr;
overflow-y: auto;
}
.pane {
min-height: 220px;
border-right: 0;
border-bottom: 1px solid var(--ol-border);
}
.pane-target { grid-column: auto; }
.searchbar { top: 30px; }
}