mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-13 09:35:59 +02:00
Code Issues Releases Wiki Activity

feat: Add fading long content pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 18:07:06 +07:00
parent 5e26cff70f
commit a342a51c44
7 changed files with 95 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
contents/_includes/patterns/fading-long-section.njk Normal file
View File

@@ -0,0 +1,6 @@
<div class="fading-long-section">
<div class="fading-long-section__content">
{% lines "hor", 40 %}
</div>
<div class="fading-long-section__fading"></div>
</div>

55
contents/fading-long-section.md Normal file
View File

@@ -0,0 +1,55 @@
---
layout: layouts/post.njk
title: Fading long section
description: Fading long section to indicate there is more content
keywords: css fading overflow, css linear gradient
---
The pattern is often used to indicate there is more content.
## HTML
```html
<div class="fading-long-section">
<!-- Main content -->
<div class="fading-long-section__content">
...
</div>
<!-- The faded element -->
<div class="fading-long-section__fading"></div>
</div>
```
## CSS
```css
.fading-long-section {
/* Used to position the faded element */
position: relative;
}
.fading-long-section__content {
/* Height */
height: 100%;
overflow-y: hidden;
}
.fading-long-section__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 2rem;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}
```
{% demo %}
{% include "patterns/fading-long-section.njk" %}
{% enddemo %}

6
contents/index.njk
View File

@@ -121,6 +121,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Drop cap</div> <div class="pattern__title">Drop cap</div>
</a> </a>
</div> </div>
<div class="pattern__item">
<a class="pattern__link" href="/fading-long-section/">
<div class="pattern__cover">{% include "patterns/fading-long-section.njk" %}</div>
<div class="pattern__title">Fading long section</div>
</a>
</div>
</div> </div>
</div> </div>

99
pages/fading-long-section/index.tsx
View File

@@ -1,99 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.FadingLongSection}>
<Head>
<meta name="description" content="Fading long section to indicate there is more content" />
<meta name="og:description" content="Fading long section to indicate there is more content" />
<meta name="twitter:description" content="Fading long section to indicate there is more content" />
<meta name="keywords" content="css fading overflow, css linear gradient" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Fading a long section to indicate there is more content.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- Main content -->
<div class="container__content">
...
</div>
<!-- The faded element -->
<div class="container__fading"></div>
</div>
`}
css={`
.container {
/* Used to position the faded element */
position: relative;
}
.container__content {
/* Height */
height: 200px;
/* Scrollable */
overflow-y: scroll;
}
.container__fading {
/* 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
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>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

53
patterns/fading-long-section/Cover.tsx
View File

@@ -1,53 +0,0 @@
import * as React from 'react';
import { random } from '../../utils/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;

1
styles/index.scss
View File

@@ -29,6 +29,7 @@
@import './patterns/dot-leader'; @import './patterns/dot-leader';
@import './patterns/drop-area'; @import './patterns/drop-area';
@import './patterns/drop-cap'; @import './patterns/drop-cap';
@import './patterns/fading-long-section';
// Placeholders // Placeholders
@import './placeholders/circle'; @import './placeholders/circle';

27
styles/patterns/_fading-long-section.scss Normal file
View File

@@ -0,0 +1,27 @@
.fading-long-section {
/* Used to position the faded element */
position: relative;
height: 8rem;
width: 8rem;
}
.fading-long-section__content {
/* Height */
height: 100%;
overflow-y: hidden;
}
.fading-long-section__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 2rem;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}