From d0d3f80291eb1891bc76dc62f980da6fb2ee0767 Mon Sep 17 00:00:00 2001 From: Jon Long Date: Fri, 17 Mar 2017 17:16:09 -0400 Subject: [PATCH] Improve Responsiveness on Install Screen 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 think I accounted for all the possibilities on the Install screen, but any future `.step` items might want to keep that pattern in mind. Resolves #1059 FREEBIE --- options.html | 90 ++++++++++++++++++++++++---------------- stylesheets/options.css | 29 +++++++++---- stylesheets/options.scss | 30 ++++++++++---- 3 files changed, 99 insertions(+), 50 deletions(-) diff --git a/options.html b/options.html index a0140090f..0576083f2 100644 --- a/options.html +++ b/options.html @@ -10,66 +10,86 @@