Add pagination styles

front/js/app.js

@@ -154,6 +154,9 @@ app.controller('main', function($scope,$http,$sce) {
 				arr.push(i);
 		return arr;
 	};
+	$scope.isCurrent = function(page){
+		return page === $scope.curPage;
+	}
 	$scope.delete_article = function(id) {
 		$http.get("/pymnts/article/delete/"+id).then(
 			function(data) {

front/main.html

@@ -78,10 +78,17 @@
 						<i class="fa fa-tags"></i> <div ng-repeat="k in n.kw" class="kw" ng-click="addKeyword(k)">{{k}}</div>
 					</div>
 				</section>
-				<div class="pagination">
+				<!-- <div class="pagination">
 					<div class="center">
 						Page: <input type="number" ng-model="curPage" ng-change="changePage(curPage)" ng-model-options='{ debounce: 500 }' ng-blur="changePage(curPage)"> / {{totPages}}
 					</div>
+				</div> -->
+				<div class="pagination">
+					<ul>
+						<li><a href="" ng-click="changePage(curPage-1)"><i class="fa fa-chevron-left"></i></a></li>
+						<li ng-repeat="p in pages() | limitTo: 5"><a href="" ng-click="changePage(p)" ng-class="{'current': isCurrent(p)}">{{p}}</a></li>
+						<li><a href="" ng-click="changePage(curPage+1)"><i class="fa fa-chevron-right"></i></a></li>
+					</ul>
 				</div>
 			</div>
 			<div class="article-wrapper">

front/style.css

@@ -148,7 +148,7 @@ body {
 }
 
 .filter li .select {
-	
+
 }
 .filter tags-input {
 	margin-top:20px;
@@ -360,6 +360,37 @@ ul.news-meta li {
 	text-align:center;
 }
 
+.pagination ul {
+	list-style: none;
+	margin: 0px;
+	padding: 0;
+	height: 100%;
+}
+.pagination ul li {
+	display: inline-block;
+	width: 25px;
+}
+.pagination ul li a{
+	display: block;
+	padding: 5px;
+	color: rgba(112, 100, 172, 0.8);
+}
+
+.pagination ul li a:hover{
+	color: rgba(112, 100, 172, 1);
+	text-decoration: none;
+	background-color: #f4f4f4;
+}
+
+.pagination ul li a:active, a:focus{
+	text-decoration: none;
+}
+.current { background-color: #f4f4f4; }
+/*ul.pagination li:after{
+	content: '';
+	display: block;
+	clear: both;
+}*/
 .pagination input { width: 40px;}
 
 #news img { max-width:90%; }