Adding comment-less replies to social share page.

This commit is contained in:
Samuel Clay 2015-06-01 20:13:03 -07:00
parent 8652bfb1fd
commit 209eb08cf0
5 changed files with 73 additions and 25 deletions

View file

@ -1936,7 +1936,7 @@ class MSharedStory(mongo.Document):
for u, user_id in enumerate(story['shared_by_public']):
if user_id not in profiles: continue
stories[s]['shared_by_public'][u] = profiles[user_id]
for comment_set in ['friend_comments', 'public_comments']:
for comment_set in ['friend_comments', 'public_comments', 'friend_shares']:
for c, comment in enumerate(story[comment_set]):
if comment['user_id'] not in profiles: continue
stories[s][comment_set][c]['user'] = profiles[comment['user_id']]

View file

@ -108,8 +108,8 @@ a:active {
blockquote {
background-color: #F0F0F0;
border-left: 1px solid #9b9b9b;
padding: 0.5em 2em;
border-left: 1px solid #9B9B9B;
padding: .5em 2em;
margin: 10px;
}
@ -187,7 +187,7 @@ blockquote {
box-sizing: border-box;
}
.NB-blue-button:hover {
border: 1px solid #3573a5;
border: 1px solid #3573A5;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5aa1d8), color-stop(100%, #4d98d2));
background-image: -webkit-linear-gradient(#5aa1d8, #4d98d2);
background-image: -moz-linear-gradient(#5aa1d8, #4d98d2);
@ -195,7 +195,7 @@ blockquote {
background-image: linear-gradient(#5aa1d8, #4d98d2);
}
.NB-blue-button:active {
border: 1px solid #2b5c84;
border: 1px solid #2B5C84;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d98d2), color-stop(100%, #4d98d2));
background-image: -webkit-linear-gradient(#4d98d2, #4d98d2);
background-image: -moz-linear-gradient(#4d98d2, #4d98d2);
@ -569,8 +569,8 @@ blockquote {
}
.NB-story {
border-left: 4px solid #6a6a6a;
border-right: 4px solid #6a6a6a;
border-left: 4px solid #6A6A6A;
border-right: 4px solid #6A6A6A;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
@ -797,7 +797,7 @@ blockquote {
z-index: 10;
margin: 0 30px;
background: #f6f6f6;
border: 1px solid #cccccc;
border: 1px solid #CCC;
padding: 0 20px;
border-top: 0;
}
@ -908,6 +908,19 @@ blockquote {
display: none;
}
}
.NB-story-comments-container .NB-story-comments-shares .NB-story-comment .NB-story-comment-author-container {
margin-top: 5px;
}
.NB-story-comments-container .NB-story-comments-shares .NB-user-avatar img {
width: 18px;
height: 18px;
margin-left: 8px;
}
.NB-story-comments-container .NB-story-comments-shares .NB-user-avatar.NB-story-comment-reshare img {
width: 18px;
height: 18px;
margin-left: 4px;
}
.NB-story-comments-container .NB-story-comment-reply {
margin-top: 15px;
padding: 15px 0 0px 44px;
@ -1169,6 +1182,10 @@ blockquote {
border-bottom: 1px solid #bdbdbd;
padding: 3px 0;
}
.NB-story-comments-container .NB-story-comments-public-header-wrapper.NB-public-top {
margin-top: 0;
padding-top: 9px;
}
.NB-story-comments-container .NB-story-comment-likes {
overflow: hidden;
height: 14px;
@ -1222,10 +1239,10 @@ blockquote {
overflow: hidden;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-webkit-transition: all 0.32s ease-out;
-moz-transition: all 0.32s ease-out;
-o-transition: all 0.32s ease-out;
-ms-transition: all 0.32s ease-out;
-webkit-transition: all .32s ease-out;
-moz-transition: all .32s ease-out;
-o-transition: all .32s ease-out;
-ms-transition: all .32s ease-out;
}
.NB-page-controls-next .NB-page-controls-text,
.NB-page-controls-end .NB-page-controls-text {
@ -1302,7 +1319,7 @@ footer {
right: 60px;
display: inline-block;
border-right: 7px solid rgba(0, 0, 0, 0);
border-bottom: 7px solid #cccccc;
border-bottom: 7px solid #CCC;
border-left: 7px solid rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
@ -1313,7 +1330,7 @@ footer {
right: 61px;
display: inline-block;
border-right: 6px solid rgba(0, 0, 0, 0);
border-bottom: 6px solid white;
border-bottom: 6px solid #FFF;
border-left: 6px solid rgba(0, 0, 0, 0);
content: '';
}
@ -1342,7 +1359,7 @@ footer {
}
.popover .popover-title {
padding: 16px 14px;
border-bottom: 1px solid silver;
border-bottom: 1px solid #C0C0C0;
position: relative;
}
.popover .popover-content {
@ -1351,7 +1368,7 @@ footer {
}
.popover input {
border: 1px solid #bdbdbd;
border: 1px solid #bdbdbd;
border: 1px solid #BDBDBD;
padding: 5px;
width: 100%;
margin-bottom: 8px;

View file

@ -67,7 +67,7 @@ $default-box-shadow-blur: 1px;
&:active {
border: 1px solid $border-color-active;
@include background-image(linear-gradient(#e9e9e9, #e9e9e9));
@include single-box-shadow(#c1c1c1, 0px, 0px, 10px, false, true);
@include single-box-shadow($color: #c1c1c1, $hoff:0px, $voff:0px, $blur:10px, $inset:true);
color: $text-color;
}
@media screen and (max-width: 580px) {
@ -101,7 +101,7 @@ $default-box-shadow-blur: 1px;
&:active {
border: 1px solid #2B5C84;
@include background-image(linear-gradient(#4d98d2, #4d98d2));
@include single-box-shadow(#1f74b8, 0px, 0px, 10px, false, true);
@include single-box-shadow($color: #1f74b8, $hoff:0px, $voff:0px, $blur:10px, $inset:true);
}
@media screen and (max-width: 580px) {
padding: 2px 6px;
@ -234,7 +234,7 @@ blockquote {
.NB-header {
@include single-box-shadow(#7d7d7d, 0px, 0px, 10px, false, false);
@include single-box-shadow($color: #7d7d7d, $hoff:0px, $voff:0px, $blur:10px, $inset:false);
width: 100%;
left: 0;
top: 0;
@ -563,7 +563,7 @@ blockquote {
border-left: 4px solid #6A6A6A;
border-right: 4px solid #6A6A6A;
background: #fff;
@include single-box-shadow(rgba(0, 0, 0, .15), 0px, 0px, 10px, false, false);
@include single-box-shadow($color: rgba(0, 0, 0, .15), $hoff:0px, $voff:0px, $blur:10px, $inset:false);
position: relative;
z-index: 1;
@ -829,14 +829,13 @@ blockquote {
@include border-radius(3px, 3px);
/* @include single-box-shadow; gets in the way of transparent PNGs */
@media screen and ( max-width: 580px) {
@media screen and ( max-width: 580px) {
height: 24px;
width: 24px;
top: 12px;
}
}
.NB-user-avatar.NB-story-comment-reshare img {
top: 27px;
left: 0px;
@ -916,6 +915,25 @@ blockquote {
}
}
.NB-story-comments-shares {
.NB-story-comment {
.NB-story-comment-author-container {
margin-top: 5px;
}
}
.NB-user-avatar img {
width: 18px;
height: 18px;
margin-left: 8px;
}
.NB-user-avatar.NB-story-comment-reshare img {
width: 18px;
height: 18px;
margin-left: 4px;
}
}
.NB-story-comment-reply {
margin-top: 15px;
padding: 15px 0 0px 44px;
@ -1088,6 +1106,11 @@ blockquote {
font-size: $smallest-font-size;
border-bottom: 1px solid $border-color;
padding: 3px 0;
&.NB-public-top {
margin-top: 0;
padding-top: 9px;
}
}
.NB-story-comment-likes {

View file

@ -71,7 +71,7 @@
</div>
<div class="NB-story-comments-container">
{% if story.comment_count or not story.shared_by_user %}
{% if story.comment_count or not story.shared_by_user or story.friend_share_count %}
{% render_story_comments story %}
{% endif %}
</div>

View file

@ -7,6 +7,14 @@
{% render_story_comment story comment %}
{% endfor %}
{% if story.share_count_friends %}
<div class="NB-story-comments-shares">
{% for comment in story.friend_shares %}
{% render_story_comment story comment %}
{% endfor %}
</div>
{% endif %}
<div class="NB-story-comment-edit NB-story-comment {% if story.shared_by_user %}NB-hidden{% endif %}" data-user-id="{{ user_social_profile.user_id }}">
<a href="{{ user_social_profile.blurblog_url }}" class="NB-user-avatar">
<img src="{% if user_social_profile.photo_url %}{{ user_social_profile.photo_url }}{% else %}{{ MEDIA_URL }}/img/circular/circular_avatar.png{% endif %}">
@ -27,7 +35,7 @@
<div class="NB-story-comments-public">
{% if story.comment_count_public %}
<div class="NB-story-comments-public-header-wrapper">
<div class="NB-story-comments-public-header-wrapper {% if story.shared_by_user and not story.friend_comments %}NB-public-top{% endif %}">
<div class="NB-story-comments-public-header">
{{ story.comment_count_public }} public comment{{ story.comment_count_public|pluralize }}
</div>