You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
16 KiB
506 lines
16 KiB
---
|
|
layout : 'default'
|
|
css : 'comment'
|
|
|
|
title : 'Comment'
|
|
description : 'A comment is used to display user feedback to site content'
|
|
type : 'UI View'
|
|
|
|
element : 'comment'
|
|
elementType : 'view'
|
|
|
|
themes : ['Default', 'Chubby']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/comment.less" />
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Comments</h4>
|
|
<p>A basic list of comments</p>
|
|
<div class="ui ignored info attached message">
|
|
<p>These examples uses <a href="/elements/segment.html">ui segment</a> to create content segments. This is not required.</p>
|
|
</div>
|
|
<div class="ui ignored bottom attached warning message">
|
|
<p><b>UI Views</b> provide structured layouts, but do not hook up site specific code. You will need to add your own javascript behaviors to hide and show the appropriate forms. For example, having a reply button open a reply form<p>
|
|
</div>
|
|
<div class="ui comments segment">
|
|
<h3 class="ui dividing header">Comments</h3>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/matt.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Matt</a>
|
|
<div class="metadata">
|
|
<span class="date">Today at 5:42PM</span>
|
|
</div>
|
|
<div class="text">
|
|
How artistic!
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Elliot Fu</a>
|
|
<div class="metadata">
|
|
<span class="date">Yesterday at 12:30AM</span>
|
|
</div>
|
|
<div class="text">
|
|
<p>This has been very useful for my research. Thanks as well!</p>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
<div class="comments">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Jenny Hess</a>
|
|
<div class="metadata">
|
|
<span class="date">Just now</span>
|
|
</div>
|
|
<div class="text">
|
|
Elliot you are always so right :)
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Joe Henderson</a>
|
|
<div class="metadata">
|
|
<span class="date">5 days ago</span>
|
|
</div>
|
|
<div class="text">
|
|
Dude, this is awesome. Thanks so much
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="ui reply form">
|
|
<div class="field">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="ui blue labeled submit icon button">
|
|
<i class="icon edit"></i> Add Reply
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<h3 class="ui header">Comment</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Avatar</h4>
|
|
<p>A comment can contain an image or avatar</p>
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Elliot Fu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Metadata</h4>
|
|
<p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p>
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/stevie.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Stevie Feliciano</a>
|
|
<div class="metadata">
|
|
<div class="date">2 days ago</div>
|
|
<div class="rating">
|
|
<i class="star icon"></i>
|
|
5 Faves
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
Hey guys, I hope this example comment is helping you read this documentation.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Actions</h4>
|
|
<p>A comment can contain an list of actions a user may perform related to this comment.</p>
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Tom Lukic</a>
|
|
<div class="text">
|
|
This will be great for business reports. I will definitely download this.
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
<a class="save">Save</a>
|
|
<a class="hide">Hide</a>
|
|
<a>
|
|
<i class="expand icon"></i>
|
|
Full-screen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Reply Form</h4>
|
|
<p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p>
|
|
<div class="ui info message">
|
|
<p>If a comment form is located inside a <code> ui comment</code> it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.</p>
|
|
</div>
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/steve.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Steve Jobes</a>
|
|
<div class="metadata">
|
|
<div class="date">2 days ago</div>
|
|
</div>
|
|
<div class="text">
|
|
Revolutionary!
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply active">Reply</a>
|
|
</div>
|
|
<form class="ui reply form">
|
|
<div class="field">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="ui primary submit labeled icon button">
|
|
<i class="icon edit"></i> Add Reply
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Joe Henderson</a>
|
|
<div class="metadata">
|
|
<div class="date">1 day ago</div>
|
|
</div>
|
|
<div class="text">
|
|
<p>The hours, minutes and seconds stand as visible reminders that your effort put them all there. </p>
|
|
<p>Preserve until your next run, when the watch lets you see how Impermanent your efforts are.</p>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/christian.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Christian Rocha</a>
|
|
<div class="metadata">
|
|
<div class="date">2 days ago</div>
|
|
</div>
|
|
<div class="text">
|
|
I re-tweeted this.
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="ui reply form">
|
|
<div class="field">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="ui primary submit labeled icon button">
|
|
<i class="icon edit"></i> Add Comment
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Collapsed</h4>
|
|
<p>Comments can be collapsed, or hidden from view</p>
|
|
<div class="ui comments segment">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/christian.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Christian Rocha</a>
|
|
<div class="metadata">
|
|
<span class="date">2 days ago</span>
|
|
</div>
|
|
<div class="text">
|
|
I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
<div class="collapsed comments">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Pawfin Dog</a>
|
|
<div class="metadata">
|
|
<span class="date">1 day ago</span>
|
|
</div>
|
|
<div class="text">
|
|
I think this is a great idea and i am voting on it
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
<div class="comments">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/demo/avatar.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Dog Doggington</a>
|
|
<div class="metadata">
|
|
<span class="date">20 minutes ago</span>
|
|
</div>
|
|
<div class="text">
|
|
I think this is a great idea and i am voting on it
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Threaded</h4>
|
|
<p>A comment list can be threaded to showing the relationship between conversations</p>
|
|
<div class="ui threaded comments segment">
|
|
<h3 class="ui dividing header">Comments</h3>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/matt.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Matt</a>
|
|
<div class="metadata">
|
|
<span class="date">Today at 5:42PM</span>
|
|
</div>
|
|
<div class="text">
|
|
How artistic!
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Elliot Fu</a>
|
|
<div class="metadata">
|
|
<span class="date">Yesterday at 12:30AM</span>
|
|
</div>
|
|
<div class="text">
|
|
<p>This has been very useful for my research. Thanks as well!</p>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
<div class="comments">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Jenny Hess</a>
|
|
<div class="metadata">
|
|
<span class="date">Just now</span>
|
|
</div>
|
|
<div class="text">
|
|
Elliot you are always so right :)
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Joe Henderson</a>
|
|
<div class="metadata">
|
|
<span class="date">5 days ago</span>
|
|
</div>
|
|
<div class="text">
|
|
Dude, this is awesome. Thanks so much
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="ui reply form">
|
|
<div class="field">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="ui blue labeled submit icon button">
|
|
<i class="icon edit"></i> Add Reply
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Minimal</h4>
|
|
<p>Comments can hide extra information unless a user shows intent to interact with a comment.</p>
|
|
<div class="ui minimal comments segment">
|
|
<h3 class="ui dividing header">Comments</h3>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/matt.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Matt</a>
|
|
<div class="metadata">
|
|
<span class="date">Today at 5:42PM</span>
|
|
</div>
|
|
<div class="text">
|
|
How artistic!
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Elliot Fu</a>
|
|
<div class="metadata">
|
|
<span class="date">Yesterday at 12:30AM</span>
|
|
</div>
|
|
<div class="text">
|
|
<p>This has been very useful for my research. Thanks as well!</p>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
<div class="comments">
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Jenny Hess</a>
|
|
<div class="metadata">
|
|
<span class="date">Just now</span>
|
|
</div>
|
|
<div class="text">
|
|
Elliot you are always so right :)
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<a class="avatar">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</a>
|
|
<div class="content">
|
|
<a class="author">Joe Henderson</a>
|
|
<div class="metadata">
|
|
<span class="date">5 days ago</span>
|
|
</div>
|
|
<div class="text">
|
|
Dude, this is awesome. Thanks so much
|
|
</div>
|
|
<div class="actions">
|
|
<a class="reply">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="ui reply form">
|
|
<div class="field">
|
|
<textarea></textarea>
|
|
</div>
|
|
<div class="ui blue labeled submit icon button">
|
|
<i class="icon edit"></i> Add Reply
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|