Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile layout? #6

Closed
vantuz-subhuman opened this issue May 22, 2018 · 6 comments

Comments

@vantuz-subhuman
Copy link
Member

commented May 22, 2018

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.

@vantuz-subhuman vantuz-subhuman self-assigned this May 22, 2018

@vantuz-subhuman vantuz-subhuman moved this from Eternal to In progress in Cardano-calculator May 28, 2018

@vantuz-subhuman vantuz-subhuman added this to the v0.1.1 milestone May 31, 2018

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented May 31, 2018

This PR closed the MAJOR part of this issue: #10

vantuz-subhuman added a commit that referenced this issue Jun 15, 2018

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 15, 2018

PRs #10 and #17 have like 98% of what I meant here done. There're now a working desktop and separate mobile layouts (gonna be released in #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!

@vantuz-subhuman vantuz-subhuman referenced this issue Jun 15, 2018
4 of 4 tasks complete

@vantuz-subhuman vantuz-subhuman moved this from In progress to Done in Cardano-calculator Jun 15, 2018

@DEFAULTERROR1

This comment has been minimized.

Copy link
Collaborator

commented Jun 16, 2018

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.

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 16, 2018

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 #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!!

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 16, 2018

Separate issue created for NumPad: #18

@DEFAULTERROR1

This comment has been minimized.

Copy link
Collaborator

commented Jun 18, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.