diff --git a/webclient/public/manifest.json b/webclient/public/manifest.json index e4c94e6..448ac7f 100644 --- a/webclient/public/manifest.json +++ b/webclient/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "QNN", + "name": "Qot News Network", "icons": [ { "src": "favicon.ico", @@ -21,5 +21,5 @@ "start_url": ".", "display": "standalone", "theme_color": "#000000", - "background_color": "#ffffff" + "background_color": "#000000" } diff --git a/webclient/src/Article.js b/webclient/src/Article.js index 265bbac..33c1647 100644 --- a/webclient/src/Article.js +++ b/webclient/src/Article.js @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { sourceLink, infoLine } from './utils.js'; +import { sourceLink, infoLine, ToggleDot } from './utils.js'; const apiUrl = 'http://news-api.dns.t0.vc/'; @@ -33,6 +33,7 @@ class Article extends React.Component { } render() { + const id = this.props.match.params.id; const story = this.state.story; const error = this.state.error; @@ -61,6 +62,7 @@ class Article extends React.Component { :

loading...

} + } diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js index d467f5d..1d24daf 100644 --- a/webclient/src/Comments.js +++ b/webclient/src/Comments.js @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import moment from 'moment'; -import { sourceLink, infoLine } from './utils.js'; +import { sourceLink, infoLine, ToggleDot } from './utils.js'; const apiUrl = 'http://news-api.dns.t0.vc/'; @@ -48,6 +48,7 @@ class Article extends React.Component { } render() { + const id = this.props.match.params.id; const story = this.state.story; const error = this.state.error; @@ -74,6 +75,7 @@ class Article extends React.Component { :

loading...

} + } diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 0690961..b5ab58a 100644 --- a/webclient/src/Style-light.css +++ b/webclient/src/Style-light.css @@ -65,6 +65,10 @@ span.source { color: #444444; } +.article { + padding-bottom: 3rem; +} + .article-container { margin: 1rem auto; max-width: 38rem; @@ -151,3 +155,20 @@ span.source { .comment .text { margin-top: -0.5rem; } + +.toggleDot { + position: fixed; + bottom: 1rem; + right: 1rem; + height: 3rem; + width: 3rem; + background-color: #828282; + border-radius: 50%; +} + +.toggleDot .button { + font: 3rem/1 serif; + position: relative; + top: 0.1rem; + left: 0.1rem; +} diff --git a/webclient/src/switch.svg b/webclient/src/switch.svg new file mode 100644 index 0000000..2091882 --- /dev/null +++ b/webclient/src/switch.svg @@ -0,0 +1,74 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/webclient/src/utils.js b/webclient/src/utils.js index 08327e5..917dd34 100644 --- a/webclient/src/utils.js +++ b/webclient/src/utils.js @@ -2,6 +2,8 @@ import React from 'react'; import moment from 'moment'; import { Link } from 'react-router-dom'; +import Switch from './switch.svg'; + export const sourceLink = (story) => { const url = story.url || story.link; const urlObj = new URL(url); @@ -26,3 +28,22 @@ export const clearStorage = () => { localStorage.clear(); localStorage.setItem('theme', themeSetting); }; + +export class ToggleDot extends React.Component { + scrollTop() { + window.scrollTo(0, 0); + } + render() { + const id = this.props.id; + const article = this.props.article; + return ( +
+
+ + + +
+
+ ); + } +}