Nautilus/ledgerdock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign document workspace layout and tighten frontend type config

Browse Source
This commit is contained in:
Beda Schmid
2026-02-21 10:00:35 -03:00
parent 5dfc2cbd85
commit 04cf830e21
16 changed files with 1373 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/styles.css
View File

@@ -79,7 +79,7 @@ select,
textarea {
width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border-radius: var(--radius-xs);
background: #111a2a;
color: var(--color-text);
padding: 0.45rem 0.6rem;
@@ -120,13 +120,13 @@ textarea {
button {
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
min-height: 2.1rem;
padding: 0 0.75rem;
border-radius: var(--radius-xs);
min-height: 1.95rem;
padding: 0 0.68rem;
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
color: #eef4ff;
font-family: var(--font-display);
font-size: 0.76rem;
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
@@ -234,18 +234,40 @@ button:disabled {
.search-filters-bar {
display: grid;
grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) repeat(2, minmax(136px, auto)) auto auto;
gap: var(--space-2);
}
.search-filters-bar input,
.search-filters-bar select,
.search-filters-bar button {
min-height: 2.05rem;
.search-filters-primary-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.search-filters-bar input[type='date'] {
min-width: 128px;
.search-filters-primary-row input {
min-width: 0;
min-height: 2rem;
}
.search-filters-primary-row button {
min-height: 2rem;
white-space: nowrap;
}
.search-filters-secondary-row {
display: grid;
grid-template-columns: repeat(3, minmax(130px, 1fr)) repeat(2, minmax(138px, auto));
gap: var(--space-2);
}
.search-filters-secondary-row select,
.search-filters-secondary-row input {
min-height: 1.9rem;
}
.search-filters-secondary-row input[type='date'] {
min-width: 132px;
}
.document-toolbar-row {
@@ -254,9 +276,9 @@ button:disabled {
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap;
padding: var(--space-2);
padding: 0.42rem 0.5rem;
border: 1px solid rgba(70, 89, 122, 0.6);
border-radius: var(--radius-sm);
border-radius: var(--radius-xs);
background: rgba(18, 27, 41, 0.75);
}
@@ -269,8 +291,17 @@ button:disabled {
gap: var(--space-2);
}
.document-pagination-strip {
margin-top: var(--space-2);
margin-bottom: var(--space-2);
padding: 0.25rem 0.4rem;
border: 1px solid rgba(70, 89, 122, 0.5);
border-radius: var(--radius-xs);
background: rgba(18, 27, 41, 0.6);
}
.document-toolbar-pagination .small {
min-width: 6.5rem;
min-width: 5.7rem;
text-align: center;
}
@@ -280,16 +311,31 @@ button:disabled {
.document-toolbar-export-path {
margin-left: auto;
min-width: min(460px, 100%);
min-width: min(520px, 100%);
}
.document-toolbar-export-path .path-input {
flex: 1;
min-width: 160px;
min-width: 220px;
}
.compact-pagination {
gap: 0.35rem;
}
.compact-pagination button {
min-height: 1.6rem;
padding: 0 0.45rem;
font-size: 0.64rem;
}
.compact-pagination .small {
min-width: 5rem;
font-size: 0.72rem;
}
.document-grid {
margin-top: var(--space-2);
margin-top: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-3);
@@ -301,13 +347,14 @@ button:disabled {
grid-template-rows: auto auto 1fr auto;
overflow: hidden;
cursor: pointer;
border-radius: var(--radius-xs);
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.document-card:hover {
transform: translateY(-2px);
transform: translateY(-1px);
border-color: var(--color-border-strong);
box-shadow: var(--shadow-strong);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.document-card.selected {
@@ -362,14 +409,16 @@ button:disabled {
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 1px solid rgba(70, 89, 122, 0.55);
background: linear-gradient(160deg, #111b2c 0%, #1b2a43 100%);
background:
linear-gradient(180deg, #f8f4ea 0%, #efe8d8 100%),
repeating-linear-gradient(0deg, rgba(130, 117, 96, 0.06) 0, rgba(130, 117, 96, 0.06) 1px, transparent 1px, transparent 8px);
}
.document-preview img {
width: 100%;
height: 100%;
object-fit: contain;
background: #0e1625;
background: #faf7ef;
}
.document-preview-fallback {
@@ -540,7 +589,7 @@ button:disabled {
.viewer-preview {
overflow: hidden;
border: 1px solid rgba(70, 89, 122, 0.7);
border-radius: var(--radius-sm);
border-radius: var(--radius-xs);
background: #0f1726;
min-height: 280px;
}
@@ -1118,12 +1167,8 @@ button:disabled {
}
@media (max-width: 1480px) {
.search-filters-bar {
grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) repeat(2, minmax(136px, auto));
}
.search-filters-bar button {
grid-column: span 1;
.search-filters-secondary-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(126px, 1fr));
}
}
@@ -1153,7 +1198,7 @@ button:disabled {
}
@media (max-width: 1040px) {
.search-filters-bar {
.search-filters-secondary-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1186,7 +1231,15 @@ button:disabled {
width: min(1820px, 100% - 1rem);
}
.search-filters-bar {
.search-filters-primary-row {
grid-template-columns: 1fr 1fr;
}
.search-filters-primary-row input {
grid-column: 1 / -1;
}
.search-filters-secondary-row {
grid-template-columns: 1fr;
}
@@ -1201,6 +1254,10 @@ button:disabled {
width: 100%;
}
.document-pagination-strip .document-toolbar-pagination {
width: auto;
}
.provider-list {
grid-template-columns: 1fr;
}