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.

373 lines
10 KiB

  1. ---
  2. layout : 'default'
  3. css : 'feed'
  4. title : 'Feed'
  5. description : 'A feed presents user activity chronologically'
  6. type : 'UI View'
  7. element : 'feed'
  8. elementType : 'view'
  9. themes : ['Default', 'Timeline']
  10. ---
  11. <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/feed.less" />
  12. <%- @partial('header') %>
  13. <div class="main container">
  14. <h2 class="ui dividing header">Types</h2>
  15. <div class="example">
  16. <h4 class="ui header">Feed</h4>
  17. <p>A feed</p>
  18. <div class="ui feed segment">
  19. <div class="event">
  20. <div class="label">
  21. <img src="/images/avatar/small/elliot.jpg">
  22. </div>
  23. <div class="content">
  24. <div class="summary">
  25. <a class="user">
  26. Elliot Fu
  27. </a> added you as a friend
  28. <div class="date">
  29. 1 Hour Ago
  30. </div>
  31. </div>
  32. <div class="meta">
  33. <a class="like">
  34. <i class="like icon"></i> 4 Likes
  35. </a>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="event">
  40. <div class="label">
  41. <i class="pencil icon"></i>
  42. </div>
  43. <div class="content">
  44. <div class="summary">
  45. You submitted a new post to the page
  46. <div class="date">
  47. 3 days ago
  48. </div>
  49. </div>
  50. <div class="extra text">
  51. I'm having a BBQ this weekend. Come by around 4pm if you can.
  52. </div>
  53. <div class="meta">
  54. <a class="like">
  55. <i class="like icon"></i> 11 Likes
  56. </a>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="event">
  61. <div class="label">
  62. <img src="/images/avatar/small/helen.jpg">
  63. </div>
  64. <div class="content">
  65. <div class="date">
  66. 4 days ago
  67. </div>
  68. <div class="summary">
  69. <a>Helen Troy</a> added <a>2 new illustrations</a>
  70. </div>
  71. <div class="extra images">
  72. <a><img src="/images/animals/bear-love.jpg"></a>
  73. <a><img src="/images/animals/rooster-star.jpg"></a>
  74. </div>
  75. <div class="meta">
  76. <a class="like">
  77. <i class="like icon"></i> 1 Like
  78. </a>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="event">
  83. <div class="label">
  84. <img src="/images/avatar/small/jenny.jpg">
  85. </div>
  86. <div class="content">
  87. <div class="summary">
  88. <a class="user">
  89. Jenny Hess
  90. </a> added you as a friend
  91. <div class="date">
  92. 2 Days Ago
  93. </div>
  94. </div>
  95. <div class="meta">
  96. <a class="like">
  97. <i class="like icon"></i> 8 Likes
  98. </a>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="event">
  103. <div class="label">
  104. <img src="/images/avatar/small/joe.jpg">
  105. </div>
  106. <div class="content">
  107. <div class="summary">
  108. <a>Joe Henderson</a> posted on his page
  109. <div class="date">
  110. 3 days ago
  111. </div>
  112. </div>
  113. <div class="extra text">
  114. Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.
  115. </div>
  116. <div class="meta">
  117. <a class="like">
  118. <i class="like icon"></i> 5 Likes
  119. </a>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="event">
  124. <div class="label">
  125. <img src="/images/avatar/small/justen.jpg">
  126. </div>
  127. <div class="content">
  128. <div class="date">
  129. 4 days ago
  130. </div>
  131. <div class="summary">
  132. <a>Justen Kitsune</a> added <a>2 new photos</a> of you
  133. </div>
  134. <div class="extra images">
  135. <a><img src="/images/animals/bear-love.jpg"></a>
  136. <a><img src="/images/animals/rooster-star.jpg"></a>
  137. </div>
  138. <div class="meta">
  139. <a class="like">
  140. <i class="like icon"></i> 41 Likes
  141. </a>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <h2 class="ui dividing header">Content</h2>
  148. <div class="example">
  149. <h4 class="ui header">Label</h4>
  150. <p>An event can contain an image or icon label</p>
  151. <div class="ui feed segment">
  152. <div class="event">
  153. <div class="label">
  154. <img src="/images/avatar/small/elliot.jpg">
  155. </div>
  156. <div class="content">
  157. You added Elliot Fu to the group <a>Coworkers</a>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="another example">
  163. <div class="ui feed segment">
  164. <div class="event">
  165. <div class="label">
  166. <i class="pencil icon"></i>
  167. </div>
  168. <div class="content">
  169. <div class="summary">
  170. You posted on your friend <a>Stevie Feliciano's</a> wall.
  171. <div class="date">Today</div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. <div class="example">
  178. <h4 class="ui header">Date</h4>
  179. <p>An event or an event summary can contain a date</p>
  180. <div class="ui feed segment">
  181. <div class="event">
  182. <div class="label">
  183. <img src="/images/avatar/small/jenny.jpg">
  184. </div>
  185. <div class="content">
  186. <div class="date">
  187. 3 days ago
  188. </div>
  189. <div class="summary">
  190. You added <a>Jenny Hess</a> to your <a>coworker</a> group.
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="another example">
  197. <div class="ui feed segment">
  198. <div class="event">
  199. <div class="label">
  200. <img src="/images/avatar/small/jenny.jpg">
  201. </div>
  202. <div class="content">
  203. <div class="summary">
  204. You added <a>Jenny Hess</a> to your <a>coworker</a> group.
  205. <div class="date">
  206. 3 days ago
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="example">
  214. <h4 class="ui header">Additional information</h4>
  215. <p>An event can contain additional information like a set of images or text</p>
  216. <div class="ui feed segment">
  217. <div class="event">
  218. <div class="label">
  219. <img src="/images/avatar/small/helen.jpg">
  220. </div>
  221. <div class="content">
  222. <div class="date">
  223. 3 days ago
  224. </div>
  225. <div class="summary">
  226. <a>Helen Troy</a> added 2 photos
  227. </div>
  228. <div class="extra images">
  229. <a><img src="/images/animals/bear-love.jpg"></a>
  230. <a><img src="/images/animals/rooster-star.jpg"></a>
  231. </div>
  232. </div>
  233. </div>
  234. <div class="event">
  235. <div class="label">
  236. <img src="/images/avatar/small/jill.jpg">
  237. </div>
  238. <div class="content">
  239. <div class="date">
  240. 3 days ago
  241. </div>
  242. <div class="summary">
  243. <a>Jill Kronkite</a> created a post
  244. </div>
  245. <div class="extra text">
  246. Have you seen what's going on in Israel? Can you believe it.
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <h2 class="ui dividing header">Variations</h2>
  253. <div class="example">
  254. <h4 class="ui header">Sizes</h4>
  255. <p>A feed can have different sizes</p>
  256. <div class="ui small feed segment">
  257. <h4 class="ui header">Followers Activity</h4>
  258. <div class="event">
  259. <div class="content">
  260. <div class="summary">
  261. <a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
  262. </div>
  263. </div>
  264. </div>
  265. <div class="event">
  266. <div class="content">
  267. <div class="summary">
  268. <a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
  269. </div>
  270. </div>
  271. </div>
  272. <div class="event">
  273. <div class="content">
  274. <div class="summary">
  275. <a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
  276. </div>
  277. </div>
  278. </div>
  279. <div class="event">
  280. <div class="content">
  281. <div class="summary">
  282. <a>Christian Rocha</a> signed up for the site.
  283. </div>
  284. </div>
  285. </div>
  286. </div
  287. >
  288. </div>
  289. <div class="another example">
  290. <div class="ui large feed segment">
  291. <div class="event">
  292. <div class="label">
  293. <img src="/images/avatar/small/elliot.jpg">
  294. </div>
  295. <div class="content">
  296. <div class="summary">
  297. <a class="user">
  298. Elliot Fu
  299. </a> added you as a friend
  300. <div class="date">
  301. 1 Hour Ago
  302. </div>
  303. </div>
  304. <div class="meta">
  305. <a class="like">
  306. <i class="like icon"></i> 4 Likes
  307. </a>
  308. </div>
  309. </div>
  310. </div>
  311. <div class="event">
  312. <div class="label">
  313. <i class="pencil icon"></i>
  314. </div>
  315. <div class="content">
  316. <div class="summary">
  317. You submitted a new post to the page
  318. <div class="date">
  319. 3 days ago
  320. </div>
  321. </div>
  322. <div class="extra text">
  323. I'm having a BBQ this weekend. Come by around 4pm if you can.
  324. </div>
  325. <div class="meta">
  326. <a class="like">
  327. <i class="like icon"></i> 11 Likes
  328. </a>
  329. </div>
  330. </div>
  331. </div>
  332. <div class="event">
  333. <div class="label">
  334. <img src="/images/avatar/small/helen.jpg">
  335. </div>
  336. <div class="content">
  337. <div class="date">
  338. 4 days ago
  339. </div>
  340. <div class="summary">
  341. <a>Helen Troy</a> added <a>2 new illustrations</a>
  342. </div>
  343. <div class="extra images">
  344. <a><img src="/images/animals/bear-love.jpg"></a>
  345. <a><img src="/images/animals/rooster-star.jpg"></a>
  346. </div>
  347. <div class="meta">
  348. <a class="like">
  349. <i class="like icon"></i> 1 Like
  350. </a>
  351. </div>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. </div>