mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-07 03:29:19 +02:00
repertoire: fixed-header columns, remove main/index padding, minimal column padding
This commit is contained in:
6
TODO.md
6
TODO.md
@@ -63,6 +63,12 @@
|
|||||||
- [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636)
|
- [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636)
|
||||||
- [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan
|
- [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan
|
||||||
|
|
||||||
|
## Répertoire layout
|
||||||
|
|
||||||
|
- [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
|
||||||
|
- [x] Remove padding from `.search-main` and `.repertoire-index`
|
||||||
|
- [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
|
||||||
|
|
||||||
## CSS refactor
|
## CSS refactor
|
||||||
|
|
||||||
- [x] Move semantic HTML element baseline styles into common.css
|
- [x] Move semantic HTML element baseline styles into common.css
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- 6-column index layout ---- */
|
/* ---- 6-column index layout ---- */
|
||||||
@@ -15,14 +16,14 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
|
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
padding: 0 var(--space-m);
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.repertoire-index {
|
.repertoire-index {
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
padding: 0 var(--space-s);
|
padding: 0;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,14 +39,13 @@
|
|||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.repertoire-index {
|
.repertoire-index {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
padding: 0 var(--space-s);
|
padding: 0;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repertoire-col {
|
.repertoire-col {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px solid var(--border-primary);
|
border-bottom: 1px solid var(--border-primary);
|
||||||
padding: var(--space-s) 0 var(--space-m);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.repertoire-col:last-child {
|
.repertoire-col:last-child {
|
||||||
@@ -54,32 +54,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.repertoire-col {
|
.repertoire-col {
|
||||||
padding: var(--space-xs) var(--space-2xs) var(--space-l);
|
display: flex;
|
||||||
overflow-y: auto;
|
flex-direction: column;
|
||||||
overflow-x: hidden;
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repertoire-col:last-child {
|
.repertoire-col > h2 {
|
||||||
border-right: none;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.repertoire-index section > h2 {
|
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: var(--step--2);
|
font-size: var(--step--2);
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin: 0 0 var(--space-2xs) 0;
|
margin: 0;
|
||||||
padding-bottom: var(--space-3xs);
|
padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
|
||||||
border-bottom: 1px solid var(--border-secondary);
|
border-bottom: 1px solid var(--border-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.repertoire-col > ul {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: var(--space-2xs) var(--space-2xs) var(--space-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
.repertoire-col:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Strip list chrome inside repertoire columns */
|
/* Strip list chrome inside repertoire columns */
|
||||||
.repertoire-col ul {
|
.repertoire-col ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- rep-entry: shared base (button + link variants) ---- */
|
/* ---- rep-entry: shared base (button + link variants) ---- */
|
||||||
|
|||||||
Reference in New Issue
Block a user