Add fullscreen mode

webclient/src/App.js

@@ -5,7 +5,7 @@ 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';
@@ -53,6 +53,23 @@ 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 ? '#000' : '#eeeeee';
@@ -70,6 +87,11 @@ class App extends React.Component {
 						</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} />} />
@@ -79,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;
-	left: 0.3rem;
+	top: 0.5rem;
+	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

@@ -76,10 +76,6 @@
 	border-left: 1px solid #440000;
 }
 
-.red .toggleDot {
-	background-color: #440000;
-}
-
-.red .forwardDot {
+.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>
 		);