From 45b0c6ecb7da085c41f2fd35b7d2512467fc7f69 Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jan 11 2019 14:01:55 +0000
Subject: timeline design change


---

diff --git a/src/Blockers.js b/src/Blockers.js
index c846fbb..7ec3249 100644
--- a/src/Blockers.js
+++ b/src/Blockers.js
@@ -1,80 +1,84 @@
 import React, { Component } from 'react';
-import { Row} from 'reactstrap';
+import { Row } from 'reactstrap';
 
 class Blockers extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { blockerbugs: {}, release: 0 };
-  }
+    constructor(props) {
+        super(props);
+        this.state = { blockerbugs: {}, release: 0 };
+    }
 
-  componentDidMount() {
-    fetch(this.props.apiurl + 'blockerbugs')
-      .then(data => {
-        return data.json();
-      })
-      .then(data => {
-        console.log(data);
-        this.setState({
-            blockerbugs: data.blockerbugs,
-            release: data.release
-         });
-      });
-  }
-  render() {
-    if(this.state.blockerbugs)
-    return (
-        <div>
-        <Row>
-            <h5 className="padded">Fedora {this.state.release} blockers and FEs</h5>
-        </Row>
-        <Row>
-            <div className="col-md-6">
-            <table className="events">
-                <thead>
-                    <td colSpan="2"><b>Beta</b></td>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Proposed Blockers</td><td className="bugscount">{this.state.blockerbugs.beta_blockers_proposed}</td>
-                    </tr>
-                    <tr>
-                        <td>Accepted Blockers</td><td className="bugscount">{this.state.blockerbugs.beta_blockers}</td>
-                    </tr>
-                    <tr>
-                        <td>Proposed FEs</td><td className="bugscount">{this.state.blockerbugs.beta_fe_proposed}</td>
-                    </tr>
-                    <tr>
-                        <td>Accepted FEs</td><td className="bugscount">{this.state.blockerbugs.beta_fe}</td>
-                    </tr>
-                </tbody>
-            </table>
-            </div>
+    componentDidMount() {
+        fetch(this.props.apiurl + 'blockerbugs')
+            .then(data => {
+                return data.json();
+            })
+            .then(data => {
+                console.log(data);
+                this.setState({
+                    blockerbugs: data.blockerbugs,
+                    release: data.release
+                });
+            });
+    }
+    render() {
+        if (this.state.blockerbugs)
+            return (
+                <div>
+                    <Row>
+                        <h5 className="padded">Fedora {this.state.release} blockers and FEs{' '}
+                            <a href="https://qa.fedoraproject.org/blockerbugs/" className="smallsuper">
+                                <i className="fas fa-external-link-alt"></i>
+                            </a>
+                        </h5>
+                    </Row>
+                    <Row>
+                        <div className="col-md-6">
+                            <table className="events">
+                                <thead>
+                                    <td colSpan="2"><b>Beta</b></td>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>Proposed Blockers</td><td className="bugscount">{this.state.blockerbugs.beta_blockers_proposed}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Accepted Blockers</td><td className="bugscount">{this.state.blockerbugs.beta_blockers}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Proposed FEs</td><td className="bugscount">{this.state.blockerbugs.beta_fe_proposed}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Accepted FEs</td><td className="bugscount">{this.state.blockerbugs.beta_fe}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
 
-            <div className="col-md-6">
-            <table className="events">
-                <thead>
-                    <td colSpan="2"><b>Final</b></td>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Proposed Blockers</td><td className="bugscount">{this.state.blockerbugs.final_blockers_proposed}</td>
-                    </tr>
-                    <tr>
-                        <td>Accepted Blockers</td><td className="bugscount">{this.state.blockerbugs.final_blockers}</td>
-                    </tr>
-                    <tr>
-                        <td>Proposed FEs</td><td className="bugscount">{this.state.blockerbugs.final_fe_proposed}</td>
-                    </tr>
-                    <tr>
-                        <td>Accepted FEs</td><td className="bugscount">{this.state.blockerbugs.final_fe}</td>
-                    </tr>
-                </tbody>
-            </table>
-            </div>
-        </Row>
-        </div>
-    );
-  }
+                        <div className="col-md-6">
+                            <table className="events">
+                                <thead>
+                                    <td colSpan="2"><b>Final</b></td>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>Proposed Blockers</td><td className="bugscount">{this.state.blockerbugs.final_blockers_proposed}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Accepted Blockers</td><td className="bugscount">{this.state.blockerbugs.final_blockers}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Proposed FEs</td><td className="bugscount">{this.state.blockerbugs.final_fe_proposed}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Accepted FEs</td><td className="bugscount">{this.state.blockerbugs.final_fe}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </Row>
+                </div>
+            );
+    }
 }
 
 
diff --git a/src/Events.js b/src/Events.js
index 9020f98..d00f0a8 100644
--- a/src/Events.js
+++ b/src/Events.js
@@ -19,11 +19,16 @@ class Events extends Component {
   render() {
     const meetings = this.state.meetings.map(meeting => {
       //return (<li key={meeting.start + meeting.summary}>{meeting.start} - {meeting.summary}</li>)
-      return (<Event start={meeting.start} summary={meeting.summary} link={meeting.link} info={meeting.info}/>)
+      return (<Event start={meeting.start} summary={meeting.summary} link={meeting.link} info={meeting.info} />)
     });
     return (
       <div>
-        <h5 className="padded">Meetings and testdays in the next 7 days</h5>
+        <h5 className="padded">
+          Meetings and testdays in the next 7 days{' '}
+          <a href="https://apps.fedoraproject.org/calendar/QA/" className="smallsuper">
+            <i className="fas fa-external-link-alt"></i>
+          </a>
+        </h5>
         <ul className="events">
           {meetings}
         </ul>
@@ -40,10 +45,10 @@ class Event extends Component {
   render() {
     return (
       <li key={this.props.start + this.props.summary}>
-          <b>{this.props.start}</b>
-          <br />
-          <a href={this.props.link}>{this.props.summary}</a>
-          <br />
+        <b>{this.props.start}</b>
+        <br />
+        <a href={this.props.link}>{this.props.summary}</a>
+        <br />
       </li>
     );
   }
diff --git a/src/LandingPage.js b/src/LandingPage.js
index 953036a..acd4e4a 100644
--- a/src/LandingPage.js
+++ b/src/LandingPage.js
@@ -11,12 +11,16 @@ class LandingPage extends Component {
     render() {
         return (
             <Layout>
+                <div className="timelinebox">
                 <Container>
                     <Row>
                         <div className="col-md-12">
                             <Timeline apiurl={apiurl} />
                         </div>
                     </Row>
+                </Container>
+                </div>
+                <Container>
                     <Row>
                         <div className="col-md-6">
                             <Events apiurl={apiurl} />
diff --git a/src/Timeline.js b/src/Timeline.js
index f188f27..fccc61f 100644
--- a/src/Timeline.js
+++ b/src/Timeline.js
@@ -48,7 +48,11 @@ class Timeline extends Component {
         });
         return (
             <div>
-                <h5 className="padded-first">Current development schedule</h5>
+                <h5 className="padded-first">Current development schedule{' '}
+                    <a href="https://fedorapeople.org/groups/schedule/" className="smallsuper">
+                        <i className="fas fa-external-link-alt"></i>
+                    </a>
+                </h5>
                 <table className="timeline">
                     <tbody>
                         <tr>{line}</tr>
@@ -70,7 +74,7 @@ class Line extends Component {
         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" style={lineStyle} fill="white" />
+                <circle cx="50%" cy="50%" r="4" style={lineStyle} fill="#f8f9fa" />
             </svg>
         )
     }
diff --git a/src/index.css b/src/index.css
index 393ce47..9b4aa76 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,13 +13,17 @@ code {
     monospace;
 }
 
-.masthead {
-  margin-bottom: 50px;
+.masthead + .container,.timelinebox {
+  padding-top: 30px!important;
 }
 
 .navbar {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
+  box-shadow:rgb(221, 221, 221) 0px 0px 10px 2px;
+  border-bottom-color:rgb(204, 204, 204);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
 }
 
 h5.padded-first {
@@ -67,4 +71,17 @@ h5.padded {
 
 .bugscount {
   padding-left: 2em;
+}
+
+.smallsuper {
+  vertical-align: super;
+  font-size: 0.5em;
+}
+
+.timelinebox {
+  background-color: #f8f9fa!important;
+  padding-bottom: 30px;
+  border-bottom-color: rgb(222, 226, 230);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
 }
\ No newline at end of file