Skip to:
Content

Opened 8 years ago

Closed 8 years ago

Last modified 3 years ago

#2988 closed enhancement (fixed)

Blog comment CSS to mimic Activity stream.

Reported by: modemlooper Owned by:
Milestone: 1.5 Priority: normal
Severity: Version:
Component: Templates Keywords: needs-testing needs-rtl dev-feedback
Cc:

Description

Didn't find a ticket for this.

Attachments (8)

default.css (38.1 KB) - added by modemlooper 8 years ago.
deafault CSS with blog comment updates
2988-1.patch (8.6 KB) - added by DJPaul 8 years ago.
differences.jpg (62.9 KB) - added by karmatosed 8 years ago.
Differences in activity and comments
2988-2.patch (11.9 KB) - added by DJPaul 8 years ago.
2988-3.patch (12.1 KB) - added by DJPaul 8 years ago.
I hate mouldy bread
commentform.jpg (31.7 KB) - added by karmatosed 8 years ago.
One big cancel
2988-4 changes.png (40.5 KB) - added by DJPaul 8 years ago.
2988-4.patch (13.3 KB) - added by DJPaul 8 years ago.

Download all attachments as: .zip

Change History (28)

@modemlooper
8 years ago

deafault CSS with blog comment updates

#1 @DJPaul
8 years ago

  • Milestone changed from Awaiting Review to 1.3

@DJPaul
8 years ago

#2 @DJPaul
8 years ago

  • Keywords needs-testing added

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.

Last edited 8 years ago by DJPaul (previous) (diff)

#3 @karmatosed
8 years ago

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
8 years ago

Differences in activity and comments

#4 @DJPaul
8 years ago

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

#5 @karmatosed
8 years ago

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

#6 @karmatosed
8 years ago

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.

#7 @modemlooper
8 years ago

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.

Last edited 8 years ago by modemlooper (previous) (diff)

#8 @karmatosed
8 years ago

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.

#9 @DJPaul
8 years ago

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
8 years ago

#10 @DJPaul
8 years ago

  • Keywords needs-rtl added

Can people please test 2988-2.patch

#11 @modemlooper
8 years ago

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.

#12 @DJPaul
8 years ago

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.

#13 @DJPaul
8 years ago

  • Keywords dev-feedback added

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

@DJPaul
8 years ago

I hate mouldy bread

#14 @karmatosed
8 years ago

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
8 years ago

One big cancel

#15 @modemlooper
8 years ago

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

Last edited 8 years ago by modemlooper (previous) (diff)

#16 @boonebgorges
8 years ago

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
8 years ago

@DJPaul
8 years ago

#17 @DJPaul
8 years ago

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.

#18 @boonebgorges
8 years ago

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.

#19 @djpaul
8 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

#20 @DJPaul
3 years ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.