From 234ae1c88c3db0aa4bda41fba70dbb25ed455908 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 18 Apr 2021 14:32:04 +0700
Subject: [PATCH] Create a zigzag timeline

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/patterns/zigzag-timeline/Cover.tsx     |  79 ++++++++++
 client/patterns/zigzag-timeline/Details.tsx   | 135 ++++++++++++++++++
 .../zigzag-timeline/zigzag-timeline.css       |  48 +++++++
 public/sitemap.xml                            |   4 +
 6 files changed, 268 insertions(+)
 create mode 100644 client/patterns/zigzag-timeline/Cover.tsx
 create mode 100644 client/patterns/zigzag-timeline/Details.tsx
 create mode 100644 client/patterns/zigzag-timeline/zigzag-timeline.css

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 40428c5..68ed829 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -101,6 +101,7 @@ enum Pattern {
     Voting = 'Voting',
     Watermark = 'Watermark',
     Wizard = 'Wizard',
+    ZigzagTimeline = 'Zigzag timeline',
 }
 
 export default Pattern;
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 343caca..4f94f09 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -159,6 +159,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.VideoBackground} />
                                 <CoverCard pattern={Pattern.Voting} />
                                 <CoverCard pattern={Pattern.Watermark} />
+                                <CoverCard pattern={Pattern.ZigzagTimeline} />
                             </div>
                         </section>
 
diff --git a/client/patterns/zigzag-timeline/Cover.tsx b/client/patterns/zigzag-timeline/Cover.tsx
new file mode 100644
index 0000000..731839a
--- /dev/null
+++ b/client/patterns/zigzag-timeline/Cover.tsx
@@ -0,0 +1,79 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '0.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        borderBottom: '1px solid #71717A',
+                        borderRight: '1px solid #71717A',
+                        padding: '0.5rem 1rem',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            background: '#71717A',
+                            borderRadius: '50%',
+                            height: '.75rem',
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: '.75rem',
+                        }}
+                    />
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
+                </div>
+                <div
+                    style={{
+                        borderLeft: '1px solid #71717A',
+                        padding: '0.5rem 1rem',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            background: '#71717A',
+                            borderRadius: '50%',
+                            height: '.75rem',
+                            left: 0,
+                            position: 'absolute',                            
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: '.75rem',
+                        }}
+                    />
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/zigzag-timeline/Details.tsx b/client/patterns/zigzag-timeline/Details.tsx
new file mode 100644
index 0000000..8ee9500
--- /dev/null
+++ b/client/patterns/zigzag-timeline/Details.tsx
@@ -0,0 +1,135 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+import './zigzag-timeline.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.ZigzagTimeline}>
+            <Helmet>
+                <meta name="description" content="Create a zigzag timeline" />
+                <meta name="og:description" content="Create a zigzag timeline" />
+                <meta name="twitter:description" content="Create a zigzag timeline" />
+                <meta name="keywords" content="css timeline, css zigzag timeline" />
+            </Helmet>
+            <div className='p-8 pb-20'>
+                <BrowserFrame
+html={`
+<div class="zigzag-timeline__item">
+    <!-- Milestone -->
+    <div className="zigzag-timeline__milestone">...</div>
+
+    <!-- Content -->
+    ...
+</div>
+
+<!-- Repeat other items -->
+...
+`}
+css={`
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #71717A;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;    
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+
+    /* Misc */
+    background: #71717A;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #71717A;
+    
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);    
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #71717A;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            margin: '0 auto',
+                            padding: '0.5rem',
+                            width: '60%',
+                        }}
+                    >
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{                                
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone'/>
+                            <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone' />
+                            <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone' />
+                            <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={15} />
+                        </div>
+                    </div>
+                </BrowserFrame>
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/zigzag-timeline/zigzag-timeline.css b/client/patterns/zigzag-timeline/zigzag-timeline.css
new file mode 100644
index 0000000..46cbfde
--- /dev/null
+++ b/client/patterns/zigzag-timeline/zigzag-timeline.css
@@ -0,0 +1,48 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #71717A;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;    
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+
+    /* Misc */
+    background: #71717A;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #71717A;
+    
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);    
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #71717A;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}
\ No newline at end of file
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 30926f6..79cbf99 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,5 +1,8 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
+    <url><loc>https://csslayout.io</loc></url>
     <url><loc>https://csslayout.io/patterns</loc></url>
+
+    <!-- Patterns -->
     <url><loc>https://csslayout.io/patterns/accordion</loc></url>
     <url><loc>https://csslayout.io/patterns/arrow-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
@@ -97,4 +100,5 @@
     <url><loc>https://csslayout.io/patterns/voting</loc></url>
     <url><loc>https://csslayout.io/patterns/watermark</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
+    <url><loc>https://csslayout.io/patterns/zigzag-timeline</loc></url>
 </urlset>
\ No newline at end of file