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

Merge pull request #100 from phuoc-ng/stacked-cards

Browse Source 
Add stacked cards
This commit is contained in:
phuoc-ng
2019-12-25 19:11:24 +07:00
committed by GitHub
parent 4e129337b4 57606e9b00
commit 71976d562e
6 changed files with 167 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -61,6 +61,7 @@ enum Pattern {
SpinButton = 'Spin button', SpinButton = 'Spin button',
SplitNavigation = 'Split navigation', SplitNavigation = 'Split navigation',
SplitScreen = 'Split screen', SplitScreen = 'Split screen',
StackedCards = 'Stacked cards',
StepperInput = 'Stepper input', StepperInput = 'Stepper input',
StickyFooter = 'Sticky footer', StickyFooter = 'Sticky footer',
StickyHeader = 'Sticky header', StickyHeader = 'Sticky header',

1
client/pages/ExplorePage.tsx
View File

@@ -167,6 +167,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.QuestionsAndAnswers} /> <CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.Ribbon} /> <CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.Separator} /> <CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.StackedCards} />
<CoverCard pattern={Pattern.Timeline} /> <CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.VideoBackground} /> <CoverCard pattern={Pattern.VideoBackground} />
</div> </div>

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

@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
/> />
</div> </div>
<RelatedPatterns patterns={[Pattern.CardLayout]} /> <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
</DetailsLayout> </DetailsLayout>
); );
}; };

61
client/patterns/stacked-cards/Cover.tsx Normal file
View File

@@ -0,0 +1,61 @@
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',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '75%',
position: 'relative',
width: '60%',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'rotate(15deg)',
width: '100%',
zIndex: -1,
}}
/>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: 'rotate(30deg)',
width: '100%',
zIndex: -1,
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

102
client/patterns/stacked-cards/Details.tsx Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react';
import { Helmet } from 'react-helmet';
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="Stacked cards">
<Helmet>
<meta name="description" content="Create stacked cards with CSS" />
<meta name="keywords" content="css card, css stacked cards, css transform rotate" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '250px',
position: 'relative',
width: '200px',
}}
>
{
Array(5).fill(0).map((_, index) => {
return (
<div
key={index}
style={{
backgroundColor: '#fff',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
transform: `rotate(${5 * (index + 1)}deg)`,
width: '100%',
zIndex: -1,
}}
/>
);
})
}
</div>
</div>
)}
source={`
<div style="
/* Used to position the stacked cards */
position: relative;
">
<!-- Repeat if you want to have more cards -->
<div style="
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Displayed under the container */
z-index: -1;
/* Background and border colors */
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.3);
/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(5deg);
" />
<!-- Main card's content -->
...
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Card]} />
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -62,6 +62,7 @@
<url><loc>https://csslayout.io/patterns/spin-button</loc></url> <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
<url><loc>https://csslayout.io/patterns/split-navigation</loc></url> <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/split-screen</loc></url> <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
<url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
<url><loc>https://csslayout.io/patterns/stepper-input</loc></url> <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-footer</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/sticky-header</loc></url>