search

antipalos / antipalos.github.io

Σελίδες γνώσης
4 stars 5 forks source link

Mobile layout? #6

Closed vsubhuman closed 6 years ago

vsubhuman commented 6 years ago

In general

As stated in the About section - a design is not really my thing. The page was heavily optimised and tested only for desktop browsers. It kinda usable on mobile devices, but I sincerely surprised it's readable at all - I can honestly say that I dedicated 0.00000001% of any effort to make it small-screen-friendly.

It would be super cool to make it really mobile-compatible, I'm all for it, but that would include:

  1. Specific layout - in order for the calculator screen look ok on a vertical mobile screen the table must be changed to a vertical layout, so that it goes in blocks, like [label/input/context], instead of horizontal rows.
  2. Specific input fields - optimised for the "finger input"
  3. "Burger menu" - instead of the tab row at the top

All of this would be awesome to make, but I don't really know all this stuff. I might try to migrate to Bootstrap or some other thing to make it automatically "portable", but I also need to learn those first at least a little.

Anyways - this might be done only after all the data-separation issues are solved, like: text should be extracted, one-pager separated into proper html\js\css modules, the whole architecture fixed. Only then I may try to make it more mobile friendly.

For now

If anyone has specific tips on how to make it work better on small screens - you are welcomed to comment on this issue or create separate specific small issues.

If anyone wants to help - you can submit a PR with some fixes for mobile. Or you can PM me to try set up some collaboration if you ready to help more with the whole layout\design thing.

vsubhuman commented 6 years ago

This PR closed the MAJOR part of this issue: https://github.com/antipalos/antipalos.github.io/pull/10

vsubhuman commented 6 years ago

PRs https://github.com/antipalos/antipalos.github.io/pull/10 and https://github.com/antipalos/antipalos.github.io/pull/17 have like 98% of what I meant here done. There're now a working desktop and separate mobile layouts (gonna be released in https://github.com/antipalos/antipalos.github.io/issues/16).

The only thing left for possible improvement are specific mobile input fields (something like this: https://i.imgur.com/U9ko9pV.png), but I'm neither sure how those are done, not whether they are optimal for general number input (not specific, like time or dates).

This issue will be closed with the v0.1.1 release, because we're super good now on this front. I might create separate issue asking people so suggest any further improvements.

Special kudos to @DEFAULTERROR1 for MAJOR contribution!

DEFAULTERROR1 commented 6 years ago

I will take a look into making the input fields more mobile friendly. The problem currently is that input fields with type="text" and cleave.js are being used to format the values. The screenshot you posted is a native mobile input pad for type="time" and another one would be available for type="number". Type="number" can not be used to format the value without heavy regEx for every localization. I guess we have to make a design decision on either dropping value formatting or implementing a standalone version (e.g https://github.com/kabachello/jQuery.NumPad) and hook up formatting to the onChange callback.

vsubhuman commented 6 years ago

I will take a look into making the input fields more mobile friendly.

Holy Fucking Shit!

@DEFAULTERROR1, I originally mentioned "mobilised" inputs only as a distant wish, since text-inputs are really kinda hard to use with a mobile layout. Never thought someone (or especially you) would really want to try to make it happen :D

Yeah, the pic I linked is a native control, but I just like the idea how it is specialised for "sausage fingers", so just wanted to show that anything in that direction would be cool to check out. The NumPad looks RAD as fuck, especially with the separate optional button. Totally gonna create an issue to try it out. I am now working on the https://github.com/antipalos/antipalos.github.io/issues/11 and even more fields are now gonna work under Cleave (plus weird pre\post processings in order to make different locale formats compatible).

Thank you for even more cool contributions!!

vsubhuman commented 6 years ago

Separate issue created for NumPad: https://github.com/antipalos/antipalos.github.io/issues/18

DEFAULTERROR1 commented 6 years ago

Thank you for even more cool contributions!!

My pleasure! It's a welcome opportunity to get my hands dirty with some frontend work and i like the idea of having a reliable stacking calculator for the community.

I'll give the numpad implementation a shot when #11 is ready for it :D