diff --git a/assets/graphics/timeline-arrow-left.png b/assets/graphics/timeline-arrow-left.png new file mode 100644 index 00000000..a31819d6 Binary files /dev/null and b/assets/graphics/timeline-arrow-left.png differ diff --git a/assets/graphics/timeline-arrow-right.png b/assets/graphics/timeline-arrow-right.png new file mode 100644 index 00000000..45084be1 Binary files /dev/null and b/assets/graphics/timeline-arrow-right.png differ diff --git a/assets/graphics/timeline-line.png b/assets/graphics/timeline-line.png new file mode 100644 index 00000000..2a52a2a6 Binary files /dev/null and b/assets/graphics/timeline-line.png differ diff --git a/assets/style/feed.scss b/assets/style/feed.scss deleted file mode 100644 index d46f50b2..00000000 --- a/assets/style/feed.scss +++ /dev/null @@ -1,30 +0,0 @@ -.feed { - width: 50%; - margin: 30px auto 0; - - ul{ - margin: 0; - padding: 0; - - list-style: none; - } - - .post { - margin-bottom: 30px; - - .user img { - width: 60px; - border-radius: 50%; - } - - .body img { - display: block; - width: 100%; - max-width: 640px; - box-sizing: border-box; - border-radius: 5px; - border: 8px solid white; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35); - } - } -} \ No newline at end of file diff --git a/assets/style/timeline-content.scss b/assets/style/timeline-content.scss new file mode 100644 index 00000000..278b2620 --- /dev/null +++ b/assets/style/timeline-content.scss @@ -0,0 +1,24 @@ +.timeline { + .post { + .user img { + width: 40px; + height: 40px; + border-radius: 50%; + } + + .body{ + h2{ + padding: 12px 0 0; + } + + img { + width: 100%; + max-width: 500px; + box-sizing: border-box; + border-radius: 5px; + border: 8px solid white; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35); + } + } + } +} \ No newline at end of file diff --git a/assets/style/timeline.scss b/assets/style/timeline.scss new file mode 100644 index 00000000..cfe8ffa6 --- /dev/null +++ b/assets/style/timeline.scss @@ -0,0 +1,89 @@ +.timeline{ + min-width: 500px; +} + +.post{ + position: relative; + display: flex; + + .head, .body{ + position: relative; + width: 50%; + box-sizing: border-box; + } + + .head { + padding: 25px 20px; + } + + .body { + padding: 0 20px; + } + + &.left{ + flex-flow: row-reverse; + + .body{ + text-align: right; + } + + .head{ + text-align: left; + } + + .body:after{ + content: ''; + position: absolute; + width: 12px; + height: calc(100% - 98px); + top: 98px; + right: 0; + background: url(/graphics/timeline-line.png) no-repeat right; + background-size: 2px 100%; + } + + .head:after{ + content: ''; + position: absolute; + width: 12px; + height: 98px; + top: 0; + left: -12px; + background: url(/graphics/timeline-arrow-left.png) no-repeat; + } + } + + &.right{ + flex-flow: row; + + .body{ + text-align: left; + } + + .head{ + text-align: right; + margin: 0 10px; + } + + .body:after{ + content: ''; + position: absolute; + width: 100px; + height: calc(100% - 98px); + top: 98px; + left: -12px; + background: url(/graphics/timeline-line.png) no-repeat; + background-size: 2px 100%; + } + + .head:after{ + content: ''; + position: absolute; + width: 12px; + height: 98px; + top: 0; + left: calc(100% - 2px); + background: url(/graphics/timeline-arrow-right.png) no-repeat; + } + } +} \ No newline at end of file diff --git a/client/app.js b/client/app.js index e3ab1a3f..d78cbbe6 100644 --- a/client/app.js +++ b/client/app.js @@ -41,6 +41,7 @@ app.config(function ($locationProvider, $routeProvider) { require("./api/api")(app); require("./ui/menu")(app); +require("./ui/timeline")(app); require("./filters/uppercase-first")(app); require("./pages/home")(app); require("./pages/schedule")(app); diff --git a/client/pages/home.js b/client/pages/home.js index b7329432..89541658 100644 --- a/client/pages/home.js +++ b/client/pages/home.js @@ -6,20 +6,4 @@ module.exports = function (app) { app.controller("HomePageController", function ($scope) { $scope.pageClass = "page-home"; }); - - app.controller("FeedController", function ($scope, api) { - api.feed.post() - .success(function (list) { - $scope.feed = list.map(function (post) { - return { - date: post.publishDate, - image: post.data.images.standard_resolution.url, - url: post.data.link, - username: post.data.user.username, - userpic: post.data.user.profile_picture, - text: post.data.caption.text - } - }); - }); - }); }; \ No newline at end of file diff --git a/client/ui/timeline.js b/client/ui/timeline.js new file mode 100644 index 00000000..d701ae21 --- /dev/null +++ b/client/ui/timeline.js @@ -0,0 +1,34 @@ +/** + * Created by tmshv on 23/11/14. + */ + +module.exports = function(app) { + app.directive("timeline", function () { + return { + templateUrl: "/views/timeline.html", + scope: { + + }, + link: function(scope, element, attrs){ + scope.isEven = function(index){ + return index % 2 === 1; + } + }, + controller: function($scope, api){ + api.feed.post() + .success(function (list) { + $scope.feed = list.map(function (post) { + return { + date: post.publishDate, + image: post.data.images.standard_resolution.url, + url: post.data.link, + username: post.data.user.username, + userpic: post.data.user.profile_picture, + text: post.data.caption.text + } + }); + }); + } + }; + }); +}; \ No newline at end of file diff --git a/views/home.html b/views/home.html index 9134c886..fc65d180 100644 --- a/views/home.html +++ b/views/home.html @@ -1,16 +1,17 @@
-
- -
+ + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/views/timeline.html b/views/timeline.html new file mode 100644 index 00000000..efa634b9 --- /dev/null +++ b/views/timeline.html @@ -0,0 +1,20 @@ +
+
+ +
+
+ + {{post.username}} +
+

23.12.2012

+
+ +
+

Рисунок

+

{{post.text}}

+ +
+
+
\ No newline at end of file