From a342a51c44dd4f8090367a98e7c5332715a5add8 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 18:07:06 +0700 Subject: [PATCH] feat: Add fading long content pattern --- .../patterns/fading-long-section.njk | 6 ++ contents/fading-long-section.md | 55 +++++++++++ contents/index.njk | 6 ++ pages/fading-long-section/index.tsx | 99 ------------------- patterns/fading-long-section/Cover.tsx | 53 ---------- styles/index.scss | 1 + styles/patterns/_fading-long-section.scss | 27 +++++ 7 files changed, 95 insertions(+), 152 deletions(-) create mode 100644 contents/_includes/patterns/fading-long-section.njk create mode 100644 contents/fading-long-section.md delete mode 100644 pages/fading-long-section/index.tsx delete mode 100644 patterns/fading-long-section/Cover.tsx create mode 100644 styles/patterns/_fading-long-section.scss diff --git a/contents/_includes/patterns/fading-long-section.njk b/contents/_includes/patterns/fading-long-section.njk new file mode 100644 index 0000000..cdeca13 --- /dev/null +++ b/contents/_includes/patterns/fading-long-section.njk @@ -0,0 +1,6 @@ +
+
+ {% lines "hor", 40 %} +
+
+
\ No newline at end of file diff --git a/contents/fading-long-section.md b/contents/fading-long-section.md new file mode 100644 index 0000000..813993d --- /dev/null +++ b/contents/fading-long-section.md @@ -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 +
+ +
+ ... +
+ + +
+
+``` + +## 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 %} diff --git a/contents/index.njk b/contents/index.njk index 830fd02..e019e48 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -121,6 +121,12 @@ eleventyExcludeFromCollections: true
Drop cap
+
+ +
{% include "patterns/fading-long-section.njk" %}
+
Fading long section
+ +
diff --git a/pages/fading-long-section/index.tsx b/pages/fading-long-section/index.tsx deleted file mode 100644 index 5b280f9..0000000 --- a/pages/fading-long-section/index.tsx +++ /dev/null @@ -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 ( - - - - - - - -
- Fading a long section to indicate there is more content. -
- - -
- ... -
- - -
- -`} - 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); - } - `} - > -
-
-
- -
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/fading-long-section/Cover.tsx b/patterns/fading-long-section/Cover.tsx deleted file mode 100644 index e60ad35..0000000 --- a/patterns/fading-long-section/Cover.tsx +++ /dev/null @@ -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 ( - -
-
- {Array(20) - .fill(0) - .map((_, index) => { - return ( -
- -
- ); - })} -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 576d702..07c9c8f 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -29,6 +29,7 @@ @import './patterns/dot-leader'; @import './patterns/drop-area'; @import './patterns/drop-cap'; +@import './patterns/fading-long-section'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_fading-long-section.scss b/styles/patterns/_fading-long-section.scss new file mode 100644 index 0000000..91059c6 --- /dev/null +++ b/styles/patterns/_fading-long-section.scss @@ -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); +} \ No newline at end of file