Commit 8393ee8b authored by edwardjung's avatar edwardjung Committed by Commit bot

Intersitial page updates

+ New consistent sized icons.
+ Fix bug when page zooming in an out on desktop.
+ Add styling for secondary button for 'Show saved copy' experiment.

BUG=456746,422882

Review URL: https://codereview.chromium.org/916093003

Cr-Commit-Position: refs/heads/master@{#316225}
parent 8014afb4
......@@ -184,6 +184,12 @@ input[type=checkbox] {
url(images/2x/stop_sign.png) 2x);
}
.secondary-button {
-webkit-margin-end: 16px;
background: #d9d9d9;
color: #696969;
}
.small-link {
color: #696969;
font-size: .875em;
......@@ -305,6 +311,11 @@ input[type=checkbox] {
border: 0;
margin: 20px 0 0;
}
.secondary-button {
-webkit-margin-end: 0;
margin-top: 16px;
}
}
/* Fixed nav. */
......@@ -313,7 +324,7 @@ input[type=checkbox] {
(min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
(max-height: 420px) and (orientation:landscape) {
body:not(.offline) .nav-wrapper {
body .nav-wrapper {
background: #f7f7f7;
bottom: 0;
left: 0;
......@@ -408,7 +419,7 @@ input[type=checkbox] {
}
@media (min-height: 400px) and (orientation:portrait) {
body:not(.safe-browsing-has-checkbox):not(.offline) .interstitial-wrapper {
body:not(.safe-browsing-has-checkbox) .interstitial-wrapper {
margin-bottom: 145px;
}
}
......@@ -457,7 +468,7 @@ input[type=checkbox] {
height: 40px;
}
body:not(.neterror) .icon {
body:not(.offline) .icon {
height: 80px;
width: 80px;
}
......@@ -485,17 +496,12 @@ input[type=checkbox] {
.nav-wrapper {
padding: 28px;
}
.neterror .icon {
height: 80px;
width: 65.6px;
}
}
@media (min-width: 420px) and (max-width: 736px) and
(min-height: 240px) and (max-height: 298px) and
(orientation:landscape) {
body:not(.neterror) .icon {
body:not(.offline) .icon {
height: 50px;
width: 50px;
}
......@@ -563,7 +569,7 @@ input[type=checkbox] {
@media (max-height: 240px) and (orientation: landscape),
(max-height: 480px) and (orientation: portrait),
(max-width: 419px) and (max-height: 323px) {
body:not(.neterror) .icon {
body:not(.offline) .icon {
height: 56px;
width: 56px;
}
......@@ -575,7 +581,8 @@ input[type=checkbox] {
/* Small mobile screens. No fixed nav. */
@media (max-height: 400px) and (orientation: portrait),
(max-height: 240px) and (orientation: landscape) {
(max-height: 240px) and (orientation: landscape),
(max-width: 419px) and (max-height: 360px) {
.interstitial-wrapper {
display: flex;
flex-direction: column;
......
......@@ -11,15 +11,24 @@ var mobileNav = false;
function onResize() {
var helpOuterBox = document.querySelector('#details');
var mainContent = document.querySelector('#main-content');
var mediaQuery = '(max-width: 420px) and (orientation: portrait),' +
'(max-width: 736px) and (max-height: 420px) and (orientation: landscape)';
var mediaQuery = '(min-width: 300px) and (max-width: 420px) and ' +
'(orientation: portrait), (max-width: 736px) and ' +
'(max-height: 420px) and (orientation: landscape)';
var detailsHidden = helpOuterBox.classList.contains('hidden');
// Check for change in nav status.
if (mobileNav != window.matchMedia(mediaQuery).matches) {
// Show the top content and reset the details section to hidden.
mainContent.classList.toggle('hidden', false);
helpOuterBox.classList.toggle('hidden', true);
mobileNav = !mobileNav;
// Handle showing the top content / details sections according to state.
if (mobileNav) {
mainContent.classList.toggle('hidden', !detailsHidden);
helpOuterBox.classList.toggle('hidden', detailsHidden);
} else if (!detailsHidden) {
// Non mobile nav with visible details.
mainContent.classList.remove('hidden');
helpOuterBox.classList.remove('hidden');
}
}
}
......
......@@ -48,19 +48,14 @@ a {
content: -webkit-image-set(
url(default_100_percent/common/error_network_generic.png) 1x,
url(default_200_percent/common/error_network_generic.png) 2x);
height: 50px;
padding-top: 20px;
width: 41px;
}
.icon-offline {
content: -webkit-image-set(
url(default_100_percent/offline/100-error-offline.png) 1x,
url(default_200_percent/offline/200-error-offline.png) 2x);
height: 47px;
margin: 0 0 40px;
position: relative;
width: 44px;
}
#content-top {
......@@ -292,9 +287,8 @@ html[subframe] body {
max-width: 600px;
overflow: hidden;
position: absolute;
top: 10px;
top: 35px;
width: 44px;
z-index: 2;
}
.offline .runner-canvas {
......@@ -304,6 +298,7 @@ html[subframe] body {
overflow: hidden;
position: absolute;
top: 0;
z-index: 2;
}
.offline .controller {
......@@ -349,4 +344,18 @@ html[subframe] body {
.offline .interstitial-wrapper {
margin-bottom: 20px;
}
.icon-offline {
margin-bottom: 20px;
}
}
@media (max-height: 320px) and (orientation: landscape) {
.icon-offline {
margin-bottom: 0;
}
.offline .runner-container {
top: 10px;
}
}
\ No newline at end of file
......@@ -152,6 +152,13 @@ function onDocumentLoad() {
loadTimeData.valueExists('staleLoadButton') &&
loadTimeData.getValue('staleLoadButton').msg) {
controlButtonDiv.hidden = false;
// Set the secondary button state in the cases of two call to actions.
// Reload is secondary to stale load.
if (loadTimeData.valueExists('staleLoadButton') &&
loadTimeData.getValue('staleLoadButton').msg) {
reloadButton.classList.add('secondary-button');
}
}
// Add a main message paragraph.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment