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
This commit is contained in:
Jon Long
lilia
parent
37fa5f1376
commit
d0d3f80291
3 changed files with 99 additions and 50 deletions
90
options.html
90
options.html
|
|
@ -10,66 +10,86 @@
|
|||
<div id='install' class='main'>
|
||||
<script type='text/x-tmpl-mustache' id='install_flow_template'>
|
||||
<div id='step1' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='nav'>
|
||||
<h1>{{ installWelcome }}</h1>
|
||||
<p>{{ installTagline }}</p>
|
||||
<div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<h1>{{ installWelcome }}</h1>
|
||||
<p>{{ installTagline }}</p>
|
||||
<div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step2' class='step'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<div class='nav'>
|
||||
<p>{{{ installSignalLink }}}</p>
|
||||
<div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<p>{{{ installSignalLink }}}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step3' class='step'>
|
||||
<div id="qr"></div>
|
||||
<p>{{ installAndroidInstructions }}</p>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<div id="qr"></div>
|
||||
<p>{{ installAndroidInstructions }}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id='step4' class='step'>
|
||||
<p>{{ installLinkingWithNumber }}</p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p>{{ installComputerName }}</p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false' maxlength='50' />
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<p>{{ installLinkingWithNumber }}</p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p>{{ installComputerName }}</p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false' maxlength='50' />
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div>
|
||||
<input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id='step5' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='stepTooManyDevices' class='step'>
|
||||
<div class='error-dialog clearfix'>
|
||||
<div class='panel'>{{ installTooManyDevices }}</div>
|
||||
<div class='inner error-dialog clearfix'>
|
||||
<div class='panel step-body'>{{ installTooManyDevices }}</div>
|
||||
<div class='nav'>
|
||||
<button class='ok step3'>{{ ok }}</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -869,13 +869,29 @@ input, button, select, textarea {
|
|||
line-height: inherit; }
|
||||
|
||||
#install {
|
||||
display: none; }
|
||||
display: none;
|
||||
height: 100%; }
|
||||
@media screen and (max-height: 665px) {
|
||||
#install {
|
||||
height: 666px; } }
|
||||
|
||||
.main {
|
||||
padding: 70px 0 10em; }
|
||||
padding: 70px 0 50px; }
|
||||
|
||||
.step {
|
||||
display: none; }
|
||||
display: none;
|
||||
height: 100%; }
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%; }
|
||||
.inner .step-body {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
max-width: 600px; }
|
||||
|
||||
#signal-computer,
|
||||
#signal-phone {
|
||||
|
|
@ -907,9 +923,8 @@ a {
|
|||
|
||||
.nav {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
margin-top: 2em;
|
||||
margin-top: auto;
|
||||
padding: 0 20px; }
|
||||
.nav .button {
|
||||
margin-bottom: 3em; }
|
||||
|
|
@ -943,9 +958,6 @@ h1 {
|
|||
font-weight: normal;
|
||||
padding-bottom: 10px; }
|
||||
|
||||
#signal-icon {
|
||||
margin-top: 20px; }
|
||||
|
||||
h3.step {
|
||||
margin-top: 0;
|
||||
font-weight: bold; }
|
||||
|
|
@ -1077,6 +1089,7 @@ ul.country-list {
|
|||
.progress-dialog {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto; }
|
||||
.progress-dialog .status {
|
||||
|
|
|
|||
|
|
@ -41,12 +41,32 @@ input, button, select, textarea {
|
|||
|
||||
#install {
|
||||
display: none;
|
||||
height: 100%;
|
||||
|
||||
// 666px is the minimum window height in chromium.js
|
||||
@media screen and (max-height: 665px) {
|
||||
height: 666px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
padding: 70px 0 10em;
|
||||
padding: 70px 0 50px;
|
||||
}
|
||||
.step {
|
||||
display: none;
|
||||
height: 100%;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.step-body {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
#signal-computer,
|
||||
|
|
@ -84,9 +104,8 @@ a {
|
|||
|
||||
.nav {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
margin-top: 2em;
|
||||
margin-top: auto;
|
||||
padding: 0 20px;
|
||||
|
||||
.button {
|
||||
|
|
@ -133,10 +152,6 @@ h1 {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#signal-icon {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h3.step {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
|
|
@ -287,6 +302,7 @@ ul.country-list {
|
|||
.progress-dialog {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue