From 37d22b63ad661d771c9b9ff05a428b3d636244fd Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Mon, 24 Nov 2014 00:15:18 +0300 Subject: [PATCH] + timeline --- assets/graphics/timeline-arrow-left.png | Bin 0 -> 697 bytes assets/graphics/timeline-arrow-right.png | Bin 0 -> 653 bytes assets/graphics/timeline-line.png | Bin 0 -> 177 bytes assets/style/feed.scss | 30 -------- assets/style/timeline-content.scss | 24 ++++++ assets/style/timeline.scss | 89 +++++++++++++++++++++++ client/app.js | 1 + client/pages/home.js | 16 ---- client/ui/timeline.js | 34 +++++++++ views/home.html | 29 ++++---- views/timeline.html | 20 +++++ 11 files changed, 183 insertions(+), 60 deletions(-) create mode 100644 assets/graphics/timeline-arrow-left.png create mode 100644 assets/graphics/timeline-arrow-right.png create mode 100644 assets/graphics/timeline-line.png delete mode 100644 assets/style/feed.scss create mode 100644 assets/style/timeline-content.scss create mode 100644 assets/style/timeline.scss create mode 100644 client/ui/timeline.js create mode 100644 views/timeline.html diff --git a/assets/graphics/timeline-arrow-left.png b/assets/graphics/timeline-arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a31819d66dd8beb0be6b496eddff07526deeed79 GIT binary patch literal 697 zcmeAS@N?(olHy`uVBq!ia0vp^JV2bp!3-pWLl6B2QY`6?zK#qG8~eHcB(ehe3dtTp zz6=aiY77hwEes65fIf!L1y`jx0w>(T$ACws&MIKjopuRTJv57bfLyJQHXtW0JSK3quF1tOt<8 zS>O>_%)r1c1j3A$?$-SQ3f}j0aSX9I{q|CL@Sy+!)(0#~t}k7ewrlwcicE-GI_LlY zW{pXS79TYm9%{JG5zM_1nbki78e`=krgz1x&E3$$$0UVdIGY-YUnTvmu=@uM4unv6E8 zOxZTIamC`GHi_7q$Es!i%=)p_{^YTL5z%iro;KdSA$%%G<8{&Bw|gynWZ4(Kuv|6g T&>*&|8<4kW(&d_LRTx_f2=q^EsXQyAGulGT7QKnSysp}U*bJ+ zQS@yJ_lhr{B~n=gu9bhcnmm(Zp3;MLjmP(?&Sqo>n#Y*r?e4vL>4nJ za0`JjTR^PGNcZ^k4t;n^;!PWATeoNc8_Z z>EyYR@aQ#W-1ZsuHGI1pn3<&Jv~cGgV%C4yJfB0sqeVdJP=`R^kt42FJW72m6I)JL zPc<_R5wlc^zt9!JqI#%cM(Qf2y}w+}wp;DaGP(H3`j&3VuC47=wFwG_d#*2jz47Cd zF#q%w((CJN#ivVg7i-Gxs=9k9%4EBz_>FBw6V}R1?VBs{K9297g0kg4PVde@&WO&q oNUqe_DXzbo_WrA#b8e0P+81j6d)@Uqf!<>9boFyt=akR{0Gi69MF0Q* literal 0 HcmV?d00001 diff --git a/assets/graphics/timeline-line.png b/assets/graphics/timeline-line.png new file mode 100644 index 0000000000000000000000000000000000000000..2a52a2a629aa6d4a774720531b79104b1cfaebe6 GIT binary patch literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^OhDYk$P6UIPIT`FQY`6?zK#qG8~eHcB(ehe3dtTp zz6=aiY77hwEes65fI~bp9zYIffk$L90|U1Z2s2)~TlWVj$nELk7$R{wIYEMzfsuuQacf~;CQz8c M)78&qol`;+0KHl!=>Px# literal 0 HcmV?d00001 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 @@
-
-
    -
  • -
    - - {{post.username}} -
    -
    -

    {{post.text}}

    - -
    -
    • -
-
+ + + + + + + + + + + + + + +
\ 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