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

Merge pull request #61 from phuoc-ng/upload

Browse Source 
Add more patterns
This commit is contained in:
phuoc-ng
2019-11-29 19:07:46 +07:00
committed by GitHub
parent 97165b168e cd8c229913
commit 19e5c67dd9
35 changed files with 891 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/SampleCode.tsx
View File

@@ -4,15 +4,21 @@ import highlight from '../helpers/highlight';
interface SampleCodeProps {
code: string;
fullHeight?: boolean;
lang: string;
}
const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang }) => {
return code === ''
? <></>
: (
<pre
style={{ height: '100%', lineHeight: 1.5, margin: 0 }}
className="hljs"
style={{
height: fullHeight ? '100%' : 'auto',
lineHeight: 1.5,
margin: 0,
}}
dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
/>
);

5
client/constants/Pattern.ts
View File

@@ -1,4 +1,5 @@
enum Pattern {
AvatarList = 'Avatar list',
Badge = 'Badge',
Breadcrumb = 'Breadcrumb',
ButtonWithIcon = 'Button with icon',
@@ -8,6 +9,8 @@ enum Pattern {
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation',
DropArea = 'Drop area',
DropCap = 'Drop cap',
Dropdown = 'Dropdown',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',
FloatingLabel = 'Floating label',
@@ -18,6 +21,7 @@ enum Pattern {
Modal = 'Modal',
Notification = 'Notification',
Pagination = 'Pagination',
PresenceIndicator = 'Presence indicator',
PreviousNextButtons = 'Previous next buttons',
PricingTable = 'Pricing table',
PropertyList = 'Property list',
@@ -40,6 +44,7 @@ enum Pattern {
Switch = 'Switch',
Tab = 'Tab',
TogglePasswordVisibility = 'Toggle password visibility',
UploadButton = 'Upload button',
Wizard = 'Wizard',
}

4
client/helpers/highlight.ts
View File

@@ -1,6 +1,8 @@
import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('html', html);
const highlight = (input: string, language: string) => {
@@ -8,7 +10,7 @@ const highlight = (input: string, language: string) => {
const { value } = hljs.highlight(lang, input);
const highlighted = value.replace('&amp;', '&').trim();
return `<code style="height: 100%" class="hljs ${lang}">${highlighted}</code>`;
return `<code class="${lang}">${highlighted}</code>`;
};
export default highlight;

2
client/index.css
View File

@@ -10,8 +10,6 @@ input[type="email"], input[type="number"], input[type="password"], input[type="t
}
.hljs, code {
font-family: 'Source Code Pro', monospace;
}
code {
font-size: 14px;
}
.drop-cap:first-letter {

3
client/layouts/DetailsLayout.tsx
View File

@@ -49,9 +49,6 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>

6
client/layouts/Footer.tsx
View File

@@ -5,8 +5,8 @@ const Footer: React.FC<{}> = () => {
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
// borderBottomLeftRadius: '8px',
// borderBottomRightRadius: '8px',
display: 'flex',
}}
>
@@ -32,7 +32,6 @@ const Footer: React.FC<{}> = () => {
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
@@ -107,7 +106,6 @@ const Footer: React.FC<{}> = () => {
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,

81
client/layouts/Layout.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import SampleCode from '../components/SampleCode';
import Footer from './Footer';
const Layout: React.FC<{}> = ({ children }) => {
@@ -11,66 +12,26 @@ const Layout: React.FC<{}> = ({ children }) => {
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
{children}
<Footer />
<ul
style={{
fontSize: '14px',
lineHeight: 1.5,
listStyleType: 'none',
margin: '16px 0',
padding: 0,
}}
>
<li>this</li>
<li style={{ marginLeft: '16px' }}>
.madeWith([
<a href="https://reactjs.org" style={{ textDecoration: 'none' }}>react</a>,
<a href="https://www.typescriptlang.org" style={{ textDecoration: 'none' }}>typescript</a>
])
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => lint(
<a href="https://github.com/palantir/tslint" style={{ textDecoration: 'none' }}>
tslint
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => lazyLoad(
<a href="https://github.com/smooth-code/loadable-components" style={{ textDecoration: 'none' }}>
@loadable/component
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => optimizeAndBundle(
<a href="https://webpack.js.org" style={{ textDecoration: 'none' }}>webpack</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => exportHtml(
<a href="https://github.com/stereobooster/react-snap" style={{ textDecoration: 'none' }}>
react-snap
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => deploy(
<a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
))
</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' }}>
.finally(() => &#123;
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
/&#42; Give me 1 star &#42;/
</a>
&#125;) 🎉
</li>
</ul>
<div>
<SampleCode
lang='javascript'
code={`
this
.madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */
.then((r) => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
.finally(() => {/* Give me 1 star */}) 🎉 /* https://github.com/phuoc-ng/csslayout */
`}
/>
</div>
</div>
);
};

7
client/pages/ExplorePage.tsx
View File

@@ -30,8 +30,6 @@ const ExplorePage = () => {
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
@@ -85,6 +83,7 @@ const ExplorePage = () => {
<Heading title="Patterns" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -94,6 +93,8 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
@@ -103,6 +104,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
@@ -121,6 +123,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.UploadButton} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>

7
client/pages/HomePage.tsx
View File

@@ -17,8 +17,6 @@ const HomePage = () => {
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
marginTop: '64px',
}}
>
@@ -197,6 +195,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -206,6 +205,8 @@ const HomePage = () => {
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
@@ -215,6 +216,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
@@ -233,6 +235,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.UploadButton} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>

46
client/patterns/avatar-list/Cover.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
{
Array(3).fill(null).map((_, i) => {
return (
<div key={i} style={{ marginLeft: '-4px' }}>
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
borderRadius: '9999px',
boxShadow: '0 0 0 2px #FFF',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '24px',
justifyContent: 'center',
width: '24px',
}}
>
{i + 1}
</div>
</div>
);
})
}
</div>
</Frame>
);
};
export default Cover;

84
client/patterns/avatar-list/Details.tsx Normal file
View File

@@ -0,0 +1,84 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Avatar: React.FC<{}> = ({ children }) => {
return (
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
borderRadius: '9999px',
boxShadow: '0 0 0 4px #FFF',
color: '#FFF',
display: 'flex',
height: '48px',
justifyContent: 'center',
width: '48px',
}}
>
{children}
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Avatar list">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
</div>
)}
source={`
<div style="
display: flex;
">
<!-- Avatar item -->
<div style="
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
">
<div style="
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
">
<!-- Image -->
...
</div>
</div>
<!-- Repeat other avatars -->
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

3
client/patterns/docked-at-corner/Details.tsx
View File

@@ -1,6 +1,8 @@
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 Rectangle from '../../placeholders/Rectangle';
@@ -138,6 +140,7 @@ const Details: React.FC<{}> = () => {
</div>
</div>
</section>
<RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
</DetailsLayout>
);
};

55
client/patterns/drop-cap/Cover.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
width: '100%',
}}
>
<div style={{ display: 'flex', height: '32px', width: '100%' }}>
<div
style={{
alignItems: 'center',
border: '2px dashed rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
marginRight: '8px',
width: '32px',
}}
>
<Circle />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<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={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
</div>
</div>
<div style={{ marginTop: '4px' }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

65
client/patterns/drop-cap/Details.tsx Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
import './dropcap.css';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Drop cap">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div className="p-drop-cap">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
</div>
</div>
</div>
)}
source={`
<style>
/* Styles for the first letter */
.p-drop-cap:first-letter {
/* Display at the left */
float: left;
line-height: 1;
/* Spacing */
margin: 0 8px 0 0;
padding: 0 8px;
/* Optional */
font-size: 64px;
font-weight: 700;
}
</style>
<div class="p-drop-cap">
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

9
client/patterns/drop-cap/dropcap.css Normal file
View File

@@ -0,0 +1,9 @@
.p-drop-cap:first-letter {
border: 2px solid rgba(0, 0, 0, 0.3);
float: left;
font-size: 64px;
font-weight: 700;
line-height: 1;
margin: 0 8px 0 0;
padding: 0 8px;
}

83
client/patterns/dropdown/Cover.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Triangle from '../../placeholders/Triangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '24px',
justifyContent: 'flex-end',
marginBottom: '4px',
paddingRight: '4px',
width: '60%',
}}
>
<Triangle corner='b' size={8} />
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
height: '100%',
width: '80%',
}}
>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
padding: '0 4px',
}}
>
<Line />
</div>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
padding: '0 4px',
}}
>
<div style={{ width: '80%' }}><Line /></div>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
padding: '0 4px',
}}
>
<div style={{ width: '60%' }}><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

142
client/patterns/dropdown/Details.tsx Normal file
View File

@@ -0,0 +1,142 @@
import React from 'react';
import './dropdown.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Dropdown">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouse over the button to see the dropdown.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-dropdown"
style={{
position: 'relative',
}}
>
<button
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
width: '128px',
}}
>
<span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
<Triangle size={8} corner='b' />
</button>
<div
className="p-dropdown-content"
style={{
backgroundColor: '#FFF',
height: '200px',
left: 0,
paddingTop: '4px',
position: 'absolute',
top: '100%',
width: '200px',
zIndex: 9999,
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '16px',
width: '100%',
}}
>
<Block numberOfBlocks={10} justify='center' />
</div>
</div>
</div>
<div
style={{
marginTop: '16px',
width: '256px',
}}
>
<Block numberOfBlocks={20} justify='center' />
</div>
</div>
)}
source={`
<style>
/* Hide the dropdown's content by default -->
.dropdown-content {
display: none;
}
/* Show the content when hover on the container -->
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div
class="dropdown"
style="
position: relative;
"
>
<!-- The trigger element -->
<button>...</button>
<!-- The content -->
<div
class="dropdown-content"
style="
/* Position it right below the trigger element */
left: 0,
paddingTop: '4px',
position: 'absolute',
top: '100%',
/* It should be on the top of other elements */
backgroundColor: '#FFF',
zIndex: 9999,
/* Size */
height: '200px',
width: '200px',
"
>
...
</div>
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Menu]} />
</DetailsLayout>
);
};
export default Details;

7
client/patterns/dropdown/dropdown.css Normal file
View File

@@ -0,0 +1,7 @@
.p-dropdown-content {
display: none;
}
.p-dropdown:hover .p-dropdown-content {
display: block;
}

10
client/patterns/floating-label/Details.tsx
View File

@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
}}
>
<div
className="floating-container"
className="p-floating-container"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
@@ -59,11 +59,11 @@ const Details: React.FC<{}> = () => {
)}
source={`
<style>
.floating-container {
.p-floating-container {
position: relative;
}
.floating-container label {
.p-floating-container label {
/* Position the label */
left: 8px;
position: absolute;
@@ -75,14 +75,14 @@ const Details: React.FC<{}> = () => {
}
/* Show the label at desired position when the placeholder of input isn't shown */
.floating-container input:not(:placeholder-shown) + label {
.p-floating-container input:not(:placeholder-shown) + label {
background: #FFF;
transform: translate(0, -50%);
opacity: 1;
}
</style>
<div class="floating-container">
<div class="p-floating-container">
<!-- The input -->
<input placeholder="Placeholder" />

4
client/patterns/floating-label/floating-label.css
View File

@@ -1,8 +1,8 @@
.floating-container label {
.p-floating-container label {
opacity: 0;
}
.floating-container input:not(:placeholder-shown) + label {
.p-floating-container input:not(:placeholder-shown) + label {
background: #FFF;
transform: translate(0, -50%);
opacity: 1;

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

@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
}}
>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '40%' }}><Rectangle /></div>
</div>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => {
<div>Ctrl + X</div>
</div>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -82,7 +82,7 @@ const Details: React.FC<{}> = () => {
<div>Ctrl + C</div>
</div>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
<Circle />
</div>
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',
@@ -112,7 +112,7 @@ const Details: React.FC<{}> = () => {
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div
className="menu-item"
className="p-menu-item"
style={{
alignItems: 'center',
display: 'flex',

2
client/patterns/menu/menu.css
View File

@@ -1,3 +1,3 @@
.menu-item:hover {
.p-menu-item:hover {
background-color: rgba(0, 0, 0, 0.1);
}

45
client/patterns/presence-indicator/Cover.tsx Normal file
View File

@@ -0,0 +1,45 @@
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={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '32px',
position: 'relative',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '8px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '8px',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

80
client/patterns/presence-indicator/Details.tsx Normal file
View File

@@ -0,0 +1,80 @@
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 Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Presence indicator">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
height: '64px',
marginRight: '16px',
position: 'relative',
width: '64px',
}}
>
<Circle size={64} />
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '16px',
}}
/>
</div>
</div>
)}
source={`
<div style="
position: relative;
">
<!-- Other element such as avatar -->
...
<!-- The presense indicator -->
<div style="
/* Shown at the bottom right corner */
bottom: 0,
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* Background color */
background-color: #FF4136;
" />
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.DockedAtCorner]} />
</DetailsLayout>
);
};
export default Details;

25
client/patterns/rating/Details.tsx
View File

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
justifyContent: 'center',
}}
>
<div className="rating">
<div className="p-rating">
<Star isActive={false} />
<Star isActive={false} />
<Star isActive={false} />
@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<style>
.rating {
.p-rating {
/* Content is centered */
align-items: center;
display: flex;
@@ -40,7 +40,8 @@ const Details: React.FC<{}> = () => {
font-size: 32px;
}
.rating .star:hover, .rating .star:hover ~ .star {
.p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
color: transparent;
}
@@ -48,15 +49,15 @@ const Details: React.FC<{}> = () => {
Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container
*/
.rating .star:hover:before,
.rating .star:hover ~ .star:before {
.p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
color: #00449e;
content: '\\2605';
left: 0;
position: absolute;
}
.star {
.p-rating-star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
@@ -68,12 +69,12 @@ Note that we use \`flex-direction: row-reverse\` on the container
}
</style>
<div class="rating">
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">★</button>
<div class="p-rating">
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">★</button>
</div>
`}
/>

2
client/patterns/rating/Star.tsx
View File

@@ -8,7 +8,7 @@ interface StarProps {
const Star: React.FC<StarProps> = ({ isActive }) => {
return (
<button className="star">
<button className="p-rating-star">
{isActive ? '★' : '☆'}
</button>
);

10
client/patterns/rating/star.css
View File

@@ -1,4 +1,4 @@
.rating {
.p-rating {
align-items: center;
display: flex;
font-size: 32px;
@@ -6,18 +6,20 @@
flex-direction: row-reverse;
}
.rating .star:hover, .rating .star:hover ~ .star {
.p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
color: transparent;
}
.rating .star:hover:before, .rating .star:hover ~ .star:before {
.p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
color: #00449e;
content: '\2605';
left: 0;
position: absolute;
}
.star {
.p-rating-star {
background-color: transparent;
border: transparent;
margin: 0 2px;

58
client/patterns/upload-button/Cover.tsx Normal file
View File

@@ -0,0 +1,58 @@
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',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '4px' }}>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '16px',
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '16px',
}}
>
<path
d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
H18.5z
M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
/>
</svg>
</div>
<Rectangle />
</div>
</div>
</Frame>
);
};
export default Cover;

117
client/patterns/upload-button/Details.tsx Normal file
View File

@@ -0,0 +1,117 @@
import React from 'react';
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="Upload button">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can click the button to choose a file.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '128px' }}>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
position: 'relative',
width: '100%',
}}
>
<input
type="file"
style={{
height: '100%',
left: 0,
opacity: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
/>
<div style={{ marginRight: '8px' }}>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '24',
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '24',
}}
>
<path
d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
H18.5z
M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
/>
</svg>
</div>
<Rectangle />
</div>
</div>
</div>
)}
source={`
<div style="
/* Used to position the input */
position: relative;
/* Content is centered */
align-items: center;
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
">
<!-- The real file input -->
<input
type="file"
style="
/* Take the full size */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
/* Make it transparent */
opacity: 0;
"
/>
<!-- The upload icon -->
<div style="margin-right: 8px">...</div>
<!-- The label -->
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

3
client/placeholders/BrowserFrame.tsx
View File

@@ -102,13 +102,14 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
height: '100%',
left: 0,
opacity: isContentActive ? 0 : 1,
overflow: 'scroll',
position: 'absolute',
top: 0,
transform: 'rotateY(180deg)',
width: '100%',
}}
>
<SampleCode lang="html" code={source} />
<SampleCode fullHeight={true} lang="html" code={source} />
</div>
</div>
</div>

4
client/types/hightlight.d.ts vendored
View File

@@ -7,5 +7,5 @@ declare module 'highlight.js/lib/highlight' {
function registerLanguage(name: string, language: any): void;
}
declare module 'highlight.js/lib/languages/xml' {
}
declare module 'highlight.js/lib/languages/javascript' {}
declare module 'highlight.js/lib/languages/xml' {}

7
public/sitemap.xml
View File

@@ -5,22 +5,28 @@
<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-list</loc></url>
<url><loc>https://csslayout.io/patterns/badge</loc></url>
<url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
<url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
<url><loc>https://csslayout.io/patterns/card</loc></url>
<url><loc>https://csslayout.io/patterns/centering</loc></url>
<url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/drop-area</loc></url>
<url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
<url><loc>https://csslayout.io/patterns/dropdown</loc></url>
<url><loc>https://csslayout.io/patterns/feature-list</loc></url>
<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/input-addon</loc></url>
<url><loc>https://csslayout.io/patterns/media-object</loc></url>
<url><loc>https://csslayout.io/patterns/menu</loc></url>
<url><loc>https://csslayout.io/patterns/modal</loc></url>
<url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/pagination</loc></url>
<url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
<url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
@@ -39,5 +45,6 @@
<url><loc>https://csslayout.io/patterns/switch</loc></url>
<url><loc>https://csslayout.io/patterns/tab</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/wizard</loc></url>
</urlset>

1
vendors/highlight.js@9.12.0/dracula.min.css vendored
View File

@@ -1 +0,0 @@
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}

1
vendors/highlight.js@9.12.0/theme.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.hljs{display:block;overflow-x:auto;padding:.5em;background:#282828}.hljs,.hljs-subst{color:#ebdbb2}.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}.hljs-comment{color:#928374}.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}.hljs-comment,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}

2
webpack.config.js
View File

@@ -22,7 +22,7 @@ module.exports = {
entry: {
'vendor-styles': [
'./vendors/normalize.css@8.0.1/normalize.css',
'./vendors/highlight.js@9.12.0/dracula.min.css',
'./vendors/highlight.js@9.12.0/theme.min.css',
],
// The CSS for client should come after `vendor-styles`
client: './client/index.tsx',