[BUG] - Labs homepage template has a mismatch in paragraph flow between desktop and mobile/tablet

[noatamir]

What site is this for?

Quansight Labs

Expected behavior

Mobile/tablet template should have the same order of paragraphs as the desktop template

Actual behavior

When we “solved” the text flow on the desktop, we rearranged the text by moving one paragraph content to another in the existing template. But on mobile they get transformed into a column of text, so they appear in the wrong order. We need to ask Gabriel to tweak the template in either mobile or desktop to resolve the issue.

How to Reproduce the problem?

No response

Anything else?

No response

[gabalafou]

To be honest, it's still unclear to me what the order of the paragraphs should be in a single column.

I think I understand what you're suggesting, but the actual words in the paragraphs when I read them suggest the following order:

1. The public benefit division ...
2. Sustaining the Future of Open Source...
3. Projects like NumPy...
4. We have had and continue to have...
5. We also understand the needs of companies...

The Labs home page in Figma suggests the same order to me (although it is a bit ambiguous).

When I dig into the Quansight Storyblok Manual and the ColumnArticle.tsx code file, I wonder if something got lost in translation between the Figma design and its implementation in Storyblok and React.

I think Naturaily may have thought that what we had was two rows, each with their own columns, but I think we really just have columns.

The problem as I see it is that when the Column Article template/blok is presented in two columns, the four sections that comprise the Column Article are presented in the following order:

A. Column 1:

1. Left
2. Final

B. Column 2:

3. Right
4. Image

But when that same Column Article goes to a single column on mobile, you get the following order:

1. Left
2. Right
3. Final
4. Image

Which is a different order. So my solution is to change the order of the sections so that when the screen width drops below the breakpoint to go into a single column, you get:

1. Left
2. Image
3. Final
4. Right

Which is... also a slightly different order from the two-column order. That's because the Figma mocks suggest that the image is reordered relative to the text when going from two columns to one. However, the order of the text content stays the same: left, final, right.

I think the long-term solution is a rethink of the way this was implemented. The current implementation suggests that Naturaily saw the design as two rows:

Row 1: [Left, Right]
Row 2: [Final, Image]

But I'm not sure that maps to the layout model that Irina had in her head when she made the designs.

In fact, I think I can pretty convincingly argue that the Figma designs strongly suggest the following model: a single flow of paragraphs with an image. In a two column layout, text flows across the two columns and the image gets put at the end. In a single column layout, the image gets moved up somewhere between two paragraphs.

That said, there is a fairly easy short-term fix, which is a mapping of [section order at large width] to [section order at small width], like so:

[1, 2, 3, 4] -> [1, 4, 3, 2]

And since it took me a while to wrap my head around all of this, I am going to upload a pull request for the short-term fix.

The longer-term change, which will involve changes to the Storyblok schema and React component is something I leave for the future. Hopefully, everything I've written here will be useful then.

[bskinn]

We'll want to check the LLC site for uses of ColumnArticle, to make sure this flow change doesn't break things there.

[noatamir]

@gabalafou I entirely agree with your long term view. I was also confused when I realized the current implementation is row-based. Thanks for looking into this!