Merge pull request #333 from Rostlab/detail-page-wiki-link

Added wiki link to character-detail-page
Rostlab · Apr 8, 2016 · 45189fe · 45189fe
2 parents 2cd731f + 5ee887a
commit 45189fe
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/app/components/app/App.css b/app/components/app/App.css
@@ -153,3 +153,30 @@ a:focus {
     padding-top: 50px;
     padding-bottom: 50px;
 }
+
+.btn--secondary {
+    font-weight: normal;
+    border-radius: 4px;
+    font-size: 1.2em;
+    color: whitesmoke;
+    padding: 5px 15px;
+    background-color: transparent;
+    border: solid 2px #5A180C;
+    transition: all .1s ease-in-out;
+    cursor: pointer;
+    text-decoration: none !important;
+}
+.btn--secondary:hover {
+    background-color: #5A180C;
+    transition: all .1s ease-in-out;
+}
+.btn--secondary .glyphicon {
+    margin-right: 5px;
+}
+
+/*
+ * Utillities
+ */
+.u-inlineBlock {
+    display: inline-block;
+}
diff --git a/app/components/public/Characters/Characters.css b/app/components/public/Characters/Characters.css
@@ -46,6 +46,12 @@
 	width: 100%;
 	padding: 10px;
 }
+.wikiButton {
+	top: 25px;
+	position: absolute;
+	right: 20px;
+}
+
 .list-group-item {
 	background: #333;
 	border: none;
@@ -64,7 +70,10 @@
 	.character-container .map-wrapper {
 		padding-bottom: 100%;
 	}
-
+	.wikiButton {
+		top: -50px;
+		right: 10px;
+	}
 }
 
 

diff --git a/app/components/public/Characters/Characters.jsx b/app/components/public/Characters/Characters.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 let {Component} = React;
 import $ from 'jquery';
 import './Characters.css';
-import { Row, Col, Image, ProgressBar } from 'react-bootstrap';
+import { Row, Col, Image, ProgressBar, Glyphicon } from 'react-bootstrap';
 
 import MapComp from '../../common/MapComp/MapComp.jsx';
 import Store from '../../../stores/CharactersStore';
@@ -61,7 +61,13 @@ export default class Character extends Component {
                     <div className="header-image">
                         <div className="character-name-container">
                             <Col xs={12} sm={9}  md={8} className="character-name">
-                                <div><h1>{this.state.character.name}</h1></div>
+                                <div className="u-inlineBlock"><h1>{this.state.character.name}</h1></div>
+                                <a href={"https://awoiaf.westeros.org/index.php/" + this.state.character.name}
+                                   target="_blank"
+                                   className="btn--secondary wikiButton u-inlineBlock">
+                                    <Glyphicon glyph="share-alt" />
+                                    Wiki
+                                </a>
                             </Col>
                         </div>
                     </div>