Skip to content

Commit 906cf95

Browse files
author
Sarah Thompson
authored
Merge pull request #2131 from veteransaffairscanada/fallback_page_cleanup
Fallback page minor styling
2 parents 56bf521 + f47b5a7 commit 906cf95

File tree

3 files changed

+72
-55
lines changed

3 files changed

+72
-55
lines changed

‎components/layout.js

+25-18
Original file line numberDiff line numberDiff line change
@@ -82,27 +82,33 @@ class Layout extends Component {
8282
<ErrorBoundary>
8383
<Content>
8484
<SkipToMainContent skipLink={skipLink} t={t} />
85-
<div id="header_css" css={black_bg}>
85+
{!this.props.parentIsFallbackPage ? (
86+
<div id="header_css" css={black_bg}>
87+
{t("current-language-code") === "en" ? (
88+
<VacHeaderEn t={t} url={url} />
89+
) : (
90+
<VacHeaderFr t={t} url={url} />
91+
)}
92+
</div>
93+
) : null}
94+
<main id="main">{this.props.children}</main>
95+
</Content>
96+
{!this.props.parentIsFallbackPage ? (
97+
<div css={backgoundColour1}>
98+
<Container>
99+
<FeedbackBar t={t} />
100+
</Container>
101+
</div>
102+
) : null}
103+
{!this.props.parentIsFallbackPage ? (
104+
<div id="footer_styles" css={fontStyle}>
86105
{t("current-language-code") === "en" ? (
87-
<VacHeaderEn t={t} url={url} />
106+
<VacFooterEn />
88107
) : (
89-
<VacHeaderFr t={t} url={url} />
108+
<VacFooterFr />
90109
)}
91110
</div>
92-
<main id="main">{this.props.children}</main>
93-
</Content>
94-
<div css={backgoundColour1}>
95-
<Container>
96-
<FeedbackBar t={t} />
97-
</Container>
98-
</div>
99-
<div id="footer_styles" css={fontStyle}>
100-
{t("current-language-code") === "en" ? (
101-
<VacFooterEn />
102-
) : (
103-
<VacFooterFr />
104-
)}
105-
</div>
111+
) : null}
106112
</ErrorBoundary>
107113
{noScriptTag}
108114
</div>
@@ -119,7 +125,8 @@ Layout.propTypes = {
119125
url: PropTypes.object.isRequired,
120126
skipLink: PropTypes.string.isRequired,
121127
title: PropTypes.string,
122-
backgroundColor: PropTypes.string
128+
backgroundColor: PropTypes.string,
129+
parentIsFallbackPage: PropTypes.bool
123130
};
124131

125132
Layout.defaultProps = {

‎fallback-pages/browser-incompatible.html

+44-37
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,53 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Your browser is not supported | Ton navigateur n'est pas supporté</title>
8-
<link href="//cdn.muicss.com/mui-0.9.39-rc1/css/mui.min.css" rel="stylesheet" type="text/css"/>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>
8+
Your browser is not supported | Ton navigateur n'est pas supporté
9+
</title>
10+
<link
11+
href="//cdn.muicss.com/mui-0.9.39-rc1/css/mui.min.css"
12+
rel="stylesheet"
13+
type="text/css"
14+
/>
915
<style>
1016
/**
1117
* Body CSS
1218
*/
13-
html,
14-
body {
15-
height: 100%;
16-
}
17-
html,
18-
body
19-
{
20-
-webkit-font-smoothing: antialiased;
21-
-moz-osx-font-smoothing: grayscale;
22-
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
23-
}
24-
/**
19+
html,
20+
body {
21+
height: 100%;
22+
}
23+
html,
24+
body {
25+
-webkit-font-smoothing: antialiased;
26+
-moz-osx-font-smoothing: grayscale;
27+
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
28+
}
29+
/**
2530
* Content CSS
2631
*/
27-
#content-wrapper {
28-
min-height: 100%;
29-
}
30-
</style>
31-
</head>
32-
<body>
33-
<div id="content-wrapper" class="mui--text-center">
34-
<br/>
35-
<br/>
36-
<p>
37-
Your current version of this browser is not supported. Please update to the latest version.
38-
To see a list of all benefits click <a href='/all-benefits'>here</a>.
39-
</p>
40-
<p>
41-
Votre version actuelle de ce navigateur n'est pas supportée. S'il vous plaît mettre à jour à la dernière version.
42-
Pour voir la liste complète des avantages, cliquez <a href='/all-benefits'>ici</a>.
43-
</p>
44-
</div>
45-
</body>
32+
#content-wrapper {
33+
min-height: 100%;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div id="content-wrapper" class="mui--text-center">
39+
<br />
40+
<br />
41+
<p>
42+
Your current version of this browser is not supported. Please update to
43+
the latest version. To see a list of all benefits click
44+
<a href="/all-benefits">here</a>.
45+
</p>
46+
<p>
47+
Votre version actuelle de ce navigateur n'est pas supportée. S'il vous
48+
plaît mettre à jour à la dernière version. Pour voir la liste complète
49+
des avantages, cliquez <a href="/all-benefits?lng=fr">ici</a>.
50+
</p>
51+
</div>
52+
</body>
4653
</html>

‎pages/all-benefits.js

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { connect } from "react-redux";
99
import BenefitList from "../components/benefit_list";
1010
import Container from "../components/container";
1111
import Header from "../components/typography/header";
12+
import { globalTheme } from "../theme";
1213

1314
const header = css`
1415
padding-bottom: 10px;
@@ -28,6 +29,8 @@ export class AllBenefits extends Component {
2829
title={t("titles.all_benefits")}
2930
skipLink="#mainContent"
3031
url={url}
32+
backgroundColor={globalTheme.colour.paleGreyTwo}
33+
parentIsFallbackPage={true}
3134
>
3235
<Container id="mainContent">
3336
<Header size="xl" headingLevel="h1" paddingTop="30" styles={header}>

0 commit comments

Comments
 (0)