xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add permanent table index rail layout

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 14:56:36 +01:00
parent 338842dba9
commit bed85b9778
5 changed files with 230 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -1115,150 +1115,148 @@ pre,
gap: 1rem;
}
.table-browser-toolbar {
.tables-page-header {
display: grid;
gap: 0.85rem;
gap: 0.5rem;
}
.table-selector {
display: flex;
flex-direction: column;
.tables-page-header-copy {
display: grid;
gap: 0.35rem;
max-width: 52rem;
}
.tables-page-eyebrow {
margin: 0;
color: var(--accent-strong);
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tables-page-intro,
.tables-index-copy,
.table-browser-reading-hint,
.table-browser-edit-hint {
margin: 0;
color: var(--ink-soft);
}
.tables-reference-layout {
display: grid;
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.tables-reference-rail {
position: sticky;
top: calc(var(--shell-header-height) + 1rem);
}
.tables-index-rail {
display: grid;
gap: 0.85rem;
padding: 1rem;
border-radius: 18px;
background: var(--surface-card-subtle);
border: 1px solid rgba(127, 96, 55, 0.16);
box-shadow: 0 16px 26px rgba(41, 22, 11, 0.06);
}
.tables-index-rail-header {
display: grid;
gap: 0.35rem;
}
.table-select-shell {
position: relative;
.tables-index-title {
margin: 0;
color: var(--ink-strong);
font-family: var(--font-display);
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
}
.table-select-trigger {
.tables-index-list {
display: grid;
gap: 0.35rem;
}
.table-index-option {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
gap: 0.75rem;
width: 100%;
padding: 0.7rem 0.8rem;
border: 1px solid transparent;
border-radius: 12px;
background: rgba(255, 250, 242, 0.72);
color: inherit;
text-align: left;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(127, 96, 55, 0.28);
border-radius: 8px;
background: rgba(255, 252, 247, 0.96);
box-shadow: none;
appearance: none;
transition: border-color 0.16s ease, background-color 0.16s ease;
transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.table-select-trigger:hover,
.table-select-trigger:focus-visible {
border-color: rgba(184, 121, 59, 0.4);
background: rgba(255, 248, 239, 0.98);
.table-index-option:hover,
.table-index-option:focus-visible {
border-color: rgba(184, 121, 59, 0.28);
background: rgba(255, 247, 235, 0.94);
outline: none;
}
.table-select-trigger-copy {
display: block;
.table-index-option.is-selected {
border-color: rgba(41, 22, 11, 0.18);
background: rgba(248, 238, 221, 0.98);
}
.table-index-option.is-curated {
background: rgba(102, 138, 83, 0.12);
}
.table-index-option.is-curated:hover,
.table-index-option.is-curated:focus-visible {
background: rgba(102, 138, 83, 0.18);
}
.table-index-option.needs-curation {
background: rgba(184, 121, 59, 0.12);
}
.table-index-option.needs-curation:hover,
.table-index-option.needs-curation:focus-visible {
background: rgba(184, 121, 59, 0.18);
}
.table-index-option-copy {
display: grid;
gap: 0.18rem;
min-width: 0;
}
.table-select-trigger-title {
.table-index-option-title {
color: var(--ink);
font-family: var(--font-ui);
font-size: 0.98rem;
font-weight: 600;
}
.table-select-trigger-chips,
.table-select-option-chips {
.table-index-option-meta {
color: var(--ink-soft);
font-size: 0.8rem;
}
.table-index-option-chips {
display: flex;
align-items: center;
gap: 0.25rem;
justify-content: flex-end;
}
.table-selector-backdrop {
position: fixed;
inset: 0;
border: none;
background: transparent;
padding: 0;
z-index: 15;
}
.table-select-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.1rem);
z-index: 20;
display: grid;
gap: 0;
padding: 0.1rem;
border-radius: 8px;
background: rgba(255, 250, 242, 0.98);
border: 1px solid rgba(127, 96, 55, 0.22);
box-shadow: 0 10px 18px rgba(41, 22, 11, 0.1);
max-height: min(28rem, 60vh);
overflow: auto;
}
.table-select-option {
border: none;
border-radius: 0;
background: transparent;
padding: 0.35rem 0.45rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
text-align: left;
transition: background-color 0.16s ease, outline-color 0.16s ease;
}
.table-select-option:hover,
.table-select-option:focus-visible {
outline: 1px solid rgba(41, 22, 11, 0.16);
outline-offset: -1px;
}
.table-select-option.is-selected {
outline: 1px solid rgba(41, 22, 11, 0.14);
outline-offset: -1px;
}
.table-select-option.is-curated {
background: rgba(102, 138, 83, 0.12);
}
.table-select-option.is-curated:hover,
.table-select-option.is-curated:focus-visible {
background: rgba(102, 138, 83, 0.18);
}
.table-select-option.needs-curation {
background: rgba(184, 121, 59, 0.12);
}
.table-select-option.needs-curation:hover,
.table-select-option.needs-curation:focus-visible {
background: rgba(184, 121, 59, 0.18);
}
.table-select-option-main {
display: block;
.tables-reference-main {
min-width: 0;
}
.table-select-option-title {
color: var(--ink);
font-family: var(--font-ui);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-browser-toolbar-copy,
.table-browser-reading-hint,
.table-browser-edit-hint {
margin: 0;
color: var(--ink-soft);
}
.table-shell {
border-radius: 20px;
padding: 1.2rem;
@@ -1283,6 +1281,16 @@ pre,
white-space: nowrap;
}
@media (max-width: 1023px) {
.tables-reference-layout {
grid-template-columns: minmax(0, 1fr);
}
.tables-reference-rail {
position: static;
}
}
.table-shell .table-scroll {
overflow-x: auto;
}