Blog comment CSS to mimic Activity stream.

[modemlooper]

Didn't find a ticket for this.

[modemlooper]

deafault CSS with blog comment updates

[DJPaul]

Thanks very much for the updated styles, modemlooper - they look great. I haven't compared them closely to the activity stream yet, as there's an integration issue. I've taken your file, and made a patch out of it. Whilst I was doing so, I realised that as a result of a recent change, we had two DIV elements with the id #response. 2988-1.patch renames one of these which, in turn, seems to have broken the comment styles when you reply to a comment (w/ javascript).

Patch also updates some CSS formatting issues.

[karmatosed]

Some nice CSS changes there to bring things in line.

Surface look and we've got the capital / not capital issue with a lot of backgrounds going on when one is fixed.

This one has it fixed:

table.forum tr.sticky td { 
1204	 	        background: #fff9db; 
1205	 	        border-top: 1px solid #ffe8C4; 
1206	 	        border-bottom: 1px solid #ffe8c4; 
 	1209	        background: #FFF9DB; 
 	1210	        border-top: 1px solid #FFE8C4; 
 	1211	        border-bottom: 1px solid #FFE8C4; 
1207	1212	} 
1208	1213	

But there are numerous other ones with it still lower case.

As for the comments did a compare against the activity stream of 'current state'. 3 specific areas visually maybe should be adjusted.

1. Author name / commenter name aren't treated same way
2. Count not by the reply
3. Reply / edit isn't in same place as reply / delete

I have attached an image to show these differences.

[karmatosed]

Differences in activity and comments

[DJPaul]

Colours should be specified in lowercase, not the other way around. Look at WP core and the WP CSS guidelines.

[karmatosed]

Fair enough there was a mixture of uppercase and lowercase - agree one for all should be guideline on anything.

[karmatosed]

I found the ticket I think relating to this one: ​http://trac.buddypress.org/ticket/2729 #2729 so just noting here to maybe get them into one.

[modemlooper]

There are few differences from activity stream and these are easily fixed by adding classes to that match activity stream. Mainly the name links. .highlight or something close was the class. Also I wanted to move the reply edit link to mimic the view delete link in the activity stream.

[karmatosed]

If we want to have reply / edit the best method I can find is in the bp_dtheme_blog_comments function to change the code:

		<div class="comment-meta">
				<a href="<?php echo get_comment_author_url() ?>" rel="nofollow"><?php echo get_comment_author(); ?></a> <?php _e( 'said:', 'buddypress' ) ?>
				<em><?php _e( 'On', 'buddypress' ) ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date() ?></a></em>
				
					<?php echo comment_reply_link( array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ?>
					<?php edit_comment_link( __( 'Edit', 'buddypress' ), '', '' ); ?>
			
			</div>

But give or take some styling that would need to occur (and it would).. this is without:

<div class="comment-options">

Which is wrapped around the reply / edit.

So... the problems are thus:

1. Can this be solved using CSS positioning alone and no nasty solution
2. Is changing this function acceptable?
3. If we change the function is loosing the class div acceptable or does some method of keeping it be needed to be found

I don't really want to patch as we are due another one and this needs pondering and input from you modemlooper as you may have a thought on a better or alternative method / adjustment.

[DJPaul]

modemlooper,
Looking at your patch, is there any particular reason why these elements were changed?

.standard-form textarea {
	background-color: #fffeff;
}


.standard-form input:focus,
.standard-form textarea:focus,
.standard-form select:focus {
	background: #fffeff;
}

[DJPaul]

Can people please test 2988-2.patch

[modemlooper]

not sure unless the form color wasn't specified. If I did add it it would to have prevented the grey #respond box from bleeding through.

[DJPaul]

Thanks modemlooper, I thought it was something like that. It tested OK for me without, so I left it out of the 2988-2.patch.

[DJPaul]

I will do the RTL patch once this is tested/approved.

[DJPaul]

I hate mouldy bread

[karmatosed]

Just tested this and looking cool.

The only thing is the comment form on reply is different between activity and this blog post.

Also along that line, as seen in commentform image I just uploaded the cancel seems a bit large and out of place.

[karmatosed]

One big cancel

[modemlooper]

LOL! HUGE I'll go through and recheck all the CSS also needs the class added from activity that puts background around username.

[boonebgorges]

This patch is looking quite nice. Two comments/questions:

1) I guess that the left indent #respond { margin-left: 75px; } is supposed to mimic the fact that activity replies are indented. But I think it makes less sense to indent like this in the case of blog comments, because the reply box does not appear immediately under the content being replied to like it does in the case of activity replies (because of the header 'Leave a Reply' and because new comments appear after existing comments). I would favor removing this indent. (This only applies in the case of first-level comments - the indentation for nested comments makes much more sense)

2) The Cancel Reply link does look a bit strange. Ideally, I'd put it as a text link right next to the 'Post Comment' button. This will probably require a change in the order of the markup to make a non-hackish css solution.

[DJPaul]

Based on Boone's feedback:

1) I've adjusted the indentation a bit, so that where the reply form appears, it matches the indentation level of where the comment will actually appear. Looks OK to me now.

2) Cancel reply is in a span inside of a h3 that contains the title text. I don't think there's a good way of moving it down next to the "post comment" button. 2988-4 changes.png (and the 2988-4.patch) give it the same visual style as the "reply" button, which is my best idea.

[boonebgorges]

The indentation changes look perfect to me. Seems much more natural now.

I think the Cancel styling is a nice compromise. I say go with it.

[djpaul]

(In [3724]) Change blog comment CSS to mimic the Activity Stream. Fixes #2988, props modemlooper