Merge pull request #108 from phuoc-ng/fading-long-section

Add fading long section pattern

client/constants/Pattern.ts

@@ -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',

client/pages/ExplorePage.tsx

@@ -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} />

client/patterns/fading-long-section/Cover.tsx

@@ -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;

client/patterns/fading-long-section/Details.tsx

@@ -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;

public/sitemap.xml

@@ -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>