ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

working grid for fill and auto

Browse Source
This commit is contained in:
Calvin Jhunjhuwala
2025-12-03 13:34:05 -08:00
parent 6f76d4ece5
commit a6d84de417
4 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
shared/components/PageGrid/_page-grid.scss
View File

@@ -36,10 +36,11 @@ $xrpl-grid-gutter: 8px;
}
@mixin xrpl-grid-generate-fill($suffix: null) {
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col");
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill");
#{$selector} {
flex: 1 0 0;
width: auto;
}
}
@@ -125,6 +126,7 @@ $xrpl-grid-gutter: 8px;
&__col {
box-sizing: border-box;
flex: auto;
flex-shrink: 0;
width: 100%;
max-width: 100%;
@@ -169,6 +171,4 @@ $xrpl-grid-gutter: 8px;
@include xrpl-grid-generate-cols(12, 'xl');
@include xrpl-grid-generate-auto('xl');
@include xrpl-grid-generate-offsets(12, 'xl');
}
}

7
shared/components/PageGrid/page-grid.tsx
View File

@@ -40,10 +40,9 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
}
if (value === "fill") {
// Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation)
// Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill
// The implementation below aligns with the documentation's example logic:
return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col";
// Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill
// This allows us to distinguish between "no span" and "span='fill'" in CSS
return `xrpl-grid__col${prefixStr}-fill`;
}
// Generates xrpl-grid__col-6 or xrpl-grid__col-md-6