Layout break issues incl. resolution specific issues

[pbca26]

Reference currency:

• Issues with top padding on various resolutions. Text on the left side becomes invisible.
• [Suggestion] Currencies are stacked in one column where they could take more space and make the page look compact.

Modals:

• Arrow back and close button X shift up/down depending on resolution. This is applicable to all modals.

Send Coin:

• [Suggestion] Modal takes full screen height on table/mobile like resolutions. Better if it will occupy only the required amount of screen space.

Passphrase modal:

• Under table/mobile like resolutions modal position is outside the viewport. It must be always centered.

Create wallet:

• Button “Next” obstructs the checkbox.
• Decline button’s height is less than Accept. Placeholder is not v-centered.
• Under table/mobile like resolutions “terms and conditions” text is in bold.
• Button block top padding near to zero on some resolutions. It should be more “spacious”.

Login “terms and conditions”:

• Double scroll bar.
• Text bleeds through button’s left corner. Button should fully overlay the text underneath it.

Dashboard Transactions unit (desktop):

• Issues with transaction hash positioning.
• Under HD/Full HD resolutions part of the hash gets cut. There’s enough space to show it completely.

Dashboard Transactions unit (mobile):

• Issues with transaction hash positioning. It overflows parent container and goes beyond viewport.
• Under small mobile resolution “History” placeholder gets cut if coin balance value is too long.
• Under small mobile resolution “Receive“ and “Send” buttons’ placeholders are not centered.

Screenshots: responsive issues.zip

[arkadig]

@pbca26 Done, please check.

Regarding the passphrase modal I couldn't find this in the mockups. http://i.prntscr.com/02233a48447f4a1e87eaa3ba36e05b46.png I have followed this one according the invisionapp file http://i.prntscr.com/8c7768b05b534df5aa65032e942f230a.png Please, let me know if there is something to be changed

[pbca26]

@arkadig leave it. It's relevant to coind mode only.

[pbca26]

@arkadig I need to run a full test to see if there's anything else left before I close the issue. Probably I'll do that next week.

[pbca26]

@arkadig I ran the test. Looks better now but still some issues. I will update this ticket tomorrow morning/evening with a new batch of screenshots.

[pbca26]

@arkadig here is a new batch of screenshots responsive issues part2.zip

I highlighted issues on the screenshots and left some comments as well.

Here is extra info on issues: Add coin - coin icons are half invisible, too much padding on top of tiles, possible issues with modes selector buttons Confirm tx passphrase - multiple issues, check screens Singup - elements are too cluttered, consult with Anton to come up with a solution Tx unit - same issue, elements are cluttered

Double scrollbars issue seems to be affecting all modals.

Some issues are resurfacing even though you said you fixed them. Please double check modal top control icons alignment.