vue-touch-keyboard

vue-touch-keyboard copied to clipboard

Currently issue: When giving keys a custom size it can be hard to make them align correctly with the other lines, and the math doesn't add up. For instance, in the page running in npm run dev, the 0 key for the numeric input is supposed to be 3x as big as a normal key. A normal key flex: 40, so logically, the 0 key should be { size: 40 * 3 }, but then it is too small so it is set to 130. This is caused by the margins mixed with flex.

This PR fixes this so that the keys align correctly, and the math adds up. It is mostly just code around, and had to wrap all keys in another div.

I tried to keep the diff clean, but I had to indent so I suggest you look at the diff with "No Whitespace" enabled.

Coverage remained the same at 5.217% when pulling 4f65a0704e849f4c7414b4af419c9e700304e546 on MiniGod:correct-key-widths into 8bfd533824ab88c33d6186cc46c6da80e38a2eba on icebob:master.

Coverage remained the same at 5.217% when pulling 4f65a0704e849f4c7414b4af419c9e700304e546 on MiniGod:correct-key-widths into 8bfd533824ab88c33d6186cc46c6da80e38a2eba on icebob:master.

Coverage remained the same at 5.042% when pulling c3afd0fd353a61b135f22f98f6b6b623383c6726 on MiniGod:correct-key-widths into 8f37ccc8c3e5f378178a64b40fb6e63a98ebb8b1 on icebob:master.

Could you show screenshot about differences, I mean how it looks before & after PR.

Of course!

master:

this pr:

I just pushed a fix to set the width of zero so it is align with the other buttons. Width of zero is now 120 because it should be 3 times as big as the other buttons on that row (which have default width of 40).

Before this PR the width of zero was 130 to align with the other buttons, which must have been found by trial and error, rather than math, which is the point of this PR to solve.

For your convenience, here is a screenshot of this PR without changing the size of zero:

Notice how the zero is too big. This might be considered a breaking change by some if they had custom layouts with width values to align with other buttons.

And this is how the normal keyboard changed.

Note: I have not changed any of the width properties of the buttons in the normal keyboard

master:

this pr: