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

Add avatar list

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-29 12:48:47 +07:00
parent d464c54992
commit 40537d9b17
5 changed files with 133 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -1,4 +1,5 @@
enum Pattern {
AvatarList = 'Avatar list',
Badge = 'Badge',
Breadcrumb = 'Breadcrumb',
ButtonWithIcon = 'Button with icon',

1
client/pages/ExplorePage.tsx
View File

@@ -83,6 +83,7 @@ const ExplorePage = () => {
<Heading title="Patterns" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />

46
client/patterns/avatar-list/Cover.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
{
Array(3).fill(null).map((_, i) => {
return (
<div key={i} style={{ marginLeft: '-4px' }}>
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
borderRadius: '9999px',
boxShadow: '0 0 0 2px #FFF',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '24px',
justifyContent: 'center',
width: '24px',
}}
>
{i + 1}
</div>
</div>
);
})
}
</div>
</Frame>
);
};
export default Cover;

84
client/patterns/avatar-list/Details.tsx Normal file
View File

@@ -0,0 +1,84 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Avatar: React.FC<{}> = ({ children }) => {
return (
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
borderRadius: '9999px',
boxShadow: '0 0 0 4px #FFF',
color: '#FFF',
display: 'flex',
height: '48px',
justifyContent: 'center',
width: '48px',
}}
>
{children}
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Avatar list">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
</div>
)}
source={`
<div style="
display: flex;
">
<!-- Avatar item -->
<div style="
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
">
<div style="
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
">
<!-- Image -->
...
</div>
</div>
<!-- Repeat other avatars -->
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -5,6 +5,7 @@
<url><loc>https://csslayout.io/patterns/split-screen</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
<url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
<url><loc>https://csslayout.io/patterns/badge</loc></url>
<url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
<url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>