Permalink
Browse files

sorted the offline style issue

  • Loading branch information...
cedmax committed Mar 14, 2018
1 parent e3ae74b commit 006471fb8ef3e65b2d02de37b37665b446b0b610
Showing with 96 additions and 34 deletions.
  1. +2 −1 package.json
  2. +2 −2 public/service-worker.js
  3. +10 −2 src/Components/Footer.js
  4. +7 −3 src/Components/List.js
  5. +5 −0 src/Components/OfflineMain.js
  6. +31 −25 src/Pages/Home.js
  7. +39 −1 yarn.lock
@@ -6,7 +6,7 @@
"scripts": {
"start": "react-static start",
"stage": "react-static build --staging",
"build": "react-static build",
"build": "react-static build && cp dist/index.html dist/offline.html && rexreplace '<body>' '<body class=\"offline\">' dist/offline.html",
"serve": "serve dist -p 3000"
},
"dependencies": {
@@ -23,6 +23,7 @@
"devDependencies": {
"babel-plugin-styled-components": "^1.5.1",
"eslint-config-react-tools": "1.1.2",
"rexreplace": "^3.0.1",
"serve": "^6.5.3"
}
}
@@ -1,6 +1,6 @@
/* global skipWaiting clients, */
const cacheName = 'files'
const offlinePage = '/index.html'
const cacheName = 'assets'
const offlinePage = '/offline.html'

addEventListener('install', installEvent => {
skipWaiting()
@@ -3,18 +3,26 @@ import styled from 'styled-components'

const Footer = styled.footer`
font-size: 50%;
pointer-events: ${props => props.theme.interaction};
pointer-events: ${({ theme }) => theme.interaction};
a:hover::after {
pointer-events: none;
animation: 1s linear infinite blinking;
position: absolute;
margin-left: .5rem;
content: '<= the webmaster';
color: ${props => props.theme.a.active};
color: ${({ theme }) => theme.a.active};
display: inline;
text-decoration: underline;
}
.offline & {
pointer-events: ${({ theme }) => theme.offline.interaction};
a:hover::after {
color: ${({ theme }) => theme.offline.a.active};
}
}
`

export default () => (
@@ -4,9 +4,13 @@ import styled from 'styled-components'
const List = styled.ul`
list-style: none;
li a {
padding-right: 2.5em;
}
li a::before {
content: "";
border-color: transparent ${props => props.theme.a.default};
border-color: transparent ${({ theme }) => theme.a.default};
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
height: 0;
@@ -22,7 +26,7 @@ const List = styled.ul`
position: absolute;
margin-left: .5rem;
content: 'NEW!';
color: ${props => props.theme.a.active};
color: ${({ theme }) => theme.a.active};
display: inline;
text-decoration: underline;
}
@@ -47,7 +51,7 @@ const List = styled.ul`
}
li a:visited::before {
border-color: ${props => props.theme.a.visited};
border-color: ${({ theme }) => theme.a.visited};
}
li a:active::before {
@@ -62,9 +62,14 @@ export default class Offline extends Component {
}

componentWillMount () {
document.body.classList.add('offline')
this.setState({ ...defaultState })
}

componentWillUnmount () {
document.body.classList.remove('offline')
}

cheat () {
this.setState({
cheat: true,
@@ -14,15 +14,13 @@ if (typeof window !== 'undefined') {
}

const theme = {
online: {
interaction: 'unset',
bk: 'white',
front: 'black',
a: {
default: '#0000EE',
visited: '#551A8B',
active: '#ff0000',
},
interaction: 'unset',
bk: 'white',
front: 'black',
a: {
default: '#0000EE',
visited: '#551A8B',
active: '#ff0000',
},
offline: {
interaction: 'none',
@@ -36,30 +34,38 @@ const theme = {
},
}

const BodyStyle = styled.div`
background: red;
min-height: 100%;
padding: 0 2vw 2vw;
position: relative;
width: 100%;
user-select: ${props => props.theme.interaction};
background: ${props => props.theme.bk};
color: ${props => props.theme.front};
const themableProps = theme => `
user-select: ${theme.interaction};
background: ${theme.bk};
color: ${theme.front};
a {
color: ${props => props.theme.a.default};
color: ${theme.a.default};
&:visited {
color: ${props => props.theme.a.visited};
color: ${theme.a.visited};
}
&:active {
color: ${props => props.theme.a.active};
color: ${theme.a.active};
}
}
`

const HomePage = ({ theme, offline }) => (
const BodyStyle = styled.div`
background: red;
min-height: 100%;
padding: 0 2vw 2vw;
position: relative;
width: 100%;
${themableProps(theme)}
.offline & {
${themableProps(theme.offline)}
}
`

const HomePage = ({ offline }) => (
<ThemeProvider theme={theme}>
<BodyStyle>
<Header />
@@ -72,8 +78,8 @@ const HomePage = ({ theme, offline }) => (
export default () => (
(typeof window !== 'undefined') ? (
<Fragment>
<Online><HomePage theme={theme.online} offline={false} /></Online>
<Offline><HomePage theme={theme.offline} offline /></Offline>
<Online><HomePage /></Online>
<Offline><HomePage offline /></Offline>
</Fragment>
) : <HomePage theme={theme.online} offline={false} />
) : <HomePage />
)

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 006471f

Please sign in to comment.