Saleor: Improve grid usage

[artursmet]

Whole template should be reviewed for incorrect usage of Bootstrap's grid system.

Some elements are misaligned or have inconsistent position in grid.

• Header (logo, search bar, cart widget)
• cart dropdown

[benekex2]

Mobile menu icon with and without "MENU" string to compare. In my opinion second option is more readable.

[patrys]

I don't think "menu" looking like a fourth stripe helps...

[mirekm]

All evidence shows that the plain burger icon is not a good pattern. Adding Menu word makes it clear thus better from the UX point of view (aesthetics is only a secondary concern here).

[mirekm]

So if we have no other options I prefer the version with Menu label.

[patrys]

It's not the word that is the problem, it's that it looks like it's part of the icon.

[patrys]

Also we need a plan to localise the word for non-English locale.

[mirekm]

Still better than with no label. @subgrafik can you have a look/do some research if we can improve it?

[mirekm]

I don't think localization should be a big concern here to be honest. It's a demo shop and Menu is quite an international phrase. But even if so I suppose the label could be just a plain text not part of the SVG icon itself, right?

[patrys]

Hint: half of the world does not use the Latin script.

[mirekm]

Does demo shop feature any other language than English?

[patrys]

Yes, we're partly localised to all languages supported by Django and we're about to merge translation support for products. Also I want the code to behave correctly even where content is currently missing. We should do things correctly with regard to i18n/l10n/t9n.

[mirekm]

Nonetheless I can't see this being an issue in either way — Menu word can be (and possibly should be) localized as any other label as soon as our demo is fully localized (but it is not for now as far as I'm aware).

[mirekm]

Of course we should do things correctly and consistently across the board — localization is not an exception here.

[patrys]

Ok, so we agree that "MENU" should be a regular string marked with {% trans %}. Can we also get a screenshot with clickable areas highlighted? We should make sure there are no dead zones in the header where the user expects the action to work (like between icons and the edge of the screen for example).

[benekex2]

"MENU" as string

@patrys @mirekm

[patrys]

Positioning looks good, screenshot looks like if it came from VHS 😂