Flyout: show language in header

[humitos]

This is a simple an quick implementation of #359 just as a way to share an idea. We can discuss here if this is the path we want to follow or not. I'm open for changes.

Closes #359

[nijel]

Looks good to me, this is undoubtedly what I hoped for!

[orangesunny]

Thank you, @humitos!

[agjohnson]

For a second version of our flyout, I'd like to see the version and language in the flyout collapsed view, and probably would like to see our logo reduced or removed. The logo takes up a lot of space and doesn't exactly communicate "click here for hosted features".

With all three of these though, we'll need to have a better plan on how to handle long version names on the collapsed view. Right now, we already have display issues when the version is long (and/or can't wrap):

This will be worse with the language icon and text. It's also why I felt we should be careful with replacing text with icons.

[humitos]

Yeah, I think we will need to re-design the flyout at some point (maybe as part of #53 implementing gradual changes).

I'm not worried about those versions with long names for now, they seem like an edge case and it's fine if we don't support them for now.

Having the language on the collapsed version of the flyout is a great improvement and I'd like to move forward with this proposal for now.

[orangesunny]

For a second version of our flyout, I'd like to see the version and language in the flyout collapsed view, and probably would like to see our logo reduced or removed. The logo takes up a lot of space and doesn't exactly communicate "click here for hosted features".

I agree that the logo would benefit from some change. The current state looks more like an advertisement for RTD than a feature of the opened project’s docs; this disturbs users' focus.

[humitos]

I opened #364 to continue the conversation about reducing/removing the logo and make it obvious there are features inside the flyout.

[humitos]

I updated this PR to fix the tests and added the missing CSS that I didn't push the other day. I'm happy to merge this PR with these changes since I think it's an improved version of the current flyout.

[agjohnson]

My point about long version names is that wrapping already happens. With the addition of a language element, even short version names will cause this wrapping, this isn't an issue with just long version names. This all does make the flyout feel a bit half baked, we should address issues with wrapping before adding more content.

[humitos]

Ah, ok.

we should address issues with wrapping before adding more content

What is the solution for this? I mean, how should we deal with that?

[agjohnson]

I don't have immediate suggestions for how to make the UX nice. There are CSS fixes that will avoid wrapping the icon and text like I showed though. But this will either require that the flyout content grows horizontally, clips horizontally, or wraps cleanly onto a second line. All of these options have their own drawbacks and affect UX in their own ways.

[humitos]

But this will either require that the flyout content grows horizontally, clips horizontally, or wraps cleanly onto a second line.

Can you give some directions on what are the CSS rules or documentation I have to read to implement any of these options? I can give it a try.

[agjohnson]

Generally speaking, you'll need to look into flexbox rules to tune how these blocks flow and there are many rules that will affect how text inside these columns is displayed, wrapped, and truncated -- overflow/text-overflow, max-width, and a number of whitespace/word breaking rules.

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Warning: flexbox is sufficiently complex that there is often no one correct answer.

[humitos]

@zanderle do you have experience with CSS rules/grid (e.g. flexbox) to work on this? I think that it could take me non-trivial time learning these concepts before being able to start working on this.

[zanderle]

@zanderle do you have experience with CSS rules/grid (e.g. flexbox) to work on this? I think that it could take me non-trivial time learning these concepts before being able to start working on this.

I haven't done a lot of work with grid, but I have a lot of experience with flexbox, so feel free to assign to me.

[agjohnson]

I'll also echo some conversations we've had here and note that the issue we're facing here is that we had expanded the needed size of the flyout when adding:

• The Read the Docs wordmark, in addition to an icon/logo
• An icon before the version string

Both of these require more horizontal space, and a version selector and icon will make this menu longer still. I feel if we want the language in the collapsed flyout menu, we should do something different and probably should not use wordmark in the menu.

I don't feel the answer here is to expand the size of the flyout menu more, as it already has wrapping issues. I do think we should address issues with flexbox use and wrapping the flyout menu though.

[agjohnson]

Also, it's worth noting here that we also dropped the dropdown caret on the right side of the menu. Without this, there isn't a visual cue that the flyout menu expands. This is more horizontal space we need to allocate.

To clarify, I'm feeling like we're making more work for ourselves by investing work into a 1.5 version of the flyout without a strong plan for design direction. I'd rather we do what we know works for now, skip more feature additions into this version of the flyout, and start working on a plan for a new flyout.

[humitos]

I merged the changes made in #392 and update this PR. I'm happy with the result of this iteration. Here is how it looks now:

it's worth noting here that we also dropped the dropdown caret on the right side of the menu. Without this, there isn't a visual cue that the flyout menu expands. This is more horizontal space we need to allocate.

I opened #393 to track this work.

[ericholscher]

Looks great!

[ericholscher]

Do we want an explicit height vs. a max-height, so it's always a known height?

[humitos]

This comes from #392 and it's because these are dynamic values depending on the image used: logo or logo+wordmark. We can't use a fixed value for both images.

[humitos]

I've covered most of the feedback I received here and in a talk I had with @agjohnson. I think this is ready to move forward. I'm opening more issues to deal with small improvements.

it's worth noting here that we also dropped the dropdown caret on the right side of the menu. Without this, there isn't a visual cue that the flyout menu expands

We have this issue opened #393 and I also opened a PR with a POC.

With all three of these though, we'll need to have a better plan on how to handle long version names on the collapsed view.

I've opened #400 to deal with this.