Skip to content
This repository was archived by the owner on Apr 27, 2022. It is now read-only.

Commit c65d474

Browse files
scruffianscruffian
committed
add an error state
1 parent 205d72e commit c65d474

File tree

5 files changed

+58
-42
lines changed

5 files changed

+58
-42
lines changed

‎css/layout.css

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ input, select, button {
3030

3131
@media ( min-width: 768px ) {
3232
input, select, button {
33-
font-size: 20px;
33+
font-size: 20px;
3434
}
3535
}
3636
input {
@@ -106,40 +106,40 @@ h1, h2, h3, h4, h5, h6 {
106106
text-align: center;
107107
z-index: 10; }
108108
.full-page .content {
109-
font-weight: 300;
110-
margin: 0 auto;
111-
position: relative;
112-
text-align: left;
113-
width: 100%;
114-
max-width: 320px; }
109+
font-weight: 300;
110+
margin: 0 auto;
111+
position: relative;
112+
text-align: left;
113+
width: 100%;
114+
max-width: 320px; }
115115
.full-page .content p {
116116
text-align: left;
117117
}
118-
.full-page .content .logo {
119-
overflow: auto;
120-
position: relative;
121-
text-align: center; }
122-
.full-page .content .logo h1 {
123-
font-size: 3rem;
124-
font-weight: 100; }
125-
.full-page .content .features {
126-
margin-top: 1em; }
127-
.full-page .content .features ul {
128-
list-style: disc;
129-
margin: 0 0 1em 1em; }
130-
.full-page .content .features p {
131-
margin-bottom: 1rem; }
132-
.full-page .content .button {
133-
margin: 1em 0;
134-
text-align: center; }
135-
.full-page .content .button .installation-info {
136-
margin-top: 1rem; }
137-
.full-page .content .button button {
138-
background: #333;
139-
cursor: pointer;
140-
padding: .5rem 1rem; }
141-
.full-page .content .button button[disabled] {
142-
background: #ccc; }
118+
.full-page .content .logo {
119+
overflow: auto;
120+
position: relative;
121+
text-align: center; }
122+
.full-page .content .logo h1 {
123+
font-size: 3rem;
124+
font-weight: 100; }
125+
.full-page .content .features {
126+
margin-top: 1em; }
127+
.full-page .content .features ul {
128+
list-style: disc;
129+
margin: 0 0 1em 1em; }
130+
.full-page .content .features p {
131+
margin-bottom: 1rem; }
132+
.full-page .content .button {
133+
margin: 1em 0;
134+
text-align: center; }
135+
.full-page .content .button .installation-info {
136+
margin-top: 1rem; }
137+
.full-page .content .button button {
138+
background: #333;
139+
cursor: pointer;
140+
padding: .5rem 1rem; }
141+
.full-page .content .button button[disabled] {
142+
background: #ccc; }
143143
.full-page .loading {
144144
background: darkgray;
145145
color: #fff;
@@ -153,3 +153,16 @@ h1, h2, h3, h4, h5, h6 {
153153
white-space: nowrap;
154154
width: 5%;
155155
}
156+
157+
.errors {
158+
position: fixed;
159+
top: 1em;
160+
left: 1em;
161+
right: 1em;
162+
text-align: center;
163+
}
164+
165+
.javascripture-wrapper {
166+
background: white;
167+
position: relative;
168+
}

‎index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
<style id="bodyFontSize"></style>
3737
</head>
3838
<body>
39+
<div class="errors">
40+
<div id="loading" class="loading">Loading...</div>
41+
<br /><br />
42+
<p>If you can see this, something probably went wrong. <a href="/clear.html">Clear settings and start over</a> or <a href="http://scruffian.wordpress.com/contact/">Email me</a></p>
43+
</div>
44+
3945

4046
<div id="content">
4147
<div class="full-page">
@@ -65,12 +71,6 @@ <h1>Javascripture</h1>
6571
</div>
6672
</div>
6773

68-
<div class="referencePanel" id="reference">
69-
<div id="loading" class="loading">Loading...</div>
70-
71-
<p>Having problems? <a href="/clear.html">Clear settings and start over</a></p>
72-
</div>
73-
7474
</body>
7575

7676
<script>

‎src/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const store = createStore(
3333
window.devToolsExtension ? window.devToolsExtension() : f => f,
3434
compose(
3535
applyMiddleware( routerMiddleware( history ), thunk )
36-
)
36+
)
3737
);
3838

3939
persistStore( store );
@@ -44,7 +44,7 @@ const routes = {
4444
component: Root,
4545
};
4646

47-
document.getElementById( 'reference' ).style.display = 'none';
47+
//document.getElementById( 'reference' ).style.display = 'none';
4848

4949
const App = () => {
5050
return (

‎src/components/root.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class Root extends React.Component{
3232

3333
render() {
3434
return (
35-
<div>
35+
<div className="javascripture-wrapper">
3636
<style>{ this.getBodyStyles() }</style>
3737
<KeyboardShortcuts />
3838
<WordHighlight word={ this.state.highlightedWord } />
@@ -55,5 +55,5 @@ const mapStateToProps = ( state, ownProps ) => {
5555

5656

5757
export default connect(
58-
mapStateToProps
58+
mapStateToProps,
5959
)( Root );

‎todo

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// todo
2+
- fixing caching
3+
- make errors work better
4+
- set up a stable alternative site
25
- improve mobile ui
36
- browser cache
47
- simplify word/word-single

0 commit comments

Comments
 (0)