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">
<head>
<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
name="description"
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 Article from './Article.js';
import Comments from './Comments.js';
import ScrollToTop from './ScrollToTop.js';
class App extends React.Component {
constructor(props) {
@ -44,6 +45,8 @@ class App extends React.Component {
<Route path='/' exact component={Feed} />
<Route path='/:id' exact component={Comments} />
<Route path='/:id/a' exact component={Article} />
<ScrollToTop />
</Router>
</div>
);

2
webclient/src/Comments.js
View File

@ -42,7 +42,7 @@ class Article extends React.Component {
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
{level < 6 ?
{level < 5 ?
c.comments.map(i => this.displayComment(story, i, level + 1))
:
<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/';
class Feed extends React.Component {
constructor(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;
}
.dark .story-text a {
color: #ddd;
}
.dark .story-text a::after {
.dark .article a {
border-bottom: 1px solid #aaaaaa;
}
@ -42,13 +38,10 @@
}
.dark .article .info a {
border-bottom: none;
color: #828282;
}
.dark .comments a {
border-bottom: 1px solid #aaaaaa;
}
.dark .comment.lined {
border-left: 1px solid #444444;
}

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

@ -74,6 +74,10 @@ span.source {
max-width: 38rem;
}
.article a {
border-bottom: 1px solid #222222;
}
.article h1 {
font-size: 1.6rem;
}
@ -107,6 +111,7 @@ span.source {
}
.article .info a {
border-bottom: none;
color: #828282;
}
.article .info a:hover {
@ -114,38 +119,16 @@ span.source {
}
.story-text {
font: 1.2rem/1.5 'CharisSILW', sans-serif;
letter-spacing: 0.004rem;
}
.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;
font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
margin-top: 1em;
}
.comments {
margin-left: -1rem;
}
.comments a {
border-bottom: 1px solid #222222;
margin-left: -1.25rem;
}
.comment {
padding-left: 1rem;
padding-left: 1.25rem;
}
.comment.lined {
@ -159,7 +142,7 @@ span.source {
.toggleDot {
position: fixed;
bottom: 1rem;
right: 1rem;
left: 1rem;
height: 3rem;
width: 3rem;
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-family: CharisSILW;
src: url(CharisSIL-R.woff);
font-family: 'Apparatus SIL';
src: url('AppSILR.ttf') format('truetype');
}
@font-face {
font-family: CharisSILW;
font-family: 'Apparatus SIL';
font-style: italic;
src: url(CharisSIL-I.woff);
src: url('AppSILI.ttf') format('truetype');
}
@font-face {
font-family: CharisSILW;
font-family: 'Apparatus SIL';
font-weight: bold;
src: url(CharisSIL-B.woff);
src: url('AppSILB.ttf') format('truetype');
}
@font-face {
font-family: CharisSILW;
font-family: 'Apparatus SIL';
font-weight: bold;
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 {
scrollTop() {
window.scrollTo(0, 0);
}
render() {
const id = this.props.id;
const article = this.props.article;
return (
<div className='toggleDot'>
<div className='button'>
<Link to={'/' + id + (article ? '/a' : '')} onClick={this.scrollTop} replace>
<Link to={'/' + id + (article ? '/a' : '')}>
<img src={Switch} />
</Link>
</div>