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

Use placeholder for sticky footer

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-16 12:05:26 +07:00
parent b8e8aff61c
commit 5172ecab86
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/layouts/StickyFooter.jsx
View File

@@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../useDocumentTitle';
@@ -16,15 +18,15 @@ const StickyFooter = () => {
</div> </div>
<BrowserFrame <BrowserFrame
content={ content={
<div className="h-100 flex flex-column ba b--black-30 bw1"> <div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 bw1 pa3"> <div className="flex-shrink-0 bb b--black-30 pa3">
Header <div className="w-50"><Rectangle /></div>
</div> </div>
<div className="flex-grow-1 pa3"> <div className="flex-grow-1 pa3">
Content <Block numberOfBlocks={20} />
</div> </div>
<div className="flex-shrink-0 bt b--black-30 bw1 pa3"> <div className="flex-shrink-0 bt b--black-30 pa3">
Footer <div className="w-40"><Rectangle /></div>
</div> </div>
</div> </div>
} }

2
client/placeholders/Rectangle.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
const Rectangle = ({ height }) => { const Rectangle = ({ height = 8 }) => {
return ( return (
<div <div
className="w-100 bg-black-30 br-pill" className="w-100 bg-black-30 br-pill"