Add noscript messages (#341)
* Noscript warnings * Incomplete sentence.
This commit is contained in:
parent
c5979d5635
commit
c92032e630
|
@ -53,7 +53,15 @@ class AuthRoute extends React.Component<Props> {
|
|||
if (onlyLoggedOut) {
|
||||
newLocation = authForwardLocation || { ...location, pathname: '/profile' };
|
||||
}
|
||||
return <Redirect to={{ ...newLocation }} />;
|
||||
return (
|
||||
<>
|
||||
<noscript className="noScript is-block">
|
||||
This page requires you to login before you can access it, but you have
|
||||
Javascript disabled. Please enable Javascript and login to continue.
|
||||
</noscript>
|
||||
<Redirect to={{ ...newLocation }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
private setAuthForward = () => {
|
||||
|
|
|
@ -29,6 +29,12 @@ export default class Template extends React.PureComponent<Props> {
|
|||
);
|
||||
return (
|
||||
<BasicHead title={title}>
|
||||
{!isHeaderTransparent && (
|
||||
<noscript className="noScript is-banner">
|
||||
It looks like you have Javascript disabled. You may experience issues with
|
||||
interactive parts of the site.
|
||||
</noscript>
|
||||
)}
|
||||
<div className={className}>
|
||||
<Header isTransparent={isHeaderTransparent} />
|
||||
<Layout.Content className="Template-content">
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
import React from 'react';
|
||||
import AuthFlow from 'components/AuthFlow';
|
||||
|
||||
const SignInPage = () => <AuthFlow />;
|
||||
const SignInPage = () => (
|
||||
<>
|
||||
<noscript className="noScript is-block">
|
||||
Sign in and account creation require Javascript. Please enable it to continue.
|
||||
</noscript>
|
||||
<AuthFlow />
|
||||
</>
|
||||
);
|
||||
|
||||
export default SignInPage;
|
||||
|
|
|
@ -10,7 +10,14 @@ class CreatePage extends React.Component<Props> {
|
|||
const { location } = this.props;
|
||||
const parsed = parse(location.search);
|
||||
const rfpId = parsed.rfp ? parseInt(parsed.rfp, 10) : undefined;
|
||||
return <DraftList createIfNone createWithRfpId={rfpId} />;
|
||||
return (
|
||||
<>
|
||||
<noscript className="noScript is-block">
|
||||
Proposal creation requires Javascript. You’ll need to enable it to continue.
|
||||
</noscript>
|
||||
<DraftList createIfNone createWithRfpId={rfpId} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,39 @@
|
|||
@import 'variables.less';
|
||||
|
||||
.noScript {
|
||||
display: block;
|
||||
|
||||
&.is-banner {
|
||||
padding: 0.25rem 1rem;
|
||||
text-align: center;
|
||||
background: @warning-color;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&.is-block {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 420px;
|
||||
margin: 2rem auto;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid @warning-color;
|
||||
background: rgba(@warning-color, 0.05);
|
||||
border-radius: 2px;
|
||||
|
||||
&:before {
|
||||
content: '!';
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 1.8rem;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
margin-right: 1rem;
|
||||
border: 2px solid @warning-color;
|
||||
color: @warning-color;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -9,3 +9,4 @@
|
|||
@import 'react-mde-overrides.less';
|
||||
@import 'antd-overrides.less';
|
||||
@import 'html.less';
|
||||
@import 'noscript.less';
|
Loading…
Reference in New Issue