tanner
/
qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Settle on serif font, add scroll to top component

Browse Source
master
Tanner Collin 5 years ago
parent 23cdbc9292
commit 20a9d9d452
17 changed files with 42 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      webclient/public/index.html
  2. 3
      webclient/src/App.js
  3. 2
      webclient/src/Comments.js
  4. 1
      webclient/src/Feed.js
  5. 16
      webclient/src/ScrollToTop.js
  6. 11
      webclient/src/Style-dark.css
  7. 37
      webclient/src/Style-light.css
  8. BIN
      webclient/src/fonts/AppSILB.ttf
  9. BIN
      webclient/src/fonts/AppSILBI.ttf
  10. BIN
      webclient/src/fonts/AppSILI.ttf
  11. BIN
      webclient/src/fonts/AppSILR.ttf
  12. BIN
      webclient/src/fonts/CharisSIL-B.woff
  13. BIN
      webclient/src/fonts/CharisSIL-BI.woff
  14. BIN
      webclient/src/fonts/CharisSIL-I.woff
  15. BIN
      webclient/src/fonts/CharisSIL-R.woff
  16. 17
      webclient/src/fonts/Fonts.css
  17. 5
      webclient/src/utils.js

2
webclient/public/index.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta <meta
name="description" name="description"
content="Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode." content="Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode."

3
webclient/src/App.js
Unescape View File

@ -6,6 +6,7 @@ import './fonts/Fonts.css';
import Feed from './Feed.js'; import Feed from './Feed.js';
import Article from './Article.js'; import Article from './Article.js';
import Comments from './Comments.js'; import Comments from './Comments.js';
import ScrollToTop from './ScrollToTop.js';
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
@ -44,6 +45,8 @@ class App extends React.Component {
<Route path='/' exact component={Feed} /> <Route path='/' exact component={Feed} />
<Route path='/:id' exact component={Comments} /> <Route path='/:id' exact component={Comments} />
<Route path='/:id/a' exact component={Article} /> <Route path='/:id/a' exact component={Article} />
<ScrollToTop />
</Router> </Router>
</div> </div>
); );

2
webclient/src/Comments.js
Unescape View File

@ -42,7 +42,7 @@ class Article extends React.Component {
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} /> <div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
{level < 6 ? {level < 5 ?
c.comments.map(i => this.displayComment(story, i, level + 1)) c.comments.map(i => this.displayComment(story, i, level + 1))
: :
<div className='info'><p>[replies snipped]</p></div> <div className='info'><p>[replies snipped]</p></div>

1
webclient/src/Feed.js
Unescape View File

@ -5,7 +5,6 @@ import { clearStorage } from './utils.js';
const apiUrl = 'http://news-api.dns.t0.vc/'; const apiUrl = 'http://news-api.dns.t0.vc/';
class Feed extends React.Component { class Feed extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);

16
webclient/src/ScrollToTop.js
Unescape View File

@ -0,0 +1,16 @@
import React from 'react';
import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom';
class ScrollToTop extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0);
}
}
render() {
return null;
}
}
export default withRouter(ScrollToTop);

11
webclient/src/Style-dark.css
Unescape View File

@ -25,11 +25,7 @@
color: #cccccc; color: #cccccc;
} }
.dark .story-text a { .dark .article a {
color: #ddd;
}
.dark .story-text a::after {
border-bottom: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa;
} }
@ -42,13 +38,10 @@
} }
.dark .article .info a { .dark .article .info a {
border-bottom: none;
color: #828282; color: #828282;
} }
.dark .comments a {
border-bottom: 1px solid #aaaaaa;
}
.dark .comment.lined { .dark .comment.lined {
border-left: 1px solid #444444; border-left: 1px solid #444444;
} }

37
webclient/src/Style-light.css
Unescape View File

@ -74,6 +74,10 @@ span.source {
max-width: 38rem; max-width: 38rem;
} }
.article a {
border-bottom: 1px solid #222222;
}
.article h1 { .article h1 {
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -107,6 +111,7 @@ span.source {
} }
.article .info a { .article .info a {
border-bottom: none;
color: #828282; color: #828282;
} }
.article .info a:hover { .article .info a:hover {
@ -114,38 +119,16 @@ span.source {
} }
.story-text { .story-text {
font: 1.2rem/1.5 'CharisSILW', sans-serif; font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
letter-spacing: 0.004rem; margin-top: 1em;
}
.story-text a {
color: #000000;
text-decoration: none;
display: inline-block;
position: relative;
}
.story-text a::after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid #222222;
margin-top: 0.55rem;
} }
.comments { .comments {
margin-left: -1rem; margin-left: -1.25rem;
}
.comments a {
border-bottom: 1px solid #222222;
} }
.comment { .comment {
padding-left: 1rem; padding-left: 1.25rem;
} }
.comment.lined { .comment.lined {
@ -159,7 +142,7 @@ span.source {
.toggleDot { .toggleDot {
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
right: 1rem; left: 1rem;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background-color: #828282; background-color: #828282;

BIN
webclient/src/fonts/AppSILB.ttf
View File

Binary file not shown.

BIN
webclient/src/fonts/AppSILBI.ttf
View File

Binary file not shown.

BIN
webclient/src/fonts/AppSILI.ttf
View File

Binary file not shown.

BIN
webclient/src/fonts/AppSILR.ttf
View File

Binary file not shown.

BIN
webclient/src/fonts/CharisSIL-B.woff
View File

Binary file not shown.

BIN
webclient/src/fonts/CharisSIL-BI.woff
View File

Binary file not shown.

BIN
webclient/src/fonts/CharisSIL-I.woff
View File

Binary file not shown.

BIN
webclient/src/fonts/CharisSIL-R.woff
View File

Binary file not shown.

17
webclient/src/fonts/Fonts.css
Unescape View File

@ -1,24 +1,23 @@
@font-face { @font-face {
font-family: CharisSILW; font-family: 'Apparatus SIL';
src: url(CharisSIL-R.woff); src: url('AppSILR.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: CharisSILW; font-family: 'Apparatus SIL';
font-style: italic; font-style: italic;
src: url(CharisSIL-I.woff); src: url('AppSILI.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: CharisSILW; font-family: 'Apparatus SIL';
font-weight: bold; font-weight: bold;
src: url(CharisSIL-B.woff); src: url('AppSILB.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: CharisSILW; font-family: 'Apparatus SIL';
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
src: url(CharisSIL-BI.woff); src: url('AppSILBI.ttf') format('truetype');
} }

5
webclient/src/utils.js
Unescape View File

@ -30,16 +30,13 @@ export const clearStorage = () => {
}; };
export class ToggleDot extends React.Component { export class ToggleDot extends React.Component {
scrollTop() {
window.scrollTo(0, 0);
}
render() { render() {
const id = this.props.id; const id = this.props.id;
const article = this.props.article; const article = this.props.article;
return ( return (
<div className='toggleDot'> <div className='toggleDot'>
<div className='button'> <div className='button'>
<Link to={'/' + id + (article ? '/a' : '')} onClick={this.scrollTop} replace> <Link to={'/' + id + (article ? '/a' : '')}>
<img src={Switch} /> <img src={Switch} />
</Link> </Link>
</div> </div>

Write Preview
Loading…
Cancel
Save