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

Merge pull request #77 from phuoc-ng/avatar

Browse Source 
Add avatar
This commit is contained in:
phuoc-ng
2019-12-04 21:46:58 +07:00
committed by GitHub
parent ff0d0a633c 261d97f172
commit 439b7062fc
9 changed files with 152 additions and 4 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 {
Avatar = 'Avatar',
AvatarList = 'Avatar list',
Badge = 'Badge',
Breadcrumb = 'Breadcrumb',

1
client/pages/ExplorePage.tsx
View File

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

2
client/pages/HomePage.tsx
View File

@@ -170,7 +170,7 @@ const HomePage = () => {
marginBottom: '16px',
}}
>
50+ patterns
60+ patterns
</div>
<Link
to="/patterns"

4
client/patterns/avatar-list/Details.tsx
View File

@@ -80,7 +80,9 @@ const Details: React.FC<{}> = () => {
/>
</div>
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
/>
</DetailsLayout>
);
};

51
client/patterns/avatar/Cover.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '48px',
padding: '4px',
width: '48px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '100%',
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '100%',
}}
>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
</div>
</Frame>
);
};
export default Cover;

83
client/patterns/avatar/Details.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Avatar">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '64px',
padding: '8px',
width: '64px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '100%',
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '100%',
}}
>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
</div>
)}
source={`
<div style="
/* Rounded border */
border-radius: 50%;
height: 64px;
width: 64px;
">
<!-- Avatar image -->
<img
src="..."
style="
/* Rounded border */
border-radius: 50%;
/* Take full size */
height: 100%;
width: 100%;
"
/>
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
</DetailsLayout>
);
};
export default Details;

8
client/patterns/initial-avatar/Details.tsx
View File

@@ -86,7 +86,13 @@ const Details: React.FC<{}> = () => {
</div>
<RelatedPatterns
patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
patterns={[
Pattern.Avatar,
Pattern.AvatarList,
Pattern.Badge,
Pattern.Centering,
Pattern.PresenceIndicator,
]}
/>
</DetailsLayout>
);

5
client/patterns/presence-indicator/Details.tsx
View File

@@ -72,7 +72,10 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]} />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
/>
</DetailsLayout>
);
};

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</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>