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.
382 lines
10 KiB
382 lines
10 KiB
---
|
|
layout : 'default'
|
|
css : 'feed'
|
|
|
|
title : 'Feed'
|
|
description : 'A feed presents user activity chronologically'
|
|
type : 'UI View'
|
|
|
|
element : 'feed'
|
|
elementType : 'view'
|
|
|
|
themes : ['Default', 'Timeline']
|
|
---
|
|
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/feed.less" />
|
|
|
|
<%- @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">Feed</h4>
|
|
<p>A feed</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a class="user">
|
|
Elliot Fu
|
|
</a> added you as a friend
|
|
<div class="date">
|
|
1 Hour Ago
|
|
</div>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 4 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
You submitted a new post to the page
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
</div>
|
|
<div class="extra text">
|
|
I'm having a BBQ this weekend. Come by around 4pm if you can.
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 11 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/helen.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
4 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Helen Troy</a> added <a>2 new illustrations</a>
|
|
</div>
|
|
<div class="extra images">
|
|
<a><img src="/images/animals/bear-love.jpg"></a>
|
|
<a><img src="/images/animals/rooster-star.jpg"></a>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 1 Like
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a class="user">
|
|
Jenny Hess
|
|
</a> added you as a friend
|
|
<div class="date">
|
|
2 Days Ago
|
|
</div>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 8 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/joe.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Joe Henderson</a> posted on his page
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
</div>
|
|
<div class="extra text">
|
|
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.
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 5 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/justen.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
4 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Justen Kitsune</a> added <a>2 new photos</a> of you
|
|
</div>
|
|
<div class="extra images">
|
|
<a><img src="/images/animals/bear-love.jpg"></a>
|
|
<a><img src="/images/animals/rooster-star.jpg"></a>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 41 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Label</h4>
|
|
<p>An event can contain an image or icon label</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</div>
|
|
<div class="content">
|
|
You added Elliot Fu to the group <a>Coworkers</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
You posted on your friend <a>Stevie Feliciano's</a> wall.
|
|
<div class="date">Today</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Date</h4>
|
|
<p>An event or an event summary can contain a date</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/jenny.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Additional information</h4>
|
|
<p>An event can contain additional information like a set of images or text</p>
|
|
<div class="ui feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/helen.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Helen Troy</a> added 2 photos
|
|
</div>
|
|
<div class="extra images">
|
|
<a><img src="/images/animals/bear-love.jpg"></a>
|
|
<a><img src="/images/animals/rooster-star.jpg"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/jill.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Jill Kronkite</a> created a post
|
|
</div>
|
|
<div class="extra text">
|
|
Have you seen what's going on in Israel? Can you believe it.
|
|
</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 small feed segment">
|
|
<h4 class="ui header">Followers Activity</h4>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a>Christian Rocha</a> signed up for the site.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div
|
|
>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui large feed segment">
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/elliot.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
<a class="user">
|
|
Elliot Fu
|
|
</a> added you as a friend
|
|
<div class="date">
|
|
1 Hour Ago
|
|
</div>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 4 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<i class="pencil icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="summary">
|
|
You submitted a new post to the page
|
|
<div class="date">
|
|
3 days ago
|
|
</div>
|
|
</div>
|
|
<div class="extra text">
|
|
I'm having a BBQ this weekend. Come by around 4pm if you can.
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 11 Likes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<div class="label">
|
|
<img src="/images/avatar/small/helen.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="date">
|
|
4 days ago
|
|
</div>
|
|
<div class="summary">
|
|
<a>Helen Troy</a> added <a>2 new illustrations</a>
|
|
</div>
|
|
<div class="extra images">
|
|
<a><img src="/images/animals/bear-love.jpg"></a>
|
|
<a><img src="/images/animals/rooster-star.jpg"></a>
|
|
</div>
|
|
<div class="meta">
|
|
<a class="like">
|
|
<i class="like icon"></i> 1 Like
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|