Add fullscreen mode

webclient/src/App.js

@@ -3,8 +3,9 @@ import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import localForage from 'localforage';
 import './Style-light.css';
 import './Style-dark.css';
+import './Style-red.css';
 import './fonts/Fonts.css';
-import { ForwardDot } from './utils.js';
+import { BackwardDot, ForwardDot } from './utils.js';
 import Feed from './Feed.js';
 import Article from './Article.js';
 import Comments from './Comments.js';
@@ -38,6 +39,11 @@ class App extends React.Component {
 		localStorage.setItem('theme', 'dark');
 	}
 
+	red() {
+		this.setState({ theme: 'red' });
+		localStorage.setItem('theme', 'red');
+	}
+
 	componentDidMount() {
 		if (!this.cache.length) {
 			localForage.iterate((value, key) => {
@@ -47,9 +53,26 @@ class App extends React.Component {
 		}
 	}
 
+	goFullScreen() {
+		if ('wakeLock' in navigator) {
+			navigator.wakeLock.request('screen');
+		}
+
+		document.body.requestFullscreen({ navigationUI: 'hide' }).then(() => {
+			window.addEventListener('resize', () => this.forceUpdate());
+			this.forceUpdate();
+		});
+	};
+
+	exitFullScreen() {
+		document.exitFullscreen().then(() => {
+			this.forceUpdate();
+		});
+	};
+
 	render() {
 		const theme = this.state.theme;
-		document.body.style.backgroundColor = theme === 'dark' ? '#000' : '#eeeeee';
+		document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
 
 		return (
 			<div className={theme}>
@@ -58,12 +81,17 @@ class App extends React.Component {
 						<p>
 							<Link to='/'>QotNews</Link>
 
-							<span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a></span>
+							<span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a> - <a href='#' onClick={() => this.red()}>Red</a></span>
 							<br />
 							<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 						</p>
 						<Route path='/(|search)' component={Search} />
 						<Route path='/(|search)' component={Submit} />
+						<Route path='/(|search)' render={() => !document.fullscreenElement ?
+							<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
+						:
+							<button className='fullscreen' onClick={() => this.exitFullScreen()}>Exit Fullscreen</button>
+						} />
 					</div>
 
 					<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
@@ -73,6 +101,7 @@ class App extends React.Component {
 					</Switch>
 					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
 
+					<BackwardDot />
 					<ForwardDot />
 
 					<ScrollToTop />

webclient/src/ScrollToTop.js

@@ -15,6 +15,7 @@ class ScrollToTop extends React.Component {
 		}
 
 		window.scrollTo(0, 0);
+		document.body.scrollTop = 0;
 	}
 
 	render() {

webclient/src/Style-light.css

@@ -2,9 +2,30 @@ body {
 	text-rendering: optimizeLegibility;
 	font: 1rem/1.3 sans-serif;
 	color: #000000;
-	margin-bottom: 100vh;
 	word-break: break-word;
 	font-kerning: normal;
+	margin: 0;
+}
+
+::backdrop {
+	background-color: rgba(0,0,0,0);
+}
+
+body:fullscreen {
+	overflow-y: scroll !important;
+}
+body:-ms-fullscreen {
+	overflow-y: scroll !important;
+}
+body:-webkit-full-screen {
+	overflow-y: scroll !important;
+}
+body:-moz-full-screen {
+	overflow-y: scroll !important;
+}
+
+#root {
+	margin: 8px 8px 100vh 8px !important;
 }
 
 a {
@@ -22,6 +43,12 @@ input {
 	border-radius: 4px;
 }
 
+.fullscreen {
+	margin: 0.25rem;
+	padding: 0.25rem;
+}
+
+
 pre {
 	overflow: auto;
 }
@@ -185,16 +212,20 @@ span.source {
 	cursor: pointer;
 }
 
-.toggleDot {
+.dot {
+	cursor: pointer;
 	position: fixed;
-	bottom: 1rem;
-	left: 1rem;
 	height: 3rem;
 	width: 3rem;
 	background-color: #828282;
 	border-radius: 50%;
 }
 
+.toggleDot {
+	bottom: 1rem;
+	left: 1rem;
+}
+
 .toggleDot .button {
 	font: 2rem/1 'icomoon';
 	position: relative;
@@ -203,21 +234,27 @@ span.source {
 }
 
 .forwardDot {
-	cursor: pointer;
-	position: fixed;
 	bottom: 1rem;
 	right: 1rem;
-	height: 3rem;
-	width: 3rem;
-	background-color: #828282;
-	border-radius: 50%;
 }
 
 .forwardDot .button {
-	font: 2.5rem/1 'icomoon';
+	font: 2rem/1 'icomoon';
 	position: relative;
-	top: 0.25rem;
+	top: 0.5rem;
-	left: 0.3rem;
+	left: 0.5rem;
+}
+
+.backwardDot {
+	bottom: 1rem;
+	right: 5rem;
+}
+
+.backwardDot .button {
+	font: 2rem/1 'icomoon';
+	position: relative;
+	top: 0.5rem;
+	left: 0.5rem;
 }
 
 .search form {

webclient/src/Style-red.css

@@ -0,0 +1,81 @@
+.red {
+	color: #b00;
+	scrollbar-color: #b00 #440000;
+}
+
+.red a {
+	color: #b00;
+}
+
+.red input {
+	color: #b00;
+	border: 1px solid #690000;
+}
+
+.red input::placeholder {
+	color: #690000;
+}
+
+.red hr {
+	background-color: #690000;
+}
+
+.red button {
+	background-color: #440000;
+	border-color: #b00;
+	color: #b00;
+}
+
+.red .item,
+.red .slogan {
+	color: #690000;
+}
+
+.red .item .source-logo {
+	display: none;
+}
+
+.red .item a {
+	color: #690000;
+}
+
+.red .item a.link {
+	color: #b00;
+}
+.red .item a.link:visited {
+	color: #690000;
+}
+
+.red .item .info a.hot {
+	color: #cc0000;
+}
+
+.red .article a {
+	border-bottom: 1px solid #aa0000;
+}
+
+.red .article u {
+	border-bottom: 1px solid #aa0000;
+	text-decoration: none;
+}
+
+.red .story-text img {
+	filter: grayscale(100%) brightness(20%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
+}
+
+.red .article .info {
+	color: #690000;
+}
+
+.red .article .info a {
+	border-bottom: none;
+	color: #690000;
+}
+
+.red .comment.lined {
+	border-left: 1px solid #440000;
+}
+
+.red .dot {
+	background-color: #440000;
+}

webclient/src/utils.js

@@ -25,8 +25,9 @@ export class ToggleDot extends React.Component {
 	render() {
 		const id = this.props.id;
 		const article = this.props.article;
+
 		return (
-			<div className='toggleDot'>
+			<div className='dot toggleDot'>
 				<div className='button'>
 					<Link to={'/' + id + (article ? '' : '/c')}>
 						{article ? '' : ''}
@@ -37,6 +38,27 @@ export class ToggleDot extends React.Component {
 	}
 }
 
+export class BackwardDot extends React.Component {
+	goBackward() {
+		localStorage.setItem('scrollLock', 'True');
+		window.history.back();
+	}
+
+	render() {
+		const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+		if (!isMobile) return null;
+		if (!document.fullscreenElement) return null;
+
+		return (
+			<div className='dot backwardDot' onClick={this.goBackward}>
+				<div className='button'>
+					
+				</div>
+			</div>
+		);
+	}
+}
+
 export class ForwardDot extends React.Component {
 	goForward() {
 		localStorage.setItem('scrollLock', 'True');
@@ -48,9 +70,9 @@ export class ForwardDot extends React.Component {
 		if (!isMobile) return null;
 
 		return (
-			<div className='forwardDot' onClick={this.goForward}>
+			<div className='dot forwardDot' onClick={this.goForward}>
 				<div className='button'>
-					
+					
 				</div>
 			</div>
 		);