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.
|
|
---layout : 'default'css : 'comment'
title : 'Comment'description : 'A comment view is used to display lists of user feedback to site content'type : 'UI View'---
<%- @partial('header') %><div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Content</a> <a class="item">Variations</a> </div> </div>
<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 two column grid"> <div class="column"> <div class="ui piled blue segment"> <h2 class="ui header"> <i class="icon inverted circular blue comment"></i> Comments </h2> <div class="ui 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">2 days 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> <a class="delete">Delete</a> </div> </div> </div> <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">2 days 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> <a class="delete">Delete</a> </div> </div> </div> <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">2 days 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> <a class="delete">Delete</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui fluid blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> </div> </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"> <div class="comment"> <a class="avatar"> <img src="/images/demo/avatar.jpg"> </a> <div class="content"> <a class="author">Dog Doggington</a> <div class="text"> I think this is a great idea and i am voting on it </div> </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"> <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"> <div class="date">2 days ago</div> <div class="stars"> <i class="icon star"></i> <i class="icon star"></i> <i class="icon star"></i> <i class="icon empty star"></i> <i class="icon empty star"></i> </div> </div> <div class="text"> I think this is a great idea and i am voting on it </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"> <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"> <div class="date">2 days ago</div> <div class="stars"> <i class="icon star"></i> <i class="icon star"></i> <i class="icon star"></i> <i class="icon empty star"></i> <i class="icon empty star"></i> </div> </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> <a class="delete">Delete</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 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"> <div class="date">2 days ago</div> </div> <div class="text"> I think this is a great idea and i am voting on it </div> <div class="actions"> <a class="reply active">Reply</a> <a class="delete">Delete</a> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui button teal submit labeled icon"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> </div> </div> <div class="another example"> <p>A comment reply form can also exist below a comment feed to reply specifically to the original content. <div class="ui 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"> <div class="date">2 days ago</div> </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> <a class="delete">Delete</a> </div> </div> </div> <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"> <div class="date">1 day ago</div> </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> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui button teal submit labeled icon"> <i class="icon edit"></i> Add Comment </div> </form> </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"> <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">2 days 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> <a class="delete">Delete</a> </div> </div> <div class="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> <a class="delete">Delete</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> <a class="delete">Delete</a> </div> </div> </div> <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"> Also pizza. </div> <div class="actions"> <a class="reply">Reply</a> <a class="delete">Delete</a> </div> </div> </div> </div> </div> <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">2 days 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> <a class="delete">Delete</a> </div> </div> </div> </div> </div> <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 hours 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 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">15 hours 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 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"> <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">2 days 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> <a class="delete">Delete</a> </div> </div> <div class="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> <a class="delete">Delete</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> <a class="delete">Delete</a> </div> </div> </div> <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"> Also pizza. </div> <div class="actions"> <a class="reply">Reply</a> <a class="delete">Delete</a> </div> </div> </div> </div> </div> <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">2 days 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> <a class="delete">Delete</a> </div> </div> </div> </div> </div> <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 hours 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 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">15 hours 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>
|
