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

Add card layout

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-25 18:14:06 +07:00
parent 15397d858c
commit 00674cef04
7 changed files with 129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/patterns/card-layout/Cover.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
{
Array(9).fill(0).map((_, index) => {
return (
<div key={index} style={{ flexBasis: '33%', padding: '4px' }}>
<Rectangle height={20} />
</div>
);
})
}
</div>
</div>
</Frame>
);
};
export default Cover;

83
client/patterns/card-layout/Details.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Card layout">
<Helmet>
<meta name="description" content="Create a card layout with CSS flexbox" />
<meta name="keywords" content="css card layout, css flexbox, css layout" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
margin: '0 -8px',
width: '60%',
}}
>
{
Array(10).fill(0).map((_, index) => {
return (
<div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
<Rectangle height={80} />
</div>
);
})
}
</div>
</div>
)}
source={`
<div style="
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
">
<!-- A card with given width -->
<div style="
/* There will be 4 cards per row */
flex-basis: 25%;
padding-left: 8px;
padding-right: 8px;
">
...
</div>
<!-- Repeat other cards -->
...
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
</DetailsLayout>
);
};
export default Details;

4
client/patterns/card/Details.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -70,6 +72,8 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CardLayout]} />
</DetailsLayout>
);
};

4
client/patterns/simple-grid/Details.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -124,6 +126,8 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CardLayout]} />
</DetailsLayout>
);
};