1
0
Fork 0

For #1881 - Uses flex box to pin button to the bottom

master
Jeff Boek 2019-06-07 11:26:50 -07:00
parent 45c509fbce
commit 5dfde74376
3 changed files with 10 additions and 9 deletions

View File

@ -44,7 +44,7 @@ li > button {
} }
/* Push the #ignoreWarningButton to the bottom on the blocked site page */ /* Push the #ignoreWarningButton to the bottom on the blocked site page */
.blockedsite > #errorPageContainer > #errorLongContent { #errorLongContent {
flex: 1; flex: 1;
} }
@ -67,6 +67,7 @@ p {
button { button {
/* Force buttons to display: block here to try and enforce collapsing margins */ /* Force buttons to display: block here to try and enforce collapsing margins */
display: block; display: block;
flex: 0;
height: 36px; height: 36px;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
@ -77,11 +78,10 @@ button {
line-height:16px; line-height:16px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
position: fixed;
bottom: 20px;
text-aligned:center; text-aligned:center;
vertical-aligned:center; vertical-aligned:center;
background-image: none; background-image: none;
margin-bottom: 20px;
} }
button.inProgress { button.inProgress {
@ -117,10 +117,7 @@ button.inProgress {
* This number should be kept in sync with the media query for tablets below */ * This number should be kept in sync with the media query for tablets below */
max-width: 550px; max-width: 550px;
margin: 0 auto; margin: 0 auto;
transform: translateY(var(--moz-background-height)); min-height: 100%;
padding-bottom: var(--moz-vertical-spacing);
min-height: calc(100% - var(--moz-background-height) - var(--moz-vertical-spacing));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

View File

@ -32,7 +32,9 @@
</div> </div>
<!-- Retry Button --> <!-- Retry Button -->
<button id="errorTryAgain" onclick="window.location.reload()">%button%</button> <div id="buttonWrapper">
<button id="errorTryAgain" onclick="window.location.reload()">%button%</button>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -32,7 +32,9 @@
</div> </div>
<!-- Retry Button --> <!-- Retry Button -->
<button id="errorTryAgain" onclick="window.history.back() ">%backButton%</button> <div id="buttonWrapper">
<button id="errorTryAgain" onclick="window.history.back() ">%backButton%</button>
</div>
</div> </div>
</body> </body>
</html> </html>