Nav Update: Multipage campaigns with long page titles look...weird

[alanmoo]

Not a huge issue since we can say "don't do that" for now, but it should fail gracefully. @kristinashu Assigning to you to identify a design solution (or assign someone else who can provide one) After that's done, flip it back to me for dev assignment.

[gvn]

Live text gonna live text.

A design solution / implementation should accommodate multiple lines.

[kristinashu]

I put this at a low priority since right now this nav is only on the Aadhaar page, which has short nav names.

But the backup can be like this:

• More vertical space between the two lines of text
• Light grey line below both lines of text and extending the full width
• If possible, don't breakup a nav name (i.e. in Alan's example, "Think arm serious evidence everybody pretty condition" should be on one line).

[youriwims]

@kristinashu, this is how this nav currently looks with long names & 1/2 lines. I noticed in the screenshot you provided earlier, the vertical spacing between the text and underline was roughly half of what it is now. Do you want me to update that as well? Or maybe just add more spacing beneath the 1st nav row in the event there is a total of 2?

[kristinashu]

~@youriwims excellent catch! Yes, it would be great if you could also reduced the vertical space between the text and underline (reducing it my half might be a little too much tho).~

cc @mmmavis in case you have any input.

[kristinashu]

Actually sorry, let's keep it simple and leave the space between the text and underline as it!

So for this ticket, just add vertical space between 1st and 2nd line and make sure both lines have the light gray line.

[youriwims]

Thanks, will do!

[Pomax]

As far as I know this is only really a problem in development with autogenerated Faker text (which doesn't stick to using short titles for campaign pages, and so creates really bad looking menu headings =D). It's totally worth fixing the spacing, but I would say let's not try to make thing fit over multiple lines right now, especially as there's nothing on the live site that runs into this problem.

And maybe it's worth filing a follow-up issue here around fixing the Faker text for campaigns so that it generates more sensible text for this type of page /cc @alanmoo @cadecairos

[youriwims]

@Pomax the spacing and gray line is only an issue when the nav wraps. The nav's parent container has a margin-bottom so, vertical spacing will be okay if it's only one line. Like we talked about yesterday, I can always add a Flex gutter to increase vertical spacing if the nav wraps at the very least.

@kristinashu I'm able to improve the vertical spacing between multiple lines of the nav in the event it wraps. However, I'm unable to keep the gray line consistent on each line if wrapping does occur. Let me know how you would like me to move forward.

This solution to this issue seems to be dependent upon whether or not there will be rules applied to this type of nav detailing max words/characters per li (@Pomax ) in addition to potential nav wrapping design(@kristinashu ). Please keep me updated on what you both decide :)

[kristinashu]

Thank you @youriwims! So are you saying it would look something like this?

That's fine with me. As we've said, this is an edge case and hopefully no one will ever actually see it but it's good to have just in case!

@Pomax yes, updating the faker text to something more realistic would be helpful.

[youriwims]

This is similar to how it would appear. Currently, if we add the vertical spacing in case the nav wraps, it would technically be a margin-bottom that adds the "gutter"/spacing. This is how it would look: Unfortunately, whatever margin-bottom is on the top row items will also be on the bottom as well which is the cause for the large spacing below the second line of items. Below is what it would look like with the nav wrap spacing and decreased padding-bottom/spacing between the nav text & underline: Top & Bottom links hover Top Link hover

Let me know what you think is best.

[kristinashu]

Ok, feel free to reduce the padding! Just make sure that the light gray line lines up with the black underline like so:

[mmmavis]

@kristinashu since I'm pretty involved with the nav cleanup work...

Question: is this change just for multipage links on the campaign pages? Or any pages on Foundation site that have multipage links (e.g., opportunity page, about page, etc)

[kristinashu]

For now, let's just change it on the multi-page campaigns.

FYI to Youri: Mavis will eventually be working on turning this sub nav into a template. It will then be used everywhere that we have a horizontal sub nav (example: primary pages like About Us and campaign pages like Aadaar).

[mmmavis]

@youriwims do what you need to do to land the fix. Just tag me in the PR so I'm aware of the nav changes you are adding to the codebase 👍

[youriwims]

@kristinashu, if space is added between the nav wrap, the gray line won't line up with the black underine.

[kristinashu]

Chatted with Youri and sounds like there is no elegant design solution for this. We think the best way to proceed will be to update faker text and explore options to limit character count and number of nav items. I will open up tickets for these.

@youriwims if this all sounds right, please close this ticket!

[youriwims]

Sounds good, thanks @kristinashu :)