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.
265 lines
7.3 KiB
265 lines
7.3 KiB
---
|
|
layout : 'default'
|
|
css : 'feed'
|
|
|
|
title : 'Feed'
|
|
description : 'A feed presents user activity chronologically'
|
|
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>Feed</h4>
|
|
<p>A standard feed with some optional elements</p>
|
|
<div class="ui piled feed segment">
|
|
<h2 class="ui header">
|
|
Recent Activity
|
|
</h2>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
Just moments ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added you as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="circular pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
You submitted a new post to the page
|
|
</div>
|
|
<div class="extra text">
|
|
I am a dog and I do not know how to make a post
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="circular photo icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added <a>2 new photos</a> of you
|
|
</div>
|
|
<div class="extra images">
|
|
<img src="/images/demo/item1.jpg">
|
|
<img src="/images/demo/item2.jpg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<div class="example">
|
|
<h4>Label</h4>
|
|
<p>An event can contain a label</p>
|
|
<div class="ignored ui info message">In semantic's implementation a label is formatted to contain an icon or an image</div>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added you as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="circular pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
You submitted a new post to the page
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Date</h4>
|
|
<p>An event can contain a date</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added you as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Additional information</h4>
|
|
<p>An event can contain additional content explaining the event</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added 2 photos of you
|
|
</div>
|
|
<div class="extra images">
|
|
<img src="/images/demo/item1.jpg">
|
|
<img src="/images/demo/item2.jpg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> created a post
|
|
</div>
|
|
<div class="extra text">
|
|
I am a dog and I do not know how to make a post
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Sizes</h4>
|
|
<p>A feed can have different sizes</p>
|
|
|
|
<div class="ui grid">
|
|
<div class="ten wide column">
|
|
<div class="ui small piled feed segment">
|
|
<h4 class="ui header">My Activity</h4>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
Just moments ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added you as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="circular pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
You submitted a new post to the page
|
|
</div>
|
|
<div class="extra text">
|
|
I am a dog and I do not know how to make a post
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="circular photo icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added <a>2 new photos</a> of you
|
|
</div>
|
|
<div class="extra images">
|
|
<img src="/images/demo/item1.jpg">
|
|
<img src="/images/demo/item2.jpg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="six wide column">
|
|
<div class="ui small feed segment">
|
|
<h4 class="ui header">Followers Activity</h4>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added <a>hotpup202</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Sally Poodle</a> added <a>sixpack dog</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|