Add a button to toggle between article and comments

webclient/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "QNN",
-  "name": "Create React App Sample",
+  "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"
 }

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 {
 						:
 							<p>loading...</p>
 						}
+						<ToggleDot id={id} />
 					</div>
 				}
 			</div>

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 {
 						:
 							<p>loading...</p>
 						}
+						<ToggleDot id={id} article={true} />
 					</div>
 				}
 			</div>

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;
+}

webclient/src/switch.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="11.834147mm"
+   height="11.62744mm"
+   viewBox="0 0 11.834147 11.62744"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="switch.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="30.478118"
+     inkscape:cy="30.752042"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="2"
+     fit-margin-left="2"
+     fit-margin-right="2"
+     fit-margin-bottom="2"
+     inkscape:window-width="1616"
+     inkscape:window-height="1108"
+     inkscape:window-x="1291"
+     inkscape:window-y="782"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-72.951327,-125.63605)">
+    <g
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot4518" />
+    <g
+       aria-label="⇄"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text4528">
+      <path
+         d="m 74.951327,133.23261 v -0.46509 l 2.030884,-2.03089 0.620117,0.62012 -1.204061,1.20406 h 6.299357 v 0.8785 h -6.299357 l 1.204061,1.20406 -0.620117,0.62012 z m 7.834147,-3.56568 v 0.46509 l -2.030884,2.03088 -0.620117,-0.62011 1.204061,-1.20407 h -6.299357 v -0.87849 h 6.299357 l -1.204061,-1.20407 0.620117,-0.62011 z"
+         style="stroke-width:0.26458332px"
+         id="path4531"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

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 (
+			<div className='toggleDot'>
+				<div className='button'>
+					<Link to={'/' + id + (article ? '/a' : '')} onClick={this.scrollTop} replace>
+						<img src={Switch} />
+					</Link>
+				</div>
+			</div>
+		);
+	}
+}