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> <PageGridRow>
<BorderedCol span={6}>span={6}</BorderedCol> <BorderedCol span={6}>span={6}</BorderedCol>
<BorderedCol span={6}>span={6}</BorderedCol> <BorderedCol span={6}>span={6}</BorderedCol>
<BorderedCol>test</BorderedCol>
<BorderedCol>test</BorderedCol>
</PageGridRow> </PageGridRow>
</PageGrid> </PageGrid>
</GridDemo> </GridDemo>

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

@@ -36,10 +36,11 @@ $xrpl-grid-gutter: 8px;
} }
@mixin xrpl-grid-generate-fill($suffix: null) { @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} { #{$selector} {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
} }
@@ -125,6 +126,7 @@ $xrpl-grid-gutter: 8px;
&__col { &__col {
box-sizing: border-box; box-sizing: border-box;
flex: auto;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@@ -170,5 +172,3 @@ $xrpl-grid-gutter: 8px;
@include xrpl-grid-generate-auto('xl'); @include xrpl-grid-generate-auto('xl');
@include xrpl-grid-generate-offsets(12, '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") { if (value === "fill") {
// Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation) // Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill
// Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill // This allows us to distinguish between "no span" and "span='fill'" in CSS
// The implementation below aligns with the documentation's example logic: return `xrpl-grid__col${prefixStr}-fill`;
return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col";
} }
// Generates xrpl-grid__col-6 or xrpl-grid__col-md-6 // 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 { .xrpl-grid__col {
box-sizing: border-box; box-sizing: border-box;
flex: auto;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.xrpl-grid__col { .xrpl-grid__col-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
.xrpl-grid__col-1 { .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) { @media (min-width: 576px) {
.xrpl-grid__col-sm { .xrpl-grid__col-sm-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
.xrpl-grid__col-sm-1 { .xrpl-grid__col-sm-1 {
flex: 0 0 auto; 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) { @media (min-width: 576px) {
.xrpl-grid__col-md { .xrpl-grid__col-md-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
.xrpl-grid__col-md-1 { .xrpl-grid__col-md-1 {
flex: 0 0 auto; 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) { @media (min-width: 992px) {
.xrpl-grid__col-lg { .xrpl-grid__col-lg-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
.xrpl-grid__col-lg-1 { .xrpl-grid__col-lg-1 {
flex: 0 0 auto; 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) { @media (min-width: 1280px) {
.xrpl-grid__col-xl { .xrpl-grid__col-xl-fill {
flex: 1 0 0; flex: 1 0 0;
width: auto;
} }
.xrpl-grid__col-xl-1 { .xrpl-grid__col-xl-1 {
flex: 0 0 auto; flex: 0 0 auto;