From 08d02f6013dd04234343f4a9c12810400dd90d91 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 8 Aug 2022 23:21:49 +0000 Subject: [PATCH] Add fullscreen mode --- webclient/src/App.js | 25 ++++++++++++- webclient/src/ScrollToTop.js | 1 + webclient/src/Style-light.css | 63 +++++++++++++++++++++++++------- webclient/src/Style-red.css | 6 +-- webclient/src/fonts/icomoon.ttf | Bin 1556 -> 1552 bytes webclient/src/utils.js | 28 ++++++++++++-- 6 files changed, 101 insertions(+), 22 deletions(-) diff --git a/webclient/src/App.js b/webclient/src/App.js index 3489093..56de518 100644 --- a/webclient/src/App.js +++ b/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 {

+ !document.fullscreenElement ? + + : + + } /> } /> @@ -79,6 +101,7 @@ class App extends React.Component { } /> + diff --git a/webclient/src/ScrollToTop.js b/webclient/src/ScrollToTop.js index dd4e735..267da92 100644 --- a/webclient/src/ScrollToTop.js +++ b/webclient/src/ScrollToTop.js @@ -15,6 +15,7 @@ class ScrollToTop extends React.Component { } window.scrollTo(0, 0); + document.body.scrollTop = 0; } render() { diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 1e40db4..8bb4164 100644 --- a/webclient/src/Style-light.css +++ b/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 { diff --git a/webclient/src/Style-red.css b/webclient/src/Style-red.css index 42a15ca..e0afd1a 100644 --- a/webclient/src/Style-red.css +++ b/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; } diff --git a/webclient/src/fonts/icomoon.ttf b/webclient/src/fonts/icomoon.ttf index 901aaa11f4fa42f15a77a9eac5bc1242ac796df2..73ba8473e08fe35be1b5536e5605902cc4740509 100644 GIT binary patch delta 464 zcmY+AKS)AR6vn^v?#r|SP0fZPuHj%)5f(y$v_%93twFuge1rc;2c2|^M#~^-ilDJc zh=ztoTMz`*-lL`>qJ~j(+rAqBoj8_6V|K_B+vF5yy NOKFfR(9EkR^aow9Y;6Dl delta 463 zcmY+9y-UMT6vfX?YGZ1tC8<@YAGH{rM5(163>Y^N(V?rLp{*8aw9pQI4DF;&;unZG zh<|{StAdDwIO--2q973;76RP-sqjjY1&a(-{XSLVimF~!_ClH#5;9jF zS@tOLBpK{G0hVhm6wR>w+5qpmah0q%lf2><{9 diff --git a/webclient/src/utils.js b/webclient/src/utils.js index f592dd6..5fd95e2 100644 --- a/webclient/src/utils.js +++ b/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 ( -
+
{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 ( +
+
+  +
+
+ ); + } +} + 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 ( -
+
-  + 
);