mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-09-02 10:22:54 +02:00
Code Issues Releases Wiki Activity

Update details layout

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-30 16:02:50 +07:00
parent 7543d759ca
commit 1762968dbf
7 changed files with 54 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
client/placeholders/BrowserFrame.tsx
View File

@@ -3,9 +3,10 @@
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import SampleCode from '../components/SampleCode';
import './browserFrame.css';
interface BrowserFrameProps {
content: React.ReactNode;
@@ -13,113 +14,13 @@ interface BrowserFrameProps {
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive((isActive) => !isActive);
return (
<div
className='shadow-2xl'
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.05)',
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
padding: '8px 16px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFB700',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
{source && (
<div style={{ marginLeft: 'auto' }}>
<button
style={{
backgroundColor: '#00449E',
borderColor: 'transparent',
borderRadius: '4px',
color: '#FFF',
cursor: 'pointer',
padding: '4px 8px',
}}
onClick={flip}
>
{isContentActive ? 'Source' : 'Demo'}
</button>
</div>
)}
<div className="demo">
<div className="demo__source">
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
</div>
<div
style={{
height: '512px',
position: 'relative',
transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d',
transition: 'transform 1s',
}}
>
<div
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 1 : 0,
overflow: 'scroll',
position: 'absolute',
top: 0,
width: '100%',
}}
>
{content}
</div>
{source && (
<div
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 0 : 1,
overflow: 'scroll',
position: 'absolute',
top: 0,
transform: 'rotateY(180deg)',
width: '100%',
}}
>
<SampleCode fullHeight={true} lang="html" code={source} />
</div>
)}
<div className="demo__live">
{content}
</div>
</div>
);

13
client/placeholders/browserFrame.css Normal file
View File

@@ -0,0 +1,13 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.demo {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
}
.demo__source,
.demo__live {
height: 32rem;
}