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

Merge pull request #57 from phuoc-ng/dot-leader

Browse Source 
Dot leader
This commit is contained in:
phuoc-ng
2019-11-27 09:18:13 +07:00
committed by GitHub
parent ac4b82652c b6fbe42123
commit d3a4fdffee
15 changed files with 549 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/App.tsx
View File

@@ -20,6 +20,7 @@ const App = () => {
<Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route> <Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
<Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route> <Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route> <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
<Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route> <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route> <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route> <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>

1
client/Explore.tsx
View File

@@ -88,6 +88,7 @@ const Home = () => {
<CoverCard pattern={Pattern.Card} /> <CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} /> <CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.DockedAtCorner} /> <CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} /> <CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.FeatureList} /> <CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} /> <CoverCard pattern={Pattern.FixedAtCorner} />

5
client/Home.tsx
View File

@@ -17,8 +17,8 @@ const Home = () => {
style={{ style={{
border: '1px solid rgba(0, 0, 0, 0.2)', border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent', borderBottomColor: 'transparent',
borderTopLeftRadius: '16px', borderTopLeftRadius: '8px',
borderTopRightRadius: '16px', borderTopRightRadius: '8px',
marginTop: '64px', marginTop: '64px',
}} }}
> >
@@ -180,6 +180,7 @@ const Home = () => {
<CoverCard pattern={Pattern.Card} /> <CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} /> <CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.DockedAtCorner} /> <CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} /> <CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.FeatureList} /> <CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} /> <CoverCard pattern={Pattern.FixedAtCorner} />

1
client/constants/Pattern.ts
View File

@@ -5,6 +5,7 @@ enum Pattern {
Card = 'Card', Card = 'Card',
Centering = 'Centering', Centering = 'Centering',
DockedAtCorner = 'Docked at corner', DockedAtCorner = 'Docked at corner',
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation', DotNavigation = 'Dot navigation',
FeatureList = 'Feature list', FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner', FixedAtCorner = 'Fixed at corner',

1
client/index.css
View File

@@ -1,4 +1,5 @@
body { body {
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.hljs, code { .hljs, code {

2
client/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
</head> </head>
<body class="avenir w-100"> <body style="width: 100%;">
<div id="root"></div> <div id="root"></div>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
<script> <script>

6
client/layouts/Footer.tsx
View File

@@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import Heading from '../components/Heading';
const Footer: React.FC<{}> = () => { const Footer: React.FC<{}> = () => {
return ( return (
<div <div
style={{ style={{
border: '1px solid rgba(0, 0, 0, 0.2)', border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomLeftRadius: '16px', borderBottomLeftRadius: '8px',
borderBottomRightRadius: '16px', borderBottomRightRadius: '8px',
display: 'flex', display: 'flex',
}} }}
> >

10
client/layouts/Layout.tsx
View File

@@ -58,13 +58,17 @@ const Layout: React.FC<{}> = ({ children }) => {
<a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a> <a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
)) ))
</li> </li>
<li style={{ marginLeft: '16px' }}>.assert([scalableCode, superFastWebsite, seoFriendly])</li> <li style={{ marginLeft: '16px' }}>.then(r => &#123;</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(scalableCode);</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(superFastWebsite);</li>
<li style={{ marginLeft: '32px' }}>expect(r).is(seoFriendly);</li>
<li style={{ marginLeft: '16px' }}>&#125;)</li>
<li style={{ marginLeft: '16px' }}> <li style={{ marginLeft: '16px' }}>
.finally( .finally(() => &#123;
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}> <a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
/&#42; Give me 1 star &#42;/ /&#42; Give me 1 star &#42;/
</a> </a>
) 🎉 &#125;) 🎉
</li> </li>
</ul> </ul>
</div> </div>

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> </div>
<RelatedPatterns patterns={[Pattern.PropertyList]} /> <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.PropertyList, Pattern.SplitNavigation]} />
</DetailsLayout> </DetailsLayout>
); );
}; };

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

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

3
client/patterns/split-navigation/Details.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
@@ -45,6 +47,7 @@ const Details: React.FC<{}> = () => {
`} `}
/> />
</div> </div>
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
</DetailsLayout> </DetailsLayout>
); );
}; };

467
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -15,8 +15,7 @@
"highlight.js": "^9.16.2", "highlight.js": "^9.16.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2"
"react-snap": "^1.23.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.7.4", "@babel/core": "^7.7.4",
@@ -31,6 +30,7 @@
"css-loader": "^3.2.0", "css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0", "mini-css-extract-plugin": "^0.8.0",
"react-snap": "^1.23.0",
"source-map-loader": "^0.2.4", "source-map-loader": "^0.2.4",
"style-loader": "^1.0.0", "style-loader": "^1.0.0",
"ts-loader": "^6.2.1", "ts-loader": "^6.2.1",