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

Add cover for sticky footer

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-15 17:26:10 +07:00
parent 6f041c6992
commit b4394da900
4 changed files with 59 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/Home.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import CenterCover from './covers/CenterCover';
import StickyFooterCover from './covers/StickyFooterCover';
import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle';
@@ -10,7 +11,18 @@ const Home = () => {
return (
<Layout>
<h2 className="f2 lh-copy">Pattern</h2>
<h2 className="f2 lh-copy">Layouts</h2>
<div className="flex flex-wrap justify-between">
<div className="w-30">
<Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
<StickyFooterCover />
<h4 className="f4 mv0 pv3">Sticky footer</h4>
</Link>
</div>
</div>
<h2 className="f2 lh-copy">Patterns</h2>
<div className="flex flex-wrap justify-between">
<div className="w-30">

38
client/covers/StickyFooterCover.jsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import Frame from '../placeholders/Frame';
import Line from '../placeholders/Line';
const StickyFooterCover = () => {
return (
<Frame size="medium">
<div className="h-100 flex flex-column">
<div className="flex-shrink-0">
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml-auto"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
<Line size="medium" />
</div>
<div className="flex-grow-1">
<div className="pa2">
<div className="w3 mb2"><Line /></div>
<div className="w3 mb2"><Line /></div>
<div className="w2"><Line /></div>
</div>
</div>
<div className="flex-shrink-0">
<Line size="medium" />
<div className="w-100 flex items-center pa2">
<div className="w1"><Line /></div>
<div className="w1 ml1"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default StickyFooterCover;

5
client/placeholders/Frame.jsx
View File

@@ -1,10 +1,13 @@
import React from 'react';
const Frame = ({ children }) => {
const Frame = ({ children, size }) => {
const bw = (size === 'medium' ? '2px' : '1px');
return (
<div
className="ba b--black-30 br2"
style={{
borderWidth: bw,
height: '100px',
width: '100px',
}}

6
client/placeholders/Line.jsx
View File

@@ -1,10 +1,12 @@
import React from 'react';
const Line = () => {
const Line = ({ size }) => {
const h = (size === 'medium' ? '2px' : '1px');
return (
<div
className="w-100 bg-black-30"
style={{ height: '1px' }}
style={{ height: h }}
/>
);
};