search

parttio / touchkit

TouchKit is a library of mobile components for Vaadin Framework
https://vaadin.com/directory/component/touchkit
Other
8 stars 11 forks source link

Bad mobile formatting with TouchKit 5 #17

Open steinarb opened 6 years ago

steinarb commented 6 years ago

I'm in the process of porting a Vaadin7/TouchKit4 application to Vaadin8/TouchKit5.

I'm at the stage where the application looks similar to the Vaadin7/TouchKit4 version when displaying in a regular web browser on a PC.

However, on a mobile device, the formatting is all squashed up (the font is way too small, for one thing).

The Vaadin7/TouchKit4 version looks like this (this is what it's supposed to look like):
Ukelonn application on Vaadin 7 with TouchKit 4

The Vaadin8/TouchKit5 version looks like this:
Ukelonn application on Vaadin 8 with TouchKit 5

What might cause this layout difference? And why do I see it only on mobile devices?

The Vaadin7/TouchKit4 version of the code:
https://github.com/steinarb/ukelonn/blob/master/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnUI.java#L30
https://github.com/steinarb/ukelonn/blob/master/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UserView.java#L43

The Vaadin8/TouchKit5 version of the code:
https://github.com/steinarb/ukelonn/blob/work/using-vaadin-with-vaadin8/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnUI.java#L29
https://github.com/steinarb/ukelonn/blob/work/using-vaadin-with-vaadin8/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UserView.java#L46

I've used chrome development tools simulating an iPhone 5 to make the screen captures, but it is similar to what I see on real mobile devices.

steinarb commented 6 years ago

TouchKit 5 has a base.css that says "This file contains essential stuff from base theme.", and that contains a lot of commented out stuff.

Is any of the comment out stuff related to formatting on mobile devices?

mstahv commented 6 years ago

Related to https://github.com/parttio/touchkit/issues/15 ?

steinarb commented 6 years ago

I actually figured out a way to fix this last night: go back to where I started with my servlet extending the TouchKitServlet https://github.com/steinarb/ukelonn/blob/56f292623b741b89f17abf4a10eabd1dd0d106c3/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnServlet.java#L48 instead of the VaadinServlet https://github.com/steinarb/ukelonn/blob/0d20b044650ba487c42b9864ea46cab493851af6/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnServlet.java#L46

Early on in the Vaadin 8 conversion I couldn't see any difference between extending the VaadinServlet versus extending the TouchKitServlet, so I just extended the VaadinServlet with the theory of keeping things as simple as possible.

But extending the TouchKitServlet is necessary to get mobile formatting, and even makes mobile formatting work (more or less) for the valo theme.

So I guess this issue can be resolved as not a bug.

mstahv commented 6 years ago

And related #15 and #16 as well?

steinarb commented 6 years ago

Yes, I'm guessing it's probably related to #15 and #16.

But I don't have any evidence to back this guess.