Mobile view UX fixes

[eeroma]

The mobile view seems really crowded atm and the overflowing text in the cards make it seem unfinished. Suggested fixes:

• Fix issue nr. The visual balance of icons and labels is off #452 to fix the inbalance between icons and labels
• Make the time section inside the card 100% and make the content inline.
• Make the Card details (name, content etc.) 100% underneath the time section and do not show content that overflows or wrap the content if it's too long.
• Fix the font sizes in the bottom navigation on mobile so that they don't overlap and make the icons a couple of pixels smaller. (on 320px viewport width)

[jouni]

Thanks for the feedback!

As a guideline, try to focus only on pointing out issues, without prescribing fixes at the same time. The team is responsible for working with the product designers in finding correct solutions.

That said, I’m more than willing to spend time with the team to polish the UI if there is genuine interest in when the team has time to focus making the app look pretty and polished.

[jouni]

There seem to be some weird bugs in the bakery styling that cause a lot of these issues.

For example, when inspecting the app, the body element has height: 0.1px as inline style. Where does that come from?

[manolo]

body styles in the hosted page are defined via @BodySize flow annotation
https://github.com/vaadin/bakery-app-starter-flow-spring/blob/master/src/main/java/com/vaadin/starter/bakery/ui/MainView.java#L47

[manolo]

Seems not be an issue anymore. Closing it.

[jouni]

Is the online demo updated to show these fixes? At least bakery-flow.demo.vaadin.com looks different on iOS than the screenshot above.

[jouni]

Same thing with bakery-flow-spring.app.fi

[manolo]

Actually is updated, but for some reason the media query in iOS does not matches, interesting ...

[manolo]

Seems a problem with bundling, the fix works in dev-mode but not when bundled.

This is the PR that apparently should fix the issue #484

@jouni any clue

[alexberazouski]

Seems it's bakery styling issue; reproduced on safari desktop.

[alexberazouski]

Is any of described bugs still an issue? I cannot reproduce it anymore

[johannesh2]

Closing as fixed. Please re-open if needed.