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

Add timeline pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-12 21:36:14 +07:00
parent 801a213212
commit e2d8ff1f3a
6 changed files with 241 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -60,6 +60,7 @@ enum Pattern {
StickyHeader = 'Sticky header',
Switch = 'Switch',
Tab = 'Tab',
Timeline = 'Timeline',
TogglePasswordVisibility = 'Toggle password visibility',
UploadButton = 'Upload button',
ValidationIcon = 'Validation icon',

3
client/pages/ExplorePage.tsx
View File

@@ -62,7 +62,7 @@ const ExplorePage = () => {
textAlign: 'center',
}}
>
Here is the collection of 65 patterns
Here is the collection of 66 patterns
</h2>
<div style={{ marginBottom: '32px', textAlign: 'center' }}>
All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -154,6 +154,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.Timeline} />
</div>
</section>

2
client/pages/HomePage.tsx
View File

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

78
client/patterns/timeline/Cover.tsx Normal file
View File

@@ -0,0 +1,78 @@
import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
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={{
position: 'relative',
width: '100%',
}}
>
<div
style={{
borderRight: '1px solid #aaa',
height: '100%',
left: '6px',
position: 'absolute',
top: 0,
}}
/>
<ul
style={{
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={12} />
<div style={{ flex: 1, marginLeft: '8px' }}>
<div style={{ width: '80%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '20px' }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div style={{ width: '40%' }}><Line /></div>
</div>
</li>
<li>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={12} />
<div style={{ flex: 1, marginLeft: '8px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '20px' }}>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div>
</li>
</ul>
</div>
</div>
</Frame>
);
};
export default Cover;

158
client/patterns/timeline/Details.tsx Normal file
View File

@@ -0,0 +1,158 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Timeline">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
position: 'relative',
width: '60%',
}}
>
<div
style={{
borderRight: '2px solid #aaa',
height: '100%',
left: '16px',
position: 'absolute',
top: 0,
}}
/>
<ul
style={{
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '80%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={15} blockHeight={2} />
</div>
</li>
<li style={{ marginBottom: '8px' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<Circle backgroundColor='#aaa' size={32} />
<div style={{ flex: 1, marginLeft: '16px' }}>
<div style={{ width: '60%' }}><Rectangle /></div>
</div>
</div>
<div style={{ marginLeft: '48px' }}>
<Block numberOfBlocks={10} blockHeight={2} />
</div>
</li>
</ul>
</div>
</div>
)}
source={`
<div style="
/* Used to position the left vertical line */
position: relative;
">
<!-- Left vertical line -->
<div style="
/* Border */
border-right: 2px solid #aaa;
/* Positioned at the left */
left: 16px;
position: absolute;
top: 0px;
/* Take full height */
height: 100%;
" />
<!-- The timeline items container -->
<ul style="
/* Reset styles */
list-style-type: none;
margin: 0px;
padding: 0px;
">
<!-- Each timeline item -->
<li style="margin-bottom: 8px;">
<!-- The circle and title -->
<div style="
/* Center the content horizontally */
align-items: center;
display: flex;
">
<!-- The circle -->
<div style="
/* Rounded border */
background-color: rgb(170, 170, 170);
border-radius: 9999px;
/* Size */
height: 32px;
width: 32px;
" />
<!-- The title -->
<div style="
/* Take available width */
flex: 1;
">
...
</div>
</div>
<!-- The description -->
<div style="
/* Make it align with the title */
margin-left: 48px;
">
...
</div>
</li>
<!-- Repeat other items -->
...
</ul>
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -61,6 +61,7 @@
<url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
<url><loc>https://csslayout.io/patterns/switch</loc></url>
<url><loc>https://csslayout.io/patterns/tab</loc></url>
<url><loc>https://csslayout.io/patterns/timeline</loc></url>
<url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
<url><loc>https://csslayout.io/patterns/upload-button</loc></url>
<url><loc>https://csslayout.io/patterns/validation-icon</loc></url>