Merge pull request #98 from phuoc-ng/diagonal-section

Add Diagonal section

client/constants/Pattern.ts

@@ -14,6 +14,7 @@ enum Pattern {
     CornerRibbon = 'Corner ribbon',
     CustomCheckboxButton = 'Custom checkbox button',
     CustomRadioButton = 'Custom radio button',
+    DiagonalSection = 'Diagonal section',
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',

client/pages/ExplorePage.tsx

@@ -148,6 +148,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
+                        <CoverCard pattern={Pattern.DiagonalSection} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DropArea} />

client/patterns/diagonal-section/Cover.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '40%',
+                        transform: 'skewY(-10deg)',
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/diagonal-section/Details.tsx

@@ -0,0 +1,92 @@
+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="Diagonal section">
+            <Helmet>
+                <meta name="description" content="Create a diagonal section with CSS" />
+                <meta name="keywords" content="css diagonal section, css transform skew" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '200px',
+                                    justifyContent: 'center',
+                                    position: 'relative',
+                                    width: '75%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                        height: '100%',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'skewY(-5deg)',
+                                        width: '100%',
+                                        zIndex: -1,
+                                    }}
+                                />
+                                <div style={{ width: '60%' }}>
+                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the diagonal area */
+    position: relative;
+">
+    <!-- The diagonal area -->
+    <div style="
+        /* Absolute position */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Create diagonal sides */
+        transform: skewY(-5deg);
+
+        /* Background color */
+        background-color: rgba(0, 0, 0, 0.3);
+
+        /* Displayed under the main content */
+        z-index: -1;
+    " />
+
+    <!-- Content -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

public/sitemap.xml

@@ -15,6 +15,7 @@
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
+    <url><loc>https://csslayout.io/patterns/diagonal-section</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>