Improve Responsiveness on Install Screen

[jonlong]

#1059

First time contributor checklist

• I have read the README and Contributor Guidelines
• I have signed the Contributor Licence Agreement

Contributor checklist

• My contribution is fully baked and ready to be merged as is
• My changes are rebased on the latest master branch
• My commits are in nice logical chunks
• I have followed the best practices in my commit messages
• I have made the choice whether I want the BitHub reward or not by omitting or adding the word FREEBIE in my Git commit messages
• I have tested my contribution on these platforms:

• macOS Sierra, Google Chrome 56.0.2924.87 (64-bit)

• My changes pass all the local tests 100%
• I have considered whether my changes need additional tests, and in the case they do, I have written them

---

Description

Demo

Responsiveness

Short window height

Notes

Handles the edge case where images in the Install steps can obscure the text below them at certain window dimensions.

In most cases, it's not possible to replicate this behavior due to minimum dimension settings in chromium.js. However, some window managers (such as i3) can ignore those settings, producing this bug.

This fix introduces a flexible, responsive layout to the Install steps, with the goal of keeping the action buttons in a consistent position while adapting the rest of the content to the remaining available space. The result is a clean, usable screen at any window size.

In the rare instance that a window's dimensions are less than that of the minimums set in chromium.js, scrollbars will appear to keep the smallest acceptable layout intact.

Potential side effects:

• Each .step element contains an.inner flexbox wrapper, which arranges its children in a column. The layout works best when each flex-item is an element that wraps the content inside of it. I believe I accounted for all the possibilities on the Install screen, but any future .step items might want to keep that pattern in mind.

Test Methods

• I removed the window restrictions by commenting these lines out of my local build.
• I tested by manually showing and hiding each .step element in options.html, and resizing the window using both the cursor and a window manager.

TODO:

• Test Install process using local builds of the iOS app

Resolves #1059

[liliakai]

Looks pretty nice, except for the first screen when the window grows very large and the logo is kind of floating in the middle by itself. Can we the "Welcome..." and other text tucked just under the logo, instead of down by the dots/button?

[jonlong]

Yep, for sure! I was considering it, but didn't want to presume too much design-wise. Here's a quick peek:

[vinyll]

Shouldn't the get started button also remain with the text instead of the step dots?

[jonlong]

@vinyll The original design was built in a way that kept all the action buttons in a fixed position (presumably so you could click through multiple steps without having to move your mouse cursor).

If the button is moved underneath the text, then we couldn't count on it being in the same position from step-to-step, due to the variation in text and image heights.

I wanted to keep that original feature intact, and fixing the actions alongside the step dots seemed like the only way to make it happen.

[jonlong]

Quick update — just tested this out with a local build of the iOS app and everything is rendering as expected.

@liliakai If it looks good to you, I think it's good to go for me!

[liliakai]

7dd4bad
18df92b