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

Add square placeholder

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-16 23:11:35 +07:00
parent 54e03e89f6
commit 5f1ef07da9
3 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/Home.jsx
View File

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover';
import CenterCover from './covers/CenterCover';
import InputAddonCover from './covers/InputAddonCover';
import MediaObjectCover from './covers/MediaObjectCover';
import SidebarCover from './covers/SidebarCover';
import StickyFooterCover from './covers/StickyFooterCover';
import StickyHeaderCover from './covers/StickyHeaderCover';
@@ -75,6 +76,12 @@ const Home = () => {
<h4 className="f4 mv0 pt3">Input addon</h4>
</Link>
</div>
<div className="pa2 w-20">
<Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<MediaObjectCover />
<h4 className="f4 mv0 pt3">Media object</h4>
</Link>
</div>
<div className="pa2 w-20">
<Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<StepperInputCover />

32
client/covers/MediaObjectCover.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import Frame from '../placeholders/Frame';
import Line from '../placeholders/Line';
import Square from '../placeholders/Square';
const MediaObjectCover = () => {
return (
<Frame>
<div className="flex h-100 items-start pa2 w-100">
<div className="h2 w2 mr2">
<Square />
</div>
<div className="flex-auto">
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb3"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-100 mb1"><Line /></div>
<div className="w-80 mb1"><Line /></div>
</div>
</div>
</Frame>
);
};
export default MediaObjectCover;

9
client/placeholders/Square.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
const Square = ({ size = 8 }) => {
return (
<div className="w-100 h-100 bg-black-30 br1" />
);
};
export default Square;