Add forward button, convert icons to font

webclient/src/App.js

@@ -4,6 +4,7 @@ import localForage from 'localforage';
 import './Style-light.css';
 import './Style-dark.css';
 import './fonts/Fonts.css';
+import { ForwardDot } from './utils.js';
 import Feed from './Feed.js';
 import Article from './Article.js';
 import Comments from './Comments.js';
@@ -71,6 +72,8 @@ class App extends React.Component {
 					</Switch>
 					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
 
+					<ForwardDot />
+
 					<ScrollToTop />
 				</Router>
 			</div>

webclient/src/Style-light.css

@@ -174,10 +174,27 @@ span.source {
 }
 
 .toggleDot .button {
-	font: 3rem/1 serif;
+	font: 2rem/1 'icomoon';
 	position: relative;
-	top: 0.1rem;
-	left: 0.1rem;
+	top: 0.5rem;
+	left: 0.55rem;
+}
+
+.forwardDot {
+	position: fixed;
+	bottom: 1rem;
+	right: 1rem;
+	height: 3rem;
+	width: 3rem;
+	background-color: #828282;
+	border-radius: 50%;
+}
+
+.forwardDot .button {
+	font: 2.5rem/1 'icomoon';
+	position: relative;
+	top: 0.25rem;
+	left: 0.3rem;
 }
 
 .search form {

webclient/src/fonts/Fonts.css

@@ -21,3 +21,8 @@
 	font-style: italic;
     src: url('AppSILBI.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Icomoon';
+    src: url('icomoon.ttf') format('truetype');
+}

webclient/src/switch.svg

@@ -1,74 +0,0 @@
-<?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,8 +2,6 @@ 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);
@@ -31,7 +29,7 @@ export class ToggleDot extends React.Component {
 			<div className='toggleDot'>
 				<div className='button'>
 					<Link to={'/' + id + (article ? '' : '/c')}>
-						<img src={Switch} alt='toggle between article and comments' />
+						{article ? '' : ''}
 					</Link>
 				</div>
 			</div>
@@ -39,6 +37,20 @@ export class ToggleDot extends React.Component {
 	}
 }
 
+export class ForwardDot extends React.Component {
+	render() {
+		return (
+			<div className='forwardDot'>
+				<div className='button'>
+					<a href='javascript:void(0)' onClick={() => window.history.forward()}>
+						
+					</a>
+				</div>
+			</div>
+		);
+	}
+}
+
 export const logos = {
 	hackernews: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wgeBhwhciGZUAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGCSURBVFjD7Za/S0JRFMc/+oSgLWjLH/2AIKEhC2opIp1amqw/INCo9lbHghCnKDdpN5OoIGhISSLwx2RCEYSjUWhWpO+9hicopCHh8w29Mx3u/XLv95z7Pedcg+y1VQEBbUw0ang5gGBEY9MJ6ARMbaH6HdBnBlmC+5PfsVYX9PTCSx4KyQ4RsI6DxwcYIGSFxF5znHkOtvZBECDoa4tAe0+QDMFDVvFd7ta4pU0QTAo2GeqwBqIHIEkwMAQzaz/3LfNgn1Qw0aAKIswdQzZVy8Jyk+g3lNTfpSEXUakKjgJQrYB5GKY9DRpZALsDxCqEAyqWYT4G6etaFlYaol8HowCZBOSvVO4DR374+gTLCEytgs0JYxPKWtivUh9otOcM3FzC7CI43fBWVKK/vYBCqkudMLIN7yUYHFXe/qMMkZ0utuLyE8ROwWBU6j5+BqXHLs+C+GHdP9/VYBhJ1bpfedXHsU5A5Q9JKxEWa+KT5T8fY5C9NlnXgE7g3xMQNbxf/AZyEGqvyYs/dQAAAABJRU5ErkJggg==',
 	reddit: 'data:image/png;base64,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',