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

Add fading long section pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2020-01-10 13:30:40 +07:00
parent e635436f39
commit 2f18e84964
5 changed files with 158 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -28,6 +28,7 @@ enum Pattern {
DropArea = 'Drop area',
DropCap = 'Drop cap',
Dropdown = 'Dropdown',
FadingLongSection = 'Fading long section',
FeatureComparison = 'Feature comparison',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',

1
client/pages/ExplorePage.tsx
View File

@@ -160,6 +160,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.FadingLongSection} />
<CoverCard pattern={Pattern.FeatureComparison} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />

58
client/patterns/fading-long-section/Cover.tsx Normal file
View File

@@ -0,0 +1,58 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import random from '../../helpers/random';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '16px',
}}
>
<div
style={{
height: '100%',
overflow: 'hidden',
position: 'relative',
width: '100%',
}}
>
{
Array(20).fill(0).map((_, index) => {
return (
<div key={index} style={{ marginBottom: '4px', width: `${random(4, 10) * 10}%` }}>
<Line />
</div>
);
})
}
<div
style={{
background: 'linear-gradient(rgba(255, 255, 255, 0.001), #fff)',
bottom: 0,
height: '30px',
left: 0,
position: 'absolute',
width: '100%',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

97
client/patterns/fading-long-section/Details.tsx Normal file
View File

@@ -0,0 +1,97 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import { Helmet } from 'react-helmet';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Fading long section">
<Helmet>
<meta name="description" content="Fading long section to indicate there is more content" />
<meta name="keywords" content="css fading overflow, css linear gradient" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Fading a long section to indicate there is more content.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ position: 'relative', width: '200px' }}>
<div
style={{
height: '200px',
overflowY: 'scroll',
}}
>
<Block numberOfBlocks={50} />
</div>
<div
style={{
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
bottom: 0,
height: '30px',
left: 0,
position: 'absolute',
width: '100%',
}}
/>
</div>
</div>
)}
source={`
<div style="
/* Used to position the faded element */
position: relative;
">
<!-- Main content -->
<div style="
/* Height */
height: 200px;
/* Scrollable */
overflow-y: scroll;
">
...
</div>
<!-- The faded element -->
<div style="
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 30px;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
" />
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -24,6 +24,7 @@
<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/fading-long-section</loc></url>
<url><loc>https://csslayout.io/patterns/feature-comparison</loc></url>
<url><loc>https://csslayout.io/patterns/feature-list</loc></url>
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>