thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-22 03:05:32 +02:00
Code Issues Activity

refactor(ui): replace entry table with flexbox layout

Browse source
This commit is contained in:
TheGeneralist 2026-06-23 22:45:37 +02:00
parent 623d2a12cc
commit b895d6331c
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
3 changed files with 102 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

121
crates/archivr-server/static/styles.css
View file

@ -136,12 +136,86 @@ select {
.entry-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
overflow: auto;
}
.entry-table th {
.entry-header-row {
display: flex;
align-items: stretch;
position: sticky;
top: 0;
z-index: 1;
background: #ded5c7;
border-bottom: 1px solid #cec4b5;
color: #5d625e;
font-size: 11px;
text-transform: uppercase;
}
.entry-header-row > div {
padding: 10px;
flex-shrink: 0;
}
#entries-body > div {
display: flex;
align-items: baseline;
cursor: default;
border-bottom: 1px solid var(--line-soft);
}
#entries-body > div > div {
padding: 10px;
flex-shrink: 0;
overflow: hidden;
}
#entries-body > div:nth-child(even) {
background: #f2ede5;
}
#entries-body > div:nth-child(odd) {
background: var(--paper-3);
}
#entries-body > div.is-selected {
background: #eee2d2;
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.col-added {
width: 168px;
}
.col-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
.col-type {
width: 120px;
}
.col-size {
width: 100px;
}
.col-url {
flex: 0 0 30%;
min-width: 0;
overflow: hidden;
}
/* Runs table (still a <table>) */
#runs-view .entry-table {
border-collapse: collapse;
table-layout: auto;
}
#runs-view .entry-table th {
position: sticky;
top: 0;
z-index: 1;
@ -154,49 +228,14 @@ select {
text-transform: uppercase;
}
.entry-table td {
#runs-view .entry-table td {
padding: 10px;
border-bottom: 1px solid var(--line-soft);
vertical-align: top;
}
.entry-table tr:nth-child(even) td {
background: #f2ede5;
}
.entry-table tr:nth-child(odd) td {
background: var(--paper-3);
}
.entry-table tr {
cursor: default;
}
.entry-table tr.is-selected td {
background: #eee2d2;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
}
.col-added {
width: 178px;
}
.col-title {
width: 38%;
}
.col-type {
width: 130px;
}
.col-size {
width: 110px;
}
.col-url {
width: 34%;
}
#runs-view .entry-table tr:nth-child(even) td { background: #f2ede5; }
#runs-view .entry-table tr:nth-child(odd) td { background: var(--paper-3); }
.entry-title {
color: var(--link);