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

Settle on serif font, add scroll to top component

Browse Source
This commit is contained in:
Tanner Collin 2019-08-30 06:22:26 +00:00
parent 23cdbc9292
commit 20a9d9d452
17 changed files with 42 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/public/index.html
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
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
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
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 Normal file
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
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
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 Normal file
View File

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

BIN
webclient/src/fonts/AppSILR.ttf Normal file
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
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
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>