Amaze UI 2.4

Comment

Comment consists of users' avatar, meta information and comment content. (Just like comment in github.)

Basic structure:

<article class="am-comment"> <!-- Container -->
  <a href="">
    <img class="am-comment-avatar" alt=""/> <!-- Avatar -->
  </a>

  <div class="am-comment-main"> <!-- Content Container -->
    <header class="am-comment-hd">
      <!--<h3 class="am-comment-title">Title</h3>-->
      <div class="am-comment-meta"> <!-- Meta -->
        <a href="#link-to-user" class="am-comment-author">..</a> <!-- Author -->
        Comment at <time datetime="">...</time>
      </div>
    </header>

    <div class="am-comment-bd">...</div> <!-- 评论内容 -->
  </div>
</article>

Usually we won't use .am-comment-title.

Usage

Single Comment

Ernest Hemingway Comment at 2014-7-12 15:30

Every day is a new day. It is better to be lucky. But I would rather be exact. Then when luck comes you are ready.

Luck is a thing that comes in many forms and who can recognize her?

``` ```html

Ernest Hemingway Comment at 2014-7-12 15:30

...

``` ### Comments list Use `.am-comments-list` to pack multiple `.am-comment` to form a comments list. Add the `.am-comment-list` class to `

Ernest Hemingway Comment at 2014-7-12 15:30
Every day is a new day. It is better to be lucky. But I would rather be exact. Then when luck comes you are ready.
Luck is a thing that comes in many forms and who can recognize her?
Alen 评论于 2014-7-13 0:03
She's gone; I've already known
She will leave from my life
Betty Comment at 2014-7-14 23:30
@Ernest Hemingway Good luck!
Ernest Hemingway Comment at 2014-7-14 23:301
@Betty Got it!
Betty Comment at 2014-7-14 23:32
@Ernest Hemingway Bye-Bye
Ernest Hemingway Comment at 2014-7-14 23:301
@路人乙 Bye
Betty Comment at 2014-7-14 23:32
@Ernest Hemingway Love you.
Ernest Hemingway Comment at 2014-7-14 23:301
@路人乙 Me too.

<ul class="am-comments-list am-comments-list-flip">
  <li class="am-comment">
    ...
  </li>

  <li class="am-comment">
    ...
  </li>

  ...

  <li class="am-comment am-comment-flip"></li>

  <li class="am-comment am-comment-highlight"></li>
</ul>

Align

Add the .am-comments-list-flip class to .am-comments-list to align the comments alternately to left and right (works in medium-up).

Suggestion from users: Not everyone like alternately align their comments, so we make this a seperate class. You may use it as your wish.

Comment status

Add the status classes to comments (like the last comments in example above).

.am-comment-flip Show avatar on the right
.am-comment-primary Highlight Comment (primary border)
.am-comment-highlight / .am-comment-highlight Highlight Comment (secondary border)
.am-comment-success Highlight Comment (green border)
.am-comment-warning Highlight Comment (orange border)
.am-comment-danger Highlight Comment (red border)

<article class="am-comment am-comment-flip">
  ...
</article>

<article class="am-comment am-comment-flip">
  ...
</article>

<article class="am-comment am-comment-flip am-comment-highlight">
  ...
</article>