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

Add fixed at side pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-21 16:03:12 +07:00
parent 8e69aa8809
commit cdeb9d9841
7 changed files with 326 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
client/placeholders/BrowserFrame.tsx
View File

@@ -4,7 +4,7 @@ import SampleCode from '../components/SampleCode';
interface BrowserFrameProps {
content: React.ReactNode;
source: string;
source?: string;
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
@@ -55,21 +55,23 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
width: '16px',
}}
/>
<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>
{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>
<div
style={{
@@ -95,22 +97,24 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
>
{content}
</div>
<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>
{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>
</div>
);