From 07908b3f99f20bd82f689576b991a95dc5ff5e35 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Mon, 6 Jul 2015 01:32:01 +0300 Subject: [PATCH] timeline update; --- assets/style/timeline-content.scss | 39 -------------- assets/style/timeline-instagram.scss | 34 ++++++++++++ assets/style/timeline-record.scss | 8 +++ assets/style/timeline.scss | 79 +++++----------------------- client/ui/timeline.js | 6 +-- templates/views/timeline-gram.html | 25 ++++----- templates/views/timeline.html | 2 +- 7 files changed, 70 insertions(+), 123 deletions(-) delete mode 100644 assets/style/timeline-content.scss create mode 100644 assets/style/timeline-instagram.scss create mode 100644 assets/style/timeline-record.scss diff --git a/assets/style/timeline-content.scss b/assets/style/timeline-content.scss deleted file mode 100644 index ec2dc361..00000000 --- a/assets/style/timeline-content.scss +++ /dev/null @@ -1,39 +0,0 @@ -.timeline { - .timeline-record { - .user{ - margin-top: 4px; - - span{ - vertical-align: top; - line-height: 40px; - } - - img { - width: 40px; - height: 40px; - border-radius: 50%; - } - } - - .date{ - margin: 5px 0 0; - color: #999; - font-size: 0.75em; - } - - .body{ - a{ - border-bottom: none; - } - - 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-instagram.scss b/assets/style/timeline-instagram.scss new file mode 100644 index 00000000..efd3fee4 --- /dev/null +++ b/assets/style/timeline-instagram.scss @@ -0,0 +1,34 @@ +.timeline-record { + .instagram { + margin: 0 auto; + max-width: 640px; + + .head { + width: 100%; + margin: 0 0 .5em; + + .user { + span { + vertical-align: top; + line-height: 40px; + } + + img { + width: 40px; + height: 40px; + border-radius: 50%; + } + } + } + + .body img { + width: 100%; + height: auto; + box-sizing: border-box; + border: .5em solid white; + box-shadow: 0 .2em 0.35em rgba(0, 0, 0, 0.35); + border-radius: .35em; + margin: 0 0 1em; + } + } +} \ No newline at end of file diff --git a/assets/style/timeline-record.scss b/assets/style/timeline-record.scss new file mode 100644 index 00000000..d67abfa4 --- /dev/null +++ b/assets/style/timeline-record.scss @@ -0,0 +1,8 @@ +.timeline-record { + margin: 0 0 3em; + .date { + margin: 0 0 0.45em; + font-size: 0.75em; + color: #999; + } +} diff --git a/assets/style/timeline.scss b/assets/style/timeline.scss index 95e72b7f..a0739c55 100644 --- a/assets/style/timeline.scss +++ b/assets/style/timeline.scss @@ -1,72 +1,13 @@ .timeline{ - min-width: 400px; - position: relative; - display: block; - width: 75%; - margin: 0 auto 50px; + display: flex; + flex-direction: column; + width: 70%; + margin: 0 auto 2em; } -.timeline-record{ - position: relative; - - .body { - margin: 0 0 50px; - - img{ - margin: 0 auto; - display: block; - min-height: 500px; - } - } -} - -@media screen and (max-device-width: 400px) { - .timeline { - min-width: 0; - position: relative; - margin: 0 0 50px; - - .head{ - margin: 0; - padding: 0; - } - - .body{ - margin: 0 0 40px; - padding: 0; - } - - .body p{ - text-align: left; - margin: 0 0 2px; - padding: 0; - } - - .timeline-record { - position: relative; - display: flex; - - .head, .body { - position: relative; - width: 90%; - box-sizing: border-box; - } - - .head { - padding: 5px 20px; - } - - .body { - padding: 0 20px; - } - } - } -} - -.timeline-end{ - width: 50%; - margin: 0 auto; - text-align: center; +.timeline-footer{ + display: flex; + justify-content: center; button.more{ position: relative; @@ -88,4 +29,10 @@ top: 0; } } +} + +@media screen and (max-device-width: 31.25em) { + .timeline { + width: 98%; + } } \ No newline at end of file diff --git a/client/ui/timeline.js b/client/ui/timeline.js index cc8be8d5..f4a8730d 100644 --- a/client/ui/timeline.js +++ b/client/ui/timeline.js @@ -37,7 +37,7 @@ module.exports = function(app) { image: post.data.image.standard_resolution.url, url: post.data.url, username: name, - //userpic: post.data.user.profile_picture, + userpic: 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg', text: post.body, //text: postText(post), type: post.type @@ -78,9 +78,6 @@ module.exports = function(app) { .success(function (list) { $scope.timelineUpdating = false; usSpinnerService.stop("timelineMore"); - //$timeout(function () { - // - //}, 5000); var feed = list.map(function (post) { if(post.type == "instagram") return toInstagram(post); @@ -96,7 +93,6 @@ module.exports = function(app) { io.on("post", function (params) { var posts = params instanceof Array ? params : [params]; - console.log("post", posts); var feed = posts.map(function (post) { if(post.type == "instagram") return toInstagram(post); diff --git a/templates/views/timeline-gram.html b/templates/views/timeline-gram.html index 962143b2..e1e0e6b4 100644 --- a/templates/views/timeline-gram.html +++ b/templates/views/timeline-gram.html @@ -1,15 +1,16 @@ -
-
- - {{post.username}} +
+
+

{{post.date | date : "dd.MM.yyyy"}}

+
+ + {{post.username}} +
-

{{post.date | date : "dd.MM.yyyy"}}

-
-
- -

{{post.text}}

- - - +
+ +

{{post.text | removeHashtags | strip}}

+
\ No newline at end of file diff --git a/templates/views/timeline.html b/templates/views/timeline.html index d2093fa0..e46d4cd8 100644 --- a/templates/views/timeline.html +++ b/templates/views/timeline.html @@ -5,7 +5,7 @@ ng-class="{left: isEven($index), right: !isEven($index)}"> -
+