BrickHack 8 Site - FAQ Section

[sjmiller7]

Fixes #1250

Most of the structural code is the same, just messed around with colors to make the cards present as specified by the Figma.

The section itself doesn't appear centered very well (when clicking on the FAQ nav link), but this a consequence of centering the text vertically beside the ricky to eliminate space underneath.

Ricky currently has an odd bar beside him. Going to ask Design team about removing that and the section centering on Monday (11/29).

[peterkos]

Will give these a review in the morning ("real" morning)

[skyegallup]

This will make the UX feel more smooth: on the BH7 site, when expanding an FAQ card, it would only push all content down, not up. In the current PR, it looks like it expands the section up and down in terms of height. Is there a way to make it behave like the BH7 site, "pinned" to the top of the section?

I noticed yesterday that on SJ's laptop with Chrome/Win10, this only happened when the top of the viewport was above the start of the FAQ section. Now that I'm testing on Firefox/Ubuntu, this always happens, regardless of how far down I've scrolled. I'm not exactly sure what's causing it, but it's browser-specific, which makes me a little uneasy...

[sjmiller7]

This will make the UX feel more smooth: on the BH7 site, when expanding an FAQ card, it would only push all content down, not up. In the current PR, it looks like it expands the section up and down in terms of height. Is there a way to make it behave like the BH7 site, "pinned" to the top of the section?

I noticed yesterday that on SJ's laptop with Chrome/Win10, this only happened when the top of the viewport was above the start of the FAQ section. Now that I'm testing on Firefox/Ubuntu, this always happens, regardless of how far down I've scrolled. I'm not exactly sure what's causing it, but it's browser-specific, which makes me a little uneasy...

I have no clue how to fix this or what in the world I did to change it in the first place

[skyegallup]

This will make the UX feel more smooth: on the BH7 site, when expanding an FAQ card, it would only push all content down, not up. In the current PR, it looks like it expands the section up and down in terms of height. Is there a way to make it behave like the BH7 site, "pinned" to the top of the section?

I noticed yesterday that on SJ's laptop with Chrome/Win10, this only happened when the top of the viewport was above the start of the FAQ section. Now that I'm testing on Firefox/Ubuntu, this always happens, regardless of how far down I've scrolled. I'm not exactly sure what's causing it, but it's browser-specific, which makes me a little uneasy...

I have no clue how to fix this or what in the world I did to change it in the first place

Also, the BH7 site works completely fine on Firefox/Ubuntu regardless of how far down I've scrolled. :shrug: :shrug: :shrug:

[sjmiller7]

This will make the UX feel more smooth: on the BH7 site, when expanding an FAQ card, it would only push all content down, not up. In the current PR, it looks like it expands the section up and down in terms of height. Is there a way to make it behave like the BH7 site, "pinned" to the top of the section?

I noticed yesterday that on SJ's laptop with Chrome/Win10, this only happened when the top of the viewport was above the start of the FAQ section. Now that I'm testing on Firefox/Ubuntu, this always happens, regardless of how far down I've scrolled. I'm not exactly sure what's causing it, but it's browser-specific, which makes me a little uneasy...

I have no clue how to fix this or what in the world I did to change it in the first place

Also, the BH7 site works completely fine on Firefox/Ubuntu regardless of how far down I've scrolled. 🤷 🤷 🤷

Update to this mess: Design says no more need to have the sections be min 100vh. I will remove that when we get back to the general pr and it should fix the bug (in theory).

[sjmiller7]

Design q's (I can also msg these in #design)

No hover effect? Thoughts on adding some margin around the section left/right, or are we sticking to fullwidth style? Will probably not work to well on >16" screens)

Forgot to ask these in the last sync, but some thoughts

• In theory, hover is not a necessary indicator because we have the plus icon. We could, for consistency's sake, give it the same hover as the buttons if you + design really want?
• I think this is still the same as bh7? If we need to change it we can but I though it was fine

[peterkos]

It's similar to BH7 in terms of screen real estate, but imo could be improved by a bit of padding on each side (here, 27" screen):

Current	BH7

Also, I think I found a reason why the FAQ keeps adjusting the height in a weird way. section is display: flex, with justify-content: center. Changing that to justify-content: flex-start fixes it :) But that can be fixed in a future PR to get it out, just writing here for info.

[sjmiller7]

I think I found a reason why the FAQ keeps adjusting the height in a weird way

As stated previously, "Design says no more need to have the sections be min 100vh. I will remove that when we get back to the general pr and it should fix the bug." The reason why it is centered right now is to prevent awkward whitespace while the paces are each min 100vh. We will be adjusting the sections back in the general pr to remove the min 100vh requirement and in doing so remove the centering

a bit of padding on each side

Messing with section padding is a general pr issue imo. Either we change padding for all sections and that code needs to be done in the general pr, or we just change it around the faq cards and not the entire section in which case design needs to verify because it would be breaking alignment.

[skyegallup]

@peterkos

Also, I think I found a reason why the FAQ keeps adjusting the height in a weird way. section is display: flex, with justify-content: center. Changing that to justify-content: flex-start fixes it :) But that can be fixed in a future PR to get it out, just writing here for info.

Yes. I discovered this at a previous design sync and brought it up with SJ and Claire, who chose to resolve it by dropping the "100vh for all sections" design requirement.

---

@sjmiller7

Messing with section padding is a general pr issue imo. Either we change padding for all sections and that code needs to be done in the general pr, or we just change it around the faq cards and not the entire section in which case design needs to verify because it would be breaking alignment.

I think the Figma did have more padding on all sections, including the navbar:

But as you said, this should be fixed in the general PR, not this one.

[peterkos]

Gotcha! Apologies, I saw the min height but wasn't positive that was the source of the bug. LGTM