From a6ef121581a3d4c13a96c715e85201a45ed0b464 Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jan 10 2019 12:42:45 +0000
Subject: nicer timeline


---

diff --git a/src/LandingPage.js b/src/LandingPage.js
index 09a3d71..46b64ff 100644
--- a/src/LandingPage.js
+++ b/src/LandingPage.js
@@ -12,9 +12,11 @@ class LandingPage extends Component {
             <Layout>
                 <Container>
                     <Row>
-                        <div className="col-md-6">
-                            <Timeline apiurl={apiurl}/>
+                        <div className="col-md-12">
+                            <Timeline apiurl={apiurl} />
                         </div>
+                    </Row>
+                    <Row>
                         <div className="col-md-6">
                             <Events apiurl={apiurl} />
                         </div>
diff --git a/src/Timeline.js b/src/Timeline.js
index 0132673..9aa9985 100644
--- a/src/Timeline.js
+++ b/src/Timeline.js
@@ -19,18 +19,45 @@ class Timeline extends Component {
     }
 
     render() {
+        const line = this.state.schedule.map(milestone => {
+            return (
+                <td><Line color={milestone.current? "#2371ae":"#dcdcdc"}/></td>
+            )
+        })
+
+        const dates = this.state.schedule.map(milestone => {
+            return (<td width="150" key={milestone.summary}><b>{milestone.date}</b></td>)
+        });
+
         const schedule = this.state.schedule.map(milestone => {
-            return (<li key={milestone.summary}>{milestone.date} - {milestone.summary}</li>)
+            return (<td width="150" key={milestone.summary}>{milestone.summary}</td>)
         });
         return (
             <div>
                 <h5>Current development schedule</h5>
-                <ul>
-                    {schedule}
-                </ul>
+                <table className="timeline">
+                    <tr>{line}</tr>
+                    <tr>{dates}</tr>
+                    <tr>{schedule}</tr>
+                </table>
             </div>
         );
     }
 }
 
+class Line extends Component {
+    render() {
+        const lineStyle = {
+            stroke: this.props.color,
+            strokeWidth: "3"
+        }
+        return (
+            <svg width="150" height="20" version="1.1">
+                <line x1="0" y1="50%" x2="100%" y2="50%" style={lineStyle} />
+                <circle cx="50%" cy="50%" r="4" stroke={this.props.color} stroke-width="3" fill="white" />
+            </svg>
+        )
+    }
+}
+
 export default Timeline;
diff --git a/src/index.css b/src/index.css
index 4de90b5..25ee758 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,8 +13,8 @@ code {
     monospace;
 }
 
-.masthead {
-  margin-bottom: 50px;
+h5 {
+  padding-top: 50px;
 }
 
 .footer {
@@ -28,3 +28,16 @@ code {
   vertical-align: middle;
   color: #bbb;
 }
+
+.timeline { 
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.timeline td {
+  padding: 0;
+  font-size: 0.8em !important;
+  width: 150;
+  text-align: center;
+  vertical-align: top;
+}
\ No newline at end of file