peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): convert org members list to grid (#11127)

Browse source 
Replaces #10789

Convert the layout from flex-list helpers to a CSS-native grid. This allows to having buttons in different rows aligned to each other while keeping the layout responsive, i.e. looking good on both desktop and mobile.

### Preview (desktop)

|Before|After|
|-|-|
|![j1](/attachments/85f244bf-0538-4c5d-8300-ae4f6744e5f3)|![new1](/attachments/a23c60f7-d7a3-4cb7-abc6-657541992204)|

### Preview (mobile)

|Before|After|
|-|-|
|![g1](/attachments/32b01933-652f-47e7-b97d-e35262cbbf44)|![new2](/attachments/927fb458-632c-4699-ba8b-bcb6a73ffe3d)|

### Preview (Guest)
|Before|After|
|-|-|
|![i1](/attachments/66d0d62d-5500-4c6d-8913-aad2cf69d1ab)|![new3](/attachments/0333b14e-2952-4c5b-9051-185840167dca)|

## Testing

Automated tests were added to make sure that actions in this list are still working, and for basic template logic. No tests were added for layout because layout being correct is an abstract concept that is difficult to explain to Playwright.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11127
Reviewed-by: Antonin Delpeuch <wetneb@noreply.codeberg.org>
This commit is contained in:
0ko 2026-02-10 12:50:55 +01:00
parent 4ce2212c9f
commit bd5685812e
4 changed files with 204 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

52
web_src/css/org.css
View file

@ -92,6 +92,58 @@
margin-top: 0;
}
.page-content.organization.members .list {
display: grid;
grid-template-columns: minmax(min-content, auto) 1fr fit-content(100%) fit-content(100%);
color: var(--color-text-light-2);
.divider {
grid-column: 1 / -1;
}
/* Username (+display name) use header */
h3 {
margin: 0;
font-size: 16px;
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
.actions {
display: contents;
}
.link-action, .delete-button {
align-self: start;
}
a:has(img) {
margin-inline-end: 0.5rem;
}
.delete-button {
margin-inline-start: var(--button-spacing);
}
}
@media (max-width: 767.98px) {
.page-content.organization.members .list {
/* Place both buttons in one column */
grid-template-columns: minmax(min-content, auto) 1fr fit-content(100%);
.actions {
display: flex;
flex-direction: column;
gap: var(--button-spacing);
}
.link-action, .delete-button {
width: 100%;
margin: 0;
}
}
}
.page-content.organization .teams .item {
padding: 10px 15px;
}