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.

505 lines
16 KiB

  1. ---
  2. layout : 'default'
  3. css : 'comment'
  4. title : 'Comment'
  5. description : 'A comment is used to display user feedback to site content'
  6. type : 'UI View'
  7. element : 'comment'
  8. elementType : 'view'
  9. themes : ['Default', 'Chubby']
  10. ---
  11. <%- @partial('header') %>
  12. <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/comment.less" />
  13. <div class="main container">
  14. <h2 class="ui dividing header">Types</h2>
  15. <div class="example">
  16. <h4 class="ui header">Comments</h4>
  17. <p>A basic list of comments</p>
  18. <div class="ui ignored info attached message">
  19. <p>These examples uses <a href="/elements/segment.html">ui segment</a> to create content segments. This is not required.</p>
  20. </div>
  21. <div class="ui ignored bottom attached warning message">
  22. <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>
  23. </div>
  24. <div class="ui comments segment">
  25. <h3 class="ui dividing header">Comments</h3>
  26. <div class="comment">
  27. <a class="avatar">
  28. <img src="/images/avatar/small/matt.jpg">
  29. </a>
  30. <div class="content">
  31. <a class="author">Matt</a>
  32. <div class="metadata">
  33. <span class="date">Today at 5:42PM</span>
  34. </div>
  35. <div class="text">
  36. How artistic!
  37. </div>
  38. <div class="actions">
  39. <a class="reply">Reply</a>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="comment">
  44. <a class="avatar">
  45. <img src="/images/avatar/small/elliot.jpg">
  46. </a>
  47. <div class="content">
  48. <a class="author">Elliot Fu</a>
  49. <div class="metadata">
  50. <span class="date">Yesterday at 12:30AM</span>
  51. </div>
  52. <div class="text">
  53. <p>This has been very useful for my research. Thanks as well!</p>
  54. </div>
  55. <div class="actions">
  56. <a class="reply">Reply</a>
  57. </div>
  58. </div>
  59. <div class="comments">
  60. <div class="comment">
  61. <a class="avatar">
  62. <img src="/images/avatar/small/jenny.jpg">
  63. </a>
  64. <div class="content">
  65. <a class="author">Jenny Hess</a>
  66. <div class="metadata">
  67. <span class="date">Just now</span>
  68. </div>
  69. <div class="text">
  70. Elliot you are always so right :)
  71. </div>
  72. <div class="actions">
  73. <a class="reply">Reply</a>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="comment">
  80. <a class="avatar">
  81. <img src="/images/avatar/small/joe.jpg">
  82. </a>
  83. <div class="content">
  84. <a class="author">Joe Henderson</a>
  85. <div class="metadata">
  86. <span class="date">5 days ago</span>
  87. </div>
  88. <div class="text">
  89. Dude, this is awesome. Thanks so much
  90. </div>
  91. <div class="actions">
  92. <a class="reply">Reply</a>
  93. </div>
  94. </div>
  95. </div>
  96. <form class="ui reply form">
  97. <div class="field">
  98. <textarea></textarea>
  99. </div>
  100. <div class="ui blue labeled submit icon button">
  101. <i class="icon edit"></i> Add Reply
  102. </div>
  103. </form>
  104. </div>
  105. </div>
  106. <h2 class="ui dividing header">Content</h2>
  107. <h3 class="ui header">Comment</h3>
  108. <div class="example">
  109. <h4 class="ui header">Avatar</h4>
  110. <p>A comment can contain an image or avatar</p>
  111. <div class="ui comments segment">
  112. <div class="comment">
  113. <a class="avatar">
  114. <img src="/images/avatar/small/elliot.jpg">
  115. </a>
  116. <div class="content">
  117. <a class="author">Elliot Fu</a>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="example">
  123. <h4 class="ui header">Metadata</h4>
  124. <p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p>
  125. <div class="ui comments segment">
  126. <div class="comment">
  127. <a class="avatar">
  128. <img src="/images/avatar/small/stevie.jpg">
  129. </a>
  130. <div class="content">
  131. <a class="author">Stevie Feliciano</a>
  132. <div class="metadata">
  133. <div class="date">2 days ago</div>
  134. <div class="rating">
  135. <i class="star icon"></i>
  136. 5 Faves
  137. </div>
  138. </div>
  139. <div class="text">
  140. Hey guys, I hope this example comment is helping you read this documentation.
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="example">
  147. <h4 class="ui header">Actions</h4>
  148. <p>A comment can contain an list of actions a user may perform related to this comment.</p>
  149. <div class="ui comments segment">
  150. <div class="comment">
  151. <a class="avatar">
  152. <img src="/images/avatar/small/joe.jpg">
  153. </a>
  154. <div class="content">
  155. <a class="author">Tom Lukic</a>
  156. <div class="text">
  157. This will be great for business reports. I will definitely download this.
  158. </div>
  159. <div class="actions">
  160. <a class="reply">Reply</a>
  161. <a class="save">Save</a>
  162. <a class="hide">Hide</a>
  163. <a>
  164. <i class="expand icon"></i>
  165. Full-screen
  166. </a>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="example">
  173. <h4 class="ui header">Reply Form</h4>
  174. <p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p>
  175. <div class="ui info message">
  176. <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>
  177. </div>
  178. <div class="ui comments segment">
  179. <div class="comment">
  180. <a class="avatar">
  181. <img src="/images/avatar/small/steve.jpg">
  182. </a>
  183. <div class="content">
  184. <a class="author">Steve Jobes</a>
  185. <div class="metadata">
  186. <div class="date">2 days ago</div>
  187. </div>
  188. <div class="text">
  189. Revolutionary!
  190. </div>
  191. <div class="actions">
  192. <a class="reply active">Reply</a>
  193. </div>
  194. <form class="ui reply form">
  195. <div class="field">
  196. <textarea></textarea>
  197. </div>
  198. <div class="ui primary submit labeled icon button">
  199. <i class="icon edit"></i> Add Reply
  200. </div>
  201. </form>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="another example">
  207. <div class="ui comments segment">
  208. <div class="comment">
  209. <a class="avatar">
  210. <img src="/images/avatar/small/joe.jpg">
  211. </a>
  212. <div class="content">
  213. <a class="author">Joe Henderson</a>
  214. <div class="metadata">
  215. <div class="date">1 day ago</div>
  216. </div>
  217. <div class="text">
  218. <p>The hours, minutes and seconds stand as visible reminders that your effort put them all there. </p>
  219. <p>Preserve until your next run, when the watch lets you see how Impermanent your efforts are.</p>
  220. </div>
  221. <div class="actions">
  222. <a class="reply">Reply</a>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="comment">
  227. <a class="avatar">
  228. <img src="/images/avatar/small/christian.jpg">
  229. </a>
  230. <div class="content">
  231. <a class="author">Christian Rocha</a>
  232. <div class="metadata">
  233. <div class="date">2 days ago</div>
  234. </div>
  235. <div class="text">
  236. I re-tweeted this.
  237. </div>
  238. <div class="actions">
  239. <a class="reply">Reply</a>
  240. </div>
  241. </div>
  242. </div>
  243. <form class="ui reply form">
  244. <div class="field">
  245. <textarea></textarea>
  246. </div>
  247. <div class="ui primary submit labeled icon button">
  248. <i class="icon edit"></i> Add Comment
  249. </div>
  250. </form>
  251. </div>
  252. </div>
  253. <h2 class="ui dividing header">States</h2>
  254. <div class="example">
  255. <h4 class="ui header">Collapsed</h4>
  256. <p>Comments can be collapsed, or hidden from view</p>
  257. <div class="ui comments segment">
  258. <div class="comment">
  259. <a class="avatar">
  260. <img src="/images/avatar/small/christian.jpg">
  261. </a>
  262. <div class="content">
  263. <a class="author">Christian Rocha</a>
  264. <div class="metadata">
  265. <span class="date">2 days ago</span>
  266. </div>
  267. <div class="text">
  268. I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?
  269. </div>
  270. <div class="actions">
  271. <a class="reply">Reply</a>
  272. </div>
  273. </div>
  274. <div class="collapsed comments">
  275. <div class="comment">
  276. <a class="avatar">
  277. <img src="/images/demo/avatar2.jpg">
  278. </a>
  279. <div class="content">
  280. <a class="author">Pawfin Dog</a>
  281. <div class="metadata">
  282. <span class="date">1 day ago</span>
  283. </div>
  284. <div class="text">
  285. I think this is a great idea and i am voting on it
  286. </div>
  287. <div class="actions">
  288. <a class="reply">Reply</a>
  289. </div>
  290. </div>
  291. <div class="comments">
  292. <div class="comment">
  293. <a class="avatar">
  294. <img src="/images/demo/avatar.jpg">
  295. </a>
  296. <div class="content">
  297. <a class="author">Dog Doggington</a>
  298. <div class="metadata">
  299. <span class="date">20 minutes ago</span>
  300. </div>
  301. <div class="text">
  302. I think this is a great idea and i am voting on it
  303. </div>
  304. <div class="actions">
  305. <a class="reply">Reply</a>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. <h2 class="ui dividing header">Variations</h2>
  316. <div class="example">
  317. <h4 class="ui header">Threaded</h4>
  318. <p>A comment list can be threaded to showing the relationship between conversations</p>
  319. <div class="ui threaded comments segment">
  320. <h3 class="ui dividing header">Comments</h3>
  321. <div class="comment">
  322. <a class="avatar">
  323. <img src="/images/avatar/small/matt.jpg">
  324. </a>
  325. <div class="content">
  326. <a class="author">Matt</a>
  327. <div class="metadata">
  328. <span class="date">Today at 5:42PM</span>
  329. </div>
  330. <div class="text">
  331. How artistic!
  332. </div>
  333. <div class="actions">
  334. <a class="reply">Reply</a>
  335. </div>
  336. </div>
  337. </div>
  338. <div class="comment">
  339. <a class="avatar">
  340. <img src="/images/avatar/small/elliot.jpg">
  341. </a>
  342. <div class="content">
  343. <a class="author">Elliot Fu</a>
  344. <div class="metadata">
  345. <span class="date">Yesterday at 12:30AM</span>
  346. </div>
  347. <div class="text">
  348. <p>This has been very useful for my research. Thanks as well!</p>
  349. </div>
  350. <div class="actions">
  351. <a class="reply">Reply</a>
  352. </div>
  353. </div>
  354. <div class="comments">
  355. <div class="comment">
  356. <a class="avatar">
  357. <img src="/images/avatar/small/jenny.jpg">
  358. </a>
  359. <div class="content">
  360. <a class="author">Jenny Hess</a>
  361. <div class="metadata">
  362. <span class="date">Just now</span>
  363. </div>
  364. <div class="text">
  365. Elliot you are always so right :)
  366. </div>
  367. <div class="actions">
  368. <a class="reply">Reply</a>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374. <div class="comment">
  375. <a class="avatar">
  376. <img src="/images/avatar/small/joe.jpg">
  377. </a>
  378. <div class="content">
  379. <a class="author">Joe Henderson</a>
  380. <div class="metadata">
  381. <span class="date">5 days ago</span>
  382. </div>
  383. <div class="text">
  384. Dude, this is awesome. Thanks so much
  385. </div>
  386. <div class="actions">
  387. <a class="reply">Reply</a>
  388. </div>
  389. </div>
  390. </div>
  391. <form class="ui reply form">
  392. <div class="field">
  393. <textarea></textarea>
  394. </div>
  395. <div class="ui blue labeled submit icon button">
  396. <i class="icon edit"></i> Add Reply
  397. </div>
  398. </form>
  399. </div>
  400. </div>
  401. <div class="example">
  402. <h4 class="ui header">Minimal</h4>
  403. <p>Comments can hide extra information unless a user shows intent to interact with a comment.</p>
  404. <div class="ui minimal comments segment">
  405. <h3 class="ui dividing header">Comments</h3>
  406. <div class="comment">
  407. <a class="avatar">
  408. <img src="/images/avatar/small/matt.jpg">
  409. </a>
  410. <div class="content">
  411. <a class="author">Matt</a>
  412. <div class="metadata">
  413. <span class="date">Today at 5:42PM</span>
  414. </div>
  415. <div class="text">
  416. How artistic!
  417. </div>
  418. <div class="actions">
  419. <a class="reply">Reply</a>
  420. </div>
  421. </div>
  422. </div>
  423. <div class="comment">
  424. <a class="avatar">
  425. <img src="/images/avatar/small/elliot.jpg">
  426. </a>
  427. <div class="content">
  428. <a class="author">Elliot Fu</a>
  429. <div class="metadata">
  430. <span class="date">Yesterday at 12:30AM</span>
  431. </div>
  432. <div class="text">
  433. <p>This has been very useful for my research. Thanks as well!</p>
  434. </div>
  435. <div class="actions">
  436. <a class="reply">Reply</a>
  437. </div>
  438. </div>
  439. <div class="comments">
  440. <div class="comment">
  441. <a class="avatar">
  442. <img src="/images/avatar/small/jenny.jpg">
  443. </a>
  444. <div class="content">
  445. <a class="author">Jenny Hess</a>
  446. <div class="metadata">
  447. <span class="date">Just now</span>
  448. </div>
  449. <div class="text">
  450. Elliot you are always so right :)
  451. </div>
  452. <div class="actions">
  453. <a class="reply">Reply</a>
  454. </div>
  455. </div>
  456. </div>
  457. </div>
  458. </div>
  459. <div class="comment">
  460. <a class="avatar">
  461. <img src="/images/avatar/small/joe.jpg">
  462. </a>
  463. <div class="content">
  464. <a class="author">Joe Henderson</a>
  465. <div class="metadata">
  466. <span class="date">5 days ago</span>
  467. </div>
  468. <div class="text">
  469. Dude, this is awesome. Thanks so much
  470. </div>
  471. <div class="actions">
  472. <a class="reply">Reply</a>
  473. </div>
  474. </div>
  475. </div>
  476. <form class="ui reply form">
  477. <div class="field">
  478. <textarea></textarea>
  479. </div>
  480. <div class="ui blue labeled submit icon button">
  481. <i class="icon edit"></i> Add Reply
  482. </div>
  483. </form>
  484. </div>
  485. </div>
  486. </div>