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 901aaa1..73ba847 100644 Binary files a/webclient/src/fonts/icomoon.ttf and b/webclient/src/fonts/icomoon.ttf differ 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 ( -
+
-  + 
);