Add styles and meta info to article-wrapper

front/js/app.js

@@ -54,6 +54,7 @@ app.controller('main', function($scope,$http,$sce) {
 	$scope.category="-1";
 	$scope.news=[];
 	$scope.newsArticle="";
+	$scope.selectedArticle = {};
 	$scope.curPage=1;
 	$scope.totPages=1;
 	var lastPage=0;
@@ -87,6 +88,7 @@ app.controller('main', function($scope,$http,$sce) {
 	$scope.getKeywords();
 
 	$scope.getArticle = function(el) {
+		$scope.selectedArticle = el;
 		$http.get("/pymnts/article/"+el._id).then(
 			function(data) {
 				$scope.newsArticle=$sce.trustAsHtml(data.data.articles.html);

front/main.html

@@ -87,6 +87,12 @@
 				</div>
 			</div>
 			<div class="article-wrapper">
+				<h2>{{selectedArticle.title}}</h2>
+				<ul class="news-meta" ng-show="selectedArticle.title">
+					<li><i class="fa fa-calendar-o"></i> {{selectedArticle.scrap_date | date:'short'}}</li>
+					<li>Weight: {{selectedArticle.weight}}</li>
+					<li><i class="fa fa-globe"></i> {{selectedArticle.source_name}}</li>
+				</ul>
 				<div id="news" ng-bind-html="newsArticle"></div>
 			</div>
 			<div style="clear: both"></div>

front/style.css

@@ -273,9 +273,22 @@ ul.news-meta li {
 	max-height:100%;
 	overflow-y:auto;
 	right:5px;
-	width: 41%;
+	width: 45%;
 }
 
+.article-wrapper h2 {
+	color: rgb(27, 77, 14) !important;
+}
+
+.article-wrapper a {
+	color: rgb(27, 77, 14);
+	background-color: #f4f4f4;
+}
+
+.article-wrapper a:hover {
+	color: rgb(27, 77, 14);
+	text-decoration: none;
+}
 .title h4 {
 	width: 92%;
 	float: left;