diff --git a/src/front-end.jsx b/src/front-end.jsx index 887c3f6..2d9b20f 100644 --- a/src/front-end.jsx +++ b/src/front-end.jsx @@ -87,7 +87,7 @@ class FrontEnd extends PureComponent { */ handleScroll = (evt) => { let { topNavCollapsed } = this.state; - let container = document.body.parentElement; + let container = document.body; let previousPos = this.previousScrollPosition || 0; let currentPos = container.scrollTop; let delta = currentPos - previousPos; @@ -99,9 +99,11 @@ class FrontEnd extends PureComponent { let page = (pageContainer) ? pageContainer.firstChild : null; if (page) { let pageRect = page.getBoundingClientRect(); - if (pageRect.y <= 40) { + if (pageRect.top <= 40) { this.setState({ topNavCollapsed: true }); } + } else { + this.setState({ topNavCollapsed: true }); } } } else { diff --git a/src/index.html b/src/index.html index bac58ea..867b6b2 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - + Relaks WordPress Example diff --git a/src/pages/welcome-page.jsx b/src/pages/welcome-page.jsx index 9eb6352..fa288b4 100644 --- a/src/pages/welcome-page.jsx +++ b/src/pages/welcome-page.jsx @@ -6,7 +6,7 @@ class WelcomePage extends AsyncComponent { async renderAsync(meanwhile) { return ( -
+

Welcome

Lorem ipsum dolor sit amet, utinam quodsi expetendis in has. Primis accumsan mnesarchum ne eam, simul ludus no est, duo ne ferri minim facilisis. Virtute detraxit intellegam quo ad, usu mundi minimum at, soleat insolens intellegam no est. Dicta viderer efficiantur id vix, simul zril legere te sea. Sed quaeque alienum principes ex, ne idque dicit duo, dolor voluptaria in vel.

Ne nisl essent cum, at quod antiopam has. Sanctus graecis ocurreret sed at, veniam urbanitas at cum. Epicurei ullamcorper est ut, no mei virtute lobortis indoctum. Putant inermis definiebas ne nec, habeo mazim offendit ei vim. Dicat tempor no duo, mea ex cibo autem. Eos probatus ocurreret rationibus no.

diff --git a/src/style.scss b/src/style.scss index 86797c6..d46f609 100644 --- a/src/style.scss +++ b/src/style.scss @@ -2,16 +2,13 @@ box-sizing: border-box; } -HTML { - overflow-x: hidden; - overscroll-behavior: contain; -} - BODY { overflow-x: hidden; overflow-y: scroll; + overscroll-behavior: contain; font-family: sans-serif; margin: 0; + background-color: #66023c; // prevent white gap in side nav } .contents { @@ -35,8 +32,7 @@ A { width: 18em; left: 0; top: 0; - bottom: -10em; // prevent visual glitch in Android - padding-bottom: 10em; + bottom: 0; background-color: #66023c; overflow: hidden; } @@ -45,7 +41,7 @@ A { position: fixed; left: 18em; top: 0; - width: calc(100vw - 18em); + width: calc(100% - 18em); background-color: #990000; // prevent visual glitch in Android .title-bar { @@ -123,19 +119,21 @@ A { .input-container { position: relative; + box-sizing: content-box; INPUT { max-width: 20em; width: 100%; - padding-left: 1.6em; + padding-left: 1.8em; border: 1px solid #660000; + border-radius: 0; } .fa-search { position: absolute; - left: 4px; - top: 3px; - font-size: 0.9em; + left: 0.25em; + top: 0.4em; + font-size: 0.8em; color: transparentize(#660000, 0.75); pointer-events: none; } @@ -153,7 +151,11 @@ A { padding-left: 1em; padding-right: 1em; margin-left: 18em; - max-width: 60em; + background-color: #ffffff; + + .page { + max-width: 60em; + } } @media only screen and (max-width: 800px) { @@ -170,7 +172,7 @@ A { .top-nav { transition: left 0.3s; left: 18em; - width: calc(100vw - 1em); + width: calc(100% - 1em); .title-bar { height: 3em; @@ -211,7 +213,7 @@ A { .page-container { padding-top: 6em; - width: calc(100vw - 1em); + width: calc(100% - 1em); max-width: none; .side-collapsed & { @@ -223,13 +225,15 @@ A { @media only screen and (max-width: 400px) { .top-nav { .search-bar { + padding-right: 0; + .input-container { width: 100%; INPUT { + border: 0; width: 100%; max-width: none; - margin-left: -1px; } } }