mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +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 DetailsLayout from '../DetailsLayout';
import Block from '../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
@@ -16,15 +18,15 @@ const StickyFooter = () => {
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column ba b--black-30 bw1">
<div className="flex-shrink-0 bb b--black-30 bw1 pa3">
Header
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
</div>
<div className="flex-grow-1 pa3">
Content
<Block numberOfBlocks={20} />
</div>
<div className="flex-shrink-0 bt b--black-30 bw1 pa3">
Footer
<div className="flex-shrink-0 bt b--black-30 pa3">
<div className="w-40"><Rectangle /></div>
</div>
</div>
}

2
client/placeholders/Rectangle.jsx
View File

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