tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Profile redesign: Split fields row when evenly sized

Browse Source 
Port dc923c6425559266f0665fe2e294f6e412783810 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Echo 2026-04-02 17:46:14 +02:00 committed by Claire
parent a63744e528
commit ce157ca2f0
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx
View File

@ -235,6 +235,7 @@ function useColumnWrap() {
const columnCount = parseInt(styles.getPropertyValue('--cols')) || 2; const columnCount = parseInt(styles.getPropertyValue('--cols')) || 2;
const listWidth = listEle.offsetWidth; const listWidth = listEle.offsetWidth;
const colWidth = (listWidth - gap * (columnCount - 1)) / columnCount; const colWidth = (listWidth - gap * (columnCount - 1)) / columnCount;
const halfColSpan = columnCount / 2;
// Matrix to hold the grid layout. // Matrix to hold the grid layout.
const itemGrid: { ele: HTMLElement; span: number }[][] = []; const itemGrid: { ele: HTMLElement; span: number }[][] = [];
@ -288,6 +289,16 @@ function useColumnWrap() {
if (i < row.length - 1) { if (i < row.length - 1) {
ele.dataset.cols = span.toString(); ele.dataset.cols = span.toString();
remainingRowSpan -= span; remainingRowSpan -= span;
} else if (
row.length === halfColSpan &&
span === 1 &&
remainingRowSpan > 1
) {
// Special case for 2 items in a row where both items only need 1 column.
ele.dataset.cols = halfColSpan.toString();
if (row[0]) {
row[0].ele.dataset.cols = halfColSpan.toString();
}
} else { } else {
// Last item in the row takes up remaining space to fill the row. // Last item in the row takes up remaining space to fill the row.
ele.dataset.cols = remainingRowSpan.toString(); ele.dataset.cols = remainingRowSpan.toString();