Add a button to toggle between article and comments
This commit is contained in:
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
74
webclient/src/switch.svg
Normal file
74
webclient/src/switch.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user