Comment
Comments occur in various places in our UI. They have a basic structure of author information on the left, and other various content on the right.
Comments can appear in various "containers" and their look can vary depending on what container they are in. See example pages for examples of comments in containers. The comments shown here are the individual comments.
Besides the basic comment and comment variants, we have a status version of a comment, and a plain comment bubble that allows you to present text as if someone is speaking it (like in the comic strips).
In order to retire our first implementation of comments, our basic comment classes use the lotusPost class and its variants.
Comment on a profile "board"
Status on a profile "board"
Comment in a Forum
Update Status
Comment Bubble
Classes:
- lotusPost - put this on outermost div
- lotusPostAuthorInfo - create an inner div and give it this class
- lotusPostAvatar - this div wraps the author's photo
- lotusPostName - this appears on comments in a forum
- lotusPostContent - this class wraps the rest of the comment information
- lotusPostDetails - This class is on the div that wraps the text of the comment.
- lotusUpdateStatus - This is an additional class that goes on a comment used to update a person's status.
- Wrappers:
- lotusCommentList - this class is assigned to a ul tag that contains a list of comments.
- lotusCommentItem - this class is assigned to an li tag that contains a comment.
- lotusAddComment - goes on the last li tag in a comment list (in place of the lotusCommentItem class) which wraps a UI for the user to enter a comment.
- lotusBoard - goes on a div surrounding a UI that shows comments, and updates, and allows replies on comments.
- lotusForum - this calls goes on a div that wraps replies in a forum.
- lotusChild - goes on any nested ul tags in a forum reply list
Basic Implementation
The best way to describe how to do comments is to look at the code and the example pages. We've basically created a shell that can present comments in a variety of ways, but always with author information in one area (to the left) and the rest of the information in another area.
There are lots of divs with classes to allow this component to be flexible in presentation options.
Comments can have a delete button, which appears last in the code (for screen readers) but shows up in the upper right-hand corner.
Comments look different depending on their context:
The board is Connections version of a bulletin board. It contains comments, status updates, and comments on comments.
A forum contains an original comment post and a series of replies contained in a comment list (which can be nested).
Comments appear in comment lists in other areas of the UI, but they are flat lists and can be styled differently depending on their context.
Examples
Sample HTML
Sample HTML - Profile Board
Sample HTML - Status
Sample HTML - in Forum
Sample HTML - Update Status
Sample HTML - Bubble
CSS (comments.css)
Theme CSS (commentsTheme.css)
This component began as a comment bubble.
It was then decided to go with a different look for discussion forum, but the complexities of the creation of the comment bubble and it's classes remained.
Now the original comment html and classes are obsolete and we use the lotusPost class rather than lotusComment. There are many more varieties of comments available now.