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.
539 lines
17 KiB
539 lines
17 KiB
---
|
|
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>
|