mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 06:37:01 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3 from phuoc-ng/centering

Browse Source 
Add sample code
This commit is contained in:
phuoc-ng
2019-11-15 16:57:21 +07:00
committed by GitHub
parent f2432f4aba 569bea1240
commit 6f041c6992
9 changed files with 107 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/Home.jsx
View File

@@ -3,8 +3,11 @@ import { Link } from 'react-router-dom';
import CenterCover from './covers/CenterCover'; import CenterCover from './covers/CenterCover';
import Layout from './Layout'; import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle';
const Home = () => { const Home = () => {
useDocumentTitle('CSS Layout');
return ( return (
<Layout> <Layout>
<h2 className="f2 lh-copy">Pattern</h2> <h2 className="f2 lh-copy">Pattern</h2>

13
client/SampleCode.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import highlight from './helpers/highlight';
const SampleCode = ({ code, lang }) => {
return code === ''
? <></>
: (
<pre className="h-100 lh-copy ma0" dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} />
);
};
export default SampleCode;

11
client/helpers/highlight.js Executable file
View File

@@ -0,0 +1,11 @@
import hljs from 'highlight.js';
const highlight = (input, language) => {
const lang = language || 'html';
const { value } = hljs.highlight(lang, input);
const highlighted = value.replace('&amp;', '&').trim();
return `<code class="hljs h-100 ${lang}">${highlighted}</code>`;
};
export default highlight;

8
client/index.html
View File

@@ -11,7 +11,6 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
code { code {
border-radius: 4px;
font-family: 'Source Code Pro', monospace; font-family: 'Source Code Pro', monospace;
font-size: 14px; font-size: 14px;
} }
@@ -20,5 +19,12 @@
<body class="avenir w-100"> <body class="avenir w-100">
<div id="root"></div> <div id="root"></div>
<script src="./index.jsx"></script> <script src="./index.jsx"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139616701-3');
</script>
</body> </body>
</html> </html>

31
client/layouts/Centering.jsx
View File

@@ -2,15 +2,36 @@ import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../placeholders/BrowserFrame';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
const Centering = () => { const Centering = () => {
useDocumentTitle('CSS Layout ∙ Centering');
return ( return (
<DetailsLayout name="Centering"> <DetailsLayout name="Centering">
<BrowserFrame> <BrowserFrame
<div className="h-100 flex flex-column items-center justify-center"> content={
<div className="f1 b">CENTER</div> <div className="h-100 flex flex-column items-center justify-center">
</div> <div className="f1 b">CENTER</div>
</BrowserFrame> </div>
}
source={
<SampleCode
lang="html"
code={`
<div style="
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
">
CENTER
</div>
`}
/>
}
/>
</DetailsLayout> </DetailsLayout>
); );
}; };

37
client/placeholders/BrowserFrame.jsx
View File

@@ -1,15 +1,42 @@
import React from 'react'; import React, { useState } from 'react';
const BrowserFrame = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive(isActive => !isActive);
const BrowserFrame = ({ children }) => {
return ( return (
<div className="br2 ba b--black-20"> <div className="br2 ba b--black-20">
<div className="flex pa3 bb b--black-20 items-center"> <div className="flex pa3 bb b--black-20 items-center bg-black-05">
<div className="br-100 mr1 w1 h1 bg-red" /> <div className="br-100 mr1 w1 h1 bg-red" />
<div className="br-100 mr1 w1 h1 bg-gold" /> <div className="br-100 mr1 w1 h1 bg-gold" />
<div className="br-100 mr1 w1 h1 bg-red" /> <div className="br-100 mr1 w1 h1 bg-red" />
<div className="ml-auto">
<button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
{isContentActive ? 'Source' : 'Demo'}
</button>
</div>
</div> </div>
<div style={{ height: '512px' }}> <div
{children} className="relative"
style={{
height: '512px',
transition: 'transform 1s',
transformStyle: 'preserve-3d',
transform: isContentActive ? '' : 'rotateY(180deg)',
}}
>
<div className="absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
{content}
</div>
<div
className="absolute top-0 left-0 h-100 w-100"
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
}}
>
{source}
</div>
</div> </div>
</div> </div>
); );

9
client/useDocumentTitle.js Normal file
View File

@@ -0,0 +1,9 @@
import { useEffect } from 'react';
const useDocumentTitle = (title) => {
useEffect(() => {
document.title = title;
}, [title]);
};
export default useDocumentTitle;

5
package-lock.json generated
View File

@@ -4137,6 +4137,11 @@
"util-deprecate": "^1.0.2" "util-deprecate": "^1.0.2"
} }
}, },
"highlight.js": {
"version": "9.16.2",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
"integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
},
"history": { "history": {
"version": "4.10.1", "version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",

1
package.json
View File

@@ -6,6 +6,7 @@
"postbuild": "react-snap" "postbuild": "react-snap"
}, },
"dependencies": { "dependencies": {
"highlight.js": "^9.16.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",