info/relaks-wordpress-example
1
0
Fork 0
mirror of https://github.com/trambarhq/relaks-wordpress-example.git synced 2025-09-25 06:51:30 +02:00
Code Issues Releases Wiki Activity

Various CSS fixes.

Browse Source
This commit is contained in:
Chung Leong
2018-12-21 23:54:44 +01:00
parent 47441c4f5b
commit 08c2d9d761
4 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/front-end.jsx
View File

@@ -87,7 +87,7 @@ class FrontEnd extends PureComponent {
*/ */
handleScroll = (evt) => { handleScroll = (evt) => {
let { topNavCollapsed } = this.state; let { topNavCollapsed } = this.state;
let container = document.body.parentElement; let container = document.body;
let previousPos = this.previousScrollPosition || 0; let previousPos = this.previousScrollPosition || 0;
let currentPos = container.scrollTop; let currentPos = container.scrollTop;
let delta = currentPos - previousPos; let delta = currentPos - previousPos;
@@ -99,9 +99,11 @@ class FrontEnd extends PureComponent {
let page = (pageContainer) ? pageContainer.firstChild : null; let page = (pageContainer) ? pageContainer.firstChild : null;
if (page) { if (page) {
let pageRect = page.getBoundingClientRect(); let pageRect = page.getBoundingClientRect();
if (pageRect.y <= 40) { if (pageRect.top <= 40) {
this.setState({ topNavCollapsed: true }); this.setState({ topNavCollapsed: true });
} }
} else {
this.setState({ topNavCollapsed: true });
} }
} }
} else { } else {

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<title>Relaks WordPress Example</title> <title>Relaks WordPress Example</title>
</head> </head>

2
src/pages/welcome-page.jsx
View File

@@ -6,7 +6,7 @@ class WelcomePage extends AsyncComponent {
async renderAsync(meanwhile) { async renderAsync(meanwhile) {
return ( return (
<div> <div className="page">
<h1>Welcome</h1> <h1>Welcome</h1>
<p>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.</p> <p>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.</p>
<p>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.</p> <p>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.</p>

36
src/style.scss
View File

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