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

Add dot leader

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-27 09:16:02 +07:00
parent ac4b82652c
commit 63cafd75c0
13 changed files with 248 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/patterns/dot-leader/Cover.tsx Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import Circle from '../../placeholders/Circle';
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={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '4px',
width: '100%',
}}
>
<div style={{ width: '60%' }}><Rectangle height={4} /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle size={8} />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '4px',
width: '100%',
}}
>
<div style={{ width: '40%' }}><Rectangle height={4} /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle size={8} />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ width: '30%' }}><Rectangle height={4} /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle size={8} />
</div>
</div>
</Frame>
);
};
export default Cover;

163
client/patterns/dot-leader/Details.tsx Normal file
View File

@@ -0,0 +1,163 @@
import React from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Dot leader">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '400px' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '60%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ width: '30%' }}><Rectangle /></div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<Circle />
</div>
</div>
</div>
)}
source={`
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
<!-- Left side -->
<div>...</div>
<!-- Dots -->
<div style="
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0px 4px;
" />
<!-- Right side -->
<div>...</div>
</div>
`}
/>
</div>
<section>
<Heading title="Use cases" />
<div style={{ padding: '32px' }}>
<div style={{ marginBottom: '16px', width: '60%' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div>Chapter 1</div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<div>5</div>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div>Chapter 2</div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<div>40</div>
</div>
</div>
<div style={{ width: '300px' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div>Egg</div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<div>3$</div>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
width: '100%',
}}
>
<div>Coffee</div>
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
<div>5$</div>
</div>
</div>
</div>
</section>
<RelatedPatterns patterns={[Pattern.Menu, Pattern.PropertyList, Pattern.SplitNavigation]} />
</DetailsLayout>
);
};
export default Details;

2
client/patterns/menu/Details.tsx
View File

@@ -110,7 +110,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.PropertyList]} />
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.PropertyList, Pattern.SplitNavigation]} />
</DetailsLayout>
);
};

2
client/patterns/property-list/Details.tsx
View File

@@ -102,7 +102,7 @@ const Details: React.FC<{}> = () => {
</Item>
</div>
</section>
<RelatedPatterns patterns={[Pattern.Menu]} />
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
</DetailsLayout>
);
};

3
client/patterns/split-navigation/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';
import Rectangle from '../../placeholders/Rectangle';
@@ -45,6 +47,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
</DetailsLayout>
);
};