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

2
about/grid-showcase.page.tsx
View File

@@ -88,6 +88,8 @@ export default function GridShowcase() {
<PageGridRow>
<BorderedCol span={6}>span={6}</BorderedCol>
<BorderedCol span={6}>span={6}</BorderedCol>
<BorderedCol>test</BorderedCol>
<BorderedCol>test</BorderedCol>
</PageGridRow>
</PageGrid>
</GridDemo>

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

16
static/css/devportal2024-v1.css
View File

@@ -13715,13 +13715,15 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
}
.xrpl-grid__col {
box-sizing: border-box;
flex: auto;
flex-shrink: 0;
width: 100%;
max-width: 100%;
}
.xrpl-grid__col {
.xrpl-grid__col-fill {
flex: 1 0 0;
width: auto;
}
.xrpl-grid__col-1 {
@@ -14022,8 +14024,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
}
@media (min-width: 576px) {
.xrpl-grid__col-sm {
.xrpl-grid__col-sm-fill {
flex: 1 0 0;
width: auto;
}
.xrpl-grid__col-sm-1 {
flex: 0 0 auto;
@@ -14087,8 +14090,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
}
}
@media (min-width: 576px) {
.xrpl-grid__col-md {
.xrpl-grid__col-md-fill {
flex: 1 0 0;
width: auto;
}
.xrpl-grid__col-md-1 {
flex: 0 0 auto;
@@ -14152,8 +14156,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
}
}
@media (min-width: 992px) {
.xrpl-grid__col-lg {
.xrpl-grid__col-lg-fill {
flex: 1 0 0;
width: auto;
}
.xrpl-grid__col-lg-1 {
flex: 0 0 auto;
@@ -14245,8 +14250,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
}
}
@media (min-width: 1280px) {
.xrpl-grid__col-xl {
.xrpl-grid__col-xl-fill {
flex: 1 0 0;
width: auto;
}
.xrpl-grid__col-xl-1 {
flex: 0 0 auto;