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

Add initial avatar

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-04 21:05:34 +07:00
parent 5b50ff5f2a
commit e5122a95c8
8 changed files with 145 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -21,6 +21,7 @@ enum Pattern {
FloatingLabel = 'Floating label',
FullScreenMenu = 'Full screen menu',
HolyGrail = 'Holy grail',
InitialAvatar = 'Initial avatar',
InputAddon = 'Input addon',
MediaObject = 'Media object',
Menu = 'Menu',

1
client/pages/ExplorePage.tsx
View File

@@ -109,6 +109,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.InitialAvatar} />
<CoverCard pattern={Pattern.InputAddon} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />

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

@@ -1,5 +1,7 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -77,6 +79,8 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
</DetailsLayout>
);
};

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

@@ -1,5 +1,7 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -58,6 +60,8 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
</DetailsLayout>
);
};

38
client/patterns/initial-avatar/Cover.tsx Normal file
View File

@@ -0,0 +1,38 @@
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={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
height: '48px',
justifyContent: 'center',
width: '48px',
}}
>
PN
</div>
</div>
</Frame>
);
};
export default Cover;

95
client/patterns/initial-avatar/Details.tsx Normal file
View File

@@ -0,0 +1,95 @@
import React from 'react';
import { Link } from 'react-router-dom';
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="Initial avatar">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
To center the content, you also can use other technique demonstrated in
the <Link to='/patterns/centering'>Centering</Link> pattern.
</div>
<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: '50%',
color: '#FFF',
display: 'inline-block',
fontSize: '24px',
height: '48px',
position: 'relative',
verticalAlign: 'middle',
width: '48px',
}}
>
<div
style={{
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
PN
</div>
</div>
</div>
)}
source={`
<div style="
/* Center the content */
display: inline-block;
vertical-align: middle;
/* Used to position the content */
position: relative;
/* Colors */
background-color: rgba(0, 0, 0, .3);
color: #FFF;
/* Rounded border */
border-radius: 50%;
height: 48px;
width: 48px;
">
<div style="
/* Center the content */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
">
<!-- The letters -->
...
</div>
</div>
`}
/>
</div>
<RelatedPatterns
patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
/>
</DetailsLayout>
);
};
export default Details;

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

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

1
public/sitemap.xml
View File

@@ -26,6 +26,7 @@
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/floating-label</loc></url>
<url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
<url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
<url><loc>https://csslayout.io/patterns/input-addon</loc></url>
<url><loc>https://csslayout.io/patterns/media-object</loc></url>
<url><loc>https://csslayout.io/patterns/menu</loc></url>