add-ideas/multi-seal-mail-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes, attachment page redesign

Browse Source
This commit is contained in:
Albrecht Degering
2026-06-10 11:14:16 +02:00
parent d666dd90ee
commit 1f34435893
12 changed files with 725 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/styles/campaign-workspace.css
View File

@@ -739,3 +739,93 @@
@media (max-width: 860px) {
.campaign-identity-grid { grid-template-columns: 1fr; }
}
/* Recipient editor compaction and reusable attachment rule overlay. */
.recipient-editor-table th:nth-child(1),
.recipient-editor-table td:nth-child(1) { width: 42px; }
.recipient-editor-table th:nth-child(2),
.recipient-editor-table td:nth-child(2) { min-width: 500px; }
.recipient-editor-table th:nth-child(3),
.recipient-editor-table td:nth-child(3) { min-width: 192px; }
.recipient-editor-table th:last-child,
.recipient-editor-table td:last-child { width: 123px; }
.recipient-editor-table td { vertical-align: top; }
.recipient-cell { white-space: normal !important; }
.recipient-address-stack {
display: grid;
gap: 8px;
min-width: 320px;
}
.recipient-address-line {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 8px;
align-items: start;
}
.recipient-address-label {
display: inline-flex;
justify-content: center;
min-height: 24px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel-soft);
color: var(--muted);
font-size: 11px;
font-weight: 800;
line-height: 22px;
text-transform: uppercase;
}
.recipient-field-input {
min-width: 140px;
}
.attachment-summary-button {
white-space: nowrap;
}
.attachment-summary-note {
margin-top: 12px;
}
.attachment-rules-modal {
width: min(1120px, 100%);
}
.attachment-rules-body {
display: grid;
gap: 12px;
}
.attachment-rules-empty {
border: 1px dashed var(--line-dark);
border-radius: 8px;
background: var(--panel-soft);
padding: 14px;
}
.attachment-sources-table th:nth-child(1),
.attachment-sources-table td:nth-child(1) { min-width: 280px; }
.attachment-sources-table th:nth-child(2),
.attachment-sources-table td:nth-child(2) { min-width: 200px; }
.attachment-sources-table th:nth-child(3),
.attachment-sources-table td:nth-child(3) { width: 207px; }
.attachment-sources-table th:last-child,
.attachment-sources-table td:last-child { width: 123px; }
@media (max-width: 900px) {
.recipient-editor-table th:nth-child(2),
.recipient-editor-table td:nth-child(2) { min-width: 300px; }
.recipient-address-stack { min-width: 260px; }
}
.attachment-rules-table th:nth-child(1),
.attachment-rules-table td:nth-child(1) { min-width: 160px; }
.attachment-rules-table th:nth-child(2),
.attachment-rules-table td:nth-child(2) { width: 280px; }
.attachment-rules-table th:nth-child(3),
.attachment-rules-table td:nth-child(3) { min-width: 230px; }
.attachment-rules-table th:nth-child(4),
.attachment-rules-table td:nth-child(4),
.attachment-rules-table th:nth-child(5),
.attachment-rules-table td:nth-child(5) { width: 175px; }
.attachment-rules-table th:last-child,
.attachment-rules-table td:last-child { width: 123px; }
@media (max-width: 900px) {
.recipient-editor-table th:nth-child(2),
.recipient-editor-table td:nth-child(2) { min-width: 300px; }
.recipient-address-stack { min-width: 260px; }
}

19
src/styles/components.css
View File

@@ -452,3 +452,22 @@
transform: translate(-50%, 0);
transition-delay: .35s, .35s, .35s;
}
.field-with-action {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.field-with-action input,
.field-with-action select,
.field-with-action textarea {
flex: 1 1 auto;
min-width: 0;
}
.field-with-action button,
.field-with-action .button {
flex: 0 0 auto;
white-space: nowrap;
}

2
src/styles/layout.css
View File

@@ -45,7 +45,7 @@
.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: scroll; }
.card-header { min-height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; background: var(--panel-header); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.card-header h2 { margin: 0; font-size: 16px; color: var(--text-strong); }
.card-actions { margin-left: auto; }
.card-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap;}
.card-body { padding: 22px 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-grid.inside { margin: 14px 0; }