users-articles v1.4

app/app.routes.js

@@ -1,4 +1,4 @@
-app.config(function($routeProvider,$locationProvider){
+app.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider){
     $locationProvider.hashPrefix('');
     $routeProvider
                 .when('/global_map',{
@@ -21,8 +21,13 @@ app.config(function($routeProvider,$locationProvider){
                 templateUrl: 'app/views/articles-users.template.html',
                 controller: 'ArticlesUsers'
                 })
+                .when('/articles/:id', {
+                templateUrl: 'app/views/article-details.template.html',
+                controller: 'ArticleDetails'
+                })
                 .when('/user-account', {
                 templateUrl: 'app/views/userAccount.template.html',
                 controller: 'UserAccount'
                 })
-})
+                .otherwise('/')
+}]);

app/controllers/article-details.controller.js

@@ -0,0 +1,11 @@
+app.controller('ArticleDetails', ['$scope', '$routeParams', 'articles.repository', 
+	function($scope, $routeParams, articlesRepository) {
+	var articleId = $routeParams.id,
+		articleModel = {};
+	
+	articlesRepository.getArticleById(articleId).then(function(response) {
+		$scope.article = response.data;
+		$scope.article.date = new Date($scope.article.date);
+	}, function(error) {});
+
+}]);

app/controllers/articles-users.controller.js

@@ -1,4 +1,4 @@
-/* (function(){
+(function(){
     'use strict'
     app.controller('ArticlesUsers', ['$scope',  function($scope){
     	console.log ('articles-users');
@@ -11,7 +11,7 @@
 			country_travel: 'Швейцария',
 			location_travel: "loc1-loc2-loc3",
 			image: "image/noname.png",
-			annotation: "Lorem lorem lorem",
+			annotation: "Lorem lorem lorem Lorem lorem lorem Lorem lorem lorem Lorem lorem lorem Lorem lorem loremLorem lorem loremLorem lorem lorem Lorem lorem lorem Lorem lorem lorem",
 			month_travel: "Aug",
 			year_travel: "2017",
 			count_likes: 4,
@@ -47,20 +47,20 @@
 
 console.log ($scope);
     }])
-})()*/
+})()
 
-(function(){
-    'use strict'
-    app.controller('ArticlesUsers', ['$scope', 'articles.repository', 
-    	function($scope, articlesRepository){
-    	console.log ('articles-users');
+// (function(){
+//     'use strict'
+//     app.controller('ArticlesUsers', ['$scope', 'articles.repository', 
+//     	function($scope, articlesRepository){
+//     	console.log ('articles-users');
 		
-	articlesRepository.getArticles().then(function(response) {
-		$scope.articles = response.data;
-	}, function(error) {});
+// 	articlesRepository.getArticles().then(function(response) {
+// 		$scope.articles = response.data;
+// 	}, function(error) {});
 
 
-console.log ($scope);
-console.log ($scope.articles);
-    }])
-})()
+// console.log ($scope);
+// console.log ($scope.articles);
+//     }])
+// })()

app/services/articles.factory.js

@@ -3,11 +3,15 @@
 app.factory('articles.repository', ['webApi', '$http', function(webApi, $http) {
 	return {
 		getArticles: _getArticles,
+		getArticleById: _getArticleById
 	};
 	
 	function _getArticles () {
 		return $http.get(webApi.DOMAIN + '/api/v1/articles');
 	}
 	
+	function _getArticleById(articleId) {
+		return $http.get(webApi.DOMAIN + '/api/v1/articles/' + articleId);
+	}
 }]);
 })();

app/views/article-details.template.html

@@ -0,0 +1,26 @@
+<div class="page-header"><h1>User Article</h1></div>
+
+<div class='row'>
+	<div class='col-xs-12'>
+		<div class='text-center header-article'>
+			<h2>Колыбельная песня Цюриха</h2> 
+			<div class='block-header'>
+				<span class='date-added-article'>14 май 2017</span>
+				<span class='glyphicon glyphicon-map-marker location'>Цюрих</span>
+				<span class="datetravel"><img src='image/plane.png'">Апр 2017</span>
+			</div>
+
+			<div class="block-count">
+            	<span class='glyphicon glyphicon-heart-empty countlikes'>6</span>
+            	<span class='glyphicon glyphicon-comment countcomment'>2</span>
+            </div>
+
+		</div>
+		<fieldset class='annotation'>
+			<legend align='left'>Краткое описание</legend>
+			<p>О том, как я гулял в центральной части Цюриха. О красивейших парках Цюриха.
+			Шикарное время возле озер.</p>
+			
+		</fieldset>>
+	</div>
+</div>

app/views/articles-users.template.html

@@ -1,7 +1,13 @@
 <div class="container-fluid articles-users">
-	<h2>Статьи пользователей</h2>
-	<button type="button" class="btn btn-primary pull-right" ng-click="addArticle()">Добавить статью</button>
+	<div class='nav-brand'>
+    <span>
+       <h2 class="page-header"> <img src='image/icon-travel.png'>
+       Статьи пользователей</h2>
+    </span>
+  </div>
+	
   <div class="row articles">
+    <button type="button" class="btn btn-primary pull-right" ng-click="addArticle()">Добавить статью</button>
      <div class="col-xs-2 col-md-2 aside">
       <div class="row form-group">
 
@@ -23,7 +29,10 @@
           <div class="count">
             <span class='glyphicon glyphicon-heart-empty countlikes'>{{article.count_likes}}</span>
             <span class='glyphicon glyphicon-comment countcomment'>{{article.count_comment}}</span>
-            <span class="glyphicon glyphicon-plane pull-right datetravel">{{article.month_travel}}
+            <img src='image/plane.png' class="pull-right">
+            <span class="pull-right datetravel">
+              
+              {{article.month_travel}}
                {{article.year_travel}}
             </span>
           </div>

css/style.css

@@ -349,6 +349,14 @@ nav button {
 
 /* Users Articles*/
 
+.nav-brand {
+    margin-left: 25px;
+}
+
+.nav-brand img {
+    width: 10%;
+}
+
 .articles-users .aside {
     background: beige;
     padding: 10px;
@@ -368,6 +376,7 @@ nav button {
 
 .block-article .annotation {
     padding-top: 30px;
+    height: 120px;
 }
 
 .col-md-10 .col-md-offset-2 img {
@@ -400,6 +409,22 @@ nav button {
     padding-left: 30px;
 }
 
+/*.datetravel {
+    background: url(image/plane.png) no-repeat;
+    background-size: 30%;
+    height: 25px;
+    width: 60px;
+}*/
+
+.count img {
+    border: none;
+    width: 8%;
+}
+
+.datetravel {
+    padding-right: 5px;
+}
+
 .articles-users .btn {
     margin-bottom: 0;
 }
@@ -410,4 +435,54 @@ nav button {
 
 .row {
     margin:0;
+}
+
+.page-header h1 {
+    margin-left: 25px;
+}
+
+.block-header img {
+    width: 3%;
+}
+
+.block-header span {
+    padding: 10px;
+}
+
+.header-article {
+    background: url(image/background-travel.png) no-repeat 40px;
+    background-size: 25%;
+    height: 200px;
+}
+
+.header-article h2, .block-header, .block-count  {
+    margin-left: 280px;
+}
+
+.block-count {
+    padding-top: 60px;
+}
+
+fieldset {
+
+    border: 1px solid blue;
+    width: 90%;
+    margin-left: 70px;
+}
+
+legend {
+    display: block;
+    width: 25%;
+    padding: 0 15px;
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: inherit;
+    color: #333;
+    border: 0;
+    border-bottom: none; 
+}
+
+fieldset p {
+    margin-left: 15px;
+    margin-bottom: 15px;
 }

index.html

@@ -36,6 +36,7 @@
     <script type="text/javascript" src="app/controllers/map/country/swiss.controller.js"></script>
 
     <script type="text/javascript" src="app/controllers/articles-users.controller.js"></script>
+    <script type="text/javascript" src="app/controllers/article-details.controller.js"></script>
     <script type="text/javascript" src="app/controllers/header.controller.js"></script>
     <script type="text/javascript" src="app/controllers/userAccount.controller.js"></script>
     <script type="text/javascript" src="app/controllers/login.controller.js"></script>