Merge pull request #340 from Rostlab/home-plod

Show PLOD in Tombstone on homepage
Rostlab · Apr 8, 2016 · c5b1a7c · c5b1a7c
2 parents 691bd4b + d51379f
commit c5b1a7c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/app/components/common/BigBattle/BigBattle.css b/app/components/common/BigBattle/BigBattle.css
@@ -7,9 +7,8 @@
     border-right: 1px solid #fff;
 }
 
-.big-battle img {
-    max-height: 100%;
-    max-width: 100%;
+.antagonistImage{
+    width: 100%;
     vertical-align: middle;
 }
 .big-battle div {
@@ -26,4 +25,27 @@
 }
 .big-battle-info a {
     color: whitesmoke;
+}
+.antagonistImageContainer  {
+    height: 400px;
+    display: block;
+    position: relative;
+}
+.antagonistTombstone {
+    height: 150px;
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    right: -5px;
+}
+.antagonistTombstonePlod {
+    font-family: 'Cinzel Decorative', cursive;
+    font-size: 28px;
+    font-weight: bold;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+    position: absolute;
+    bottom: 25px;
+    right: 25px;
+    z-index: 2;
+    color: black;
 }
diff --git a/app/components/common/BigBattle/BigBattle.jsx b/app/components/common/BigBattle/BigBattle.jsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router';
 import {Image, Row, Col} from 'react-bootstrap';
 
 import './BigBattle.css';
+import tombstone from '../../public/Characters/rip_tombstone.png';
 
 export default class BigBattle extends Component {
   constructor(props){
@@ -28,32 +29,38 @@ export default class BigBattle extends Component {
       <div>
         <Row className="big-battle">
           <Col xs={6}>
-            <Link to={'/characters/' + this.props.name1}>
-              <Image src={this.props.img1} alt={"Image of " + this.props.name1}  />
-            </Link>
+            <div className="antagonistImageContainer">
+              <Link to={'/characters/' + this.props.name1}>
+                <Image className="antagonistImage" src={this.props.img1} alt={"Image of " + this.props.name1}  />
+              </Link>
+              <img className="antagonistTombstone" src={tombstone} />
+              <p className="antagonistTombstonePlod">{parseInt(this.props.plod1)}%</p>
+            </div>
           </Col>
           <Col xs={6}>
-            <Link to={'/characters/' + this.props.name2}>
-              <Image src={this.props.img2} alt={"Image of " + this.props.name2} />
-            </Link>
+            <div className="antagonistImageContainer">
+              <Link to={'/characters/' + this.props.name2}>
+                <Image className="antagonistImage" src={this.props.img2} alt={"Image of " + this.props.name2}  />
+              </Link>
+              <img className="antagonistTombstone" src={tombstone} />
+              <p className="antagonistTombstonePlod">{parseInt(this.props.plod2)}%</p>
+            </div>
           </Col>
         </Row>
         <Row className="big-battle-info">
           <Col xs={6}>
             <h3>
               <Link to={'/characters/' + this.props.name1}>{this.props.name1}</Link>
             </h3>
-            <p>PLOD: {this.props.plod1}%</p>
-
           </Col>
           <Col xs={6}>
             <h3>
               <Link to={'/characters/' + this.props.name2}>{this.props.name2}</Link>
             </h3>
-            <p>PLOD: {this.props.plod2}%</p>
           </Col>
         </Row>
-        <p><em>PLOD</em> is the <strong>likelihood of death</strong> of a character. Learn more about how we calculate this score <a href="/machine-learning-algorithm-predict-death-game-of-thrones">here</a>.</p>
+        <br />
+        <p>The tombstone shows our <strong>predicted likelihood of death</strong>. Read how we calculate the score <a href="/machine-learning-algorithm-predict-death-game-of-thrones">here</a>!</p>
         <br />
         <Row className="big-battle-info">
           <h3>Twitter Sentiments</h3>