component.widget-activity

widget-activity

21/03 Martin Glades registered at Melisa Ragae's suggestion.
21/03 Darius Jackson registered at John Doe's suggestion.
21/03 Melisa Ragae registered at John Doe's suggestion.
21/03 John Doe registered at Martin Glades's suggestion.
21/03 John Doe registered at Martin Glades's suggestion.

21/03 Darius Jackson bought 10 items worth of €50 (order #2301)
21/03 John Doe bought 10 items worth of €50 (order #2302)
21/03 Jane Doe bought 10 items worth of €50 (order #2303)
21/03 John Doe bought 10 items worth of €50 (order #2304)
21/03 Jane Doe bought 10 items worth of €50 (order #2305)

You have received an email from Darius Jackson (darius.jackson@fake-email.net) on 29 March, 2013 1 hour ago
You have received an email from Darius Jackson (darius.jackson@fake-email.net) on 29 March, 2013 1 hour ago
You have received an email from Jane Doe (jane.doe@lovely-email.net) on 29 March, 2013 1 hour ago
You have received an email from Martin Glades (martin.glades@wee-email.com) on 29 March, 2013 1 hour ago
You have received an email from John Doe (john.doe@fake-email.net) on 29 March, 2013 1 hour ago

21/03 Darius Jackson bought 10 items worth of €50 (order #2301)
21/03 John Doe bought 10 items worth of €50 (order #2302)
21/03 Melisa Ragae bought 10 items worth of €50 (order #2303)
21/03 Melisa Ragae bought 10 items worth of €50 (order #2304)
21/03 Melisa Ragae bought 10 items worth of €50 (order #2305)

21/03 John Doe bought 10 items worth of €50 (order #2301)
21/03 Darius Jackson bought 10 items worth of €50 (order #2302)
21/03 Darius Jackson bought 10 items worth of €50 (order #2303)
21/03 Martin Glades bought 10 items worth of €50 (order #2304)

<!-- Widget -->
<div class="widget widget-heading-simple widget-body-simple">
		
	<!-- Widget Heading -->
	<div class="widget-head">
		<h4 class="heading glyphicons cardio"><i></i>Recent Activity</h4>
	</div>
	<!-- // Widget Heading END -->
	
	<div class="widget-body">

		<div class="widget widget-tabs widget-tabs-icons-only-2 widget-activity margin-none">

			<!-- Tabs Heading -->
			<div class="widget-head">
				<ul>
					<li><a class="glyphicons user_add" data-toggle="tab" href="#filterUsersTab"><i></i>Users</a></li>
					<li><a class="glyphicons shopping_cart" data-toggle="tab" href="#filterOrdersTab"><i></i>Orders</a></li>
					<li class="active"><a class="glyphicons envelope" data-toggle="tab" href="#filterMessagesTab"><i></i></a></li>
					<li><a class="glyphicons link" data-toggle="tab" href="#filterLinksTab"><i></i></a></li>
					<li><a class="glyphicons camera" data-toggle="tab" href="#filterPhotosTab"><i></i></a></li>
				</ul>
			</div>
			<!-- // Tabs Heading END -->
			
			<div class="widget-body">
				<div class="tab-content">
						
										
					<!-- Filter Users Tab -->
					<div class="tab-pane" id="filterUsersTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> registered at <a href="">Melisa Ragae's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> registered at <a href="">John Doe's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">John Doe's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Martin Glades's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Martin Glades's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Users Tab END -->
					
					<!-- Filter Orders Tab -->
					<div class="tab-pane" id="filterOrdersTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2305</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Orders Tab END -->
					
					<!-- Filter Messages Tab -->
					<div class="tab-pane active" id="filterMessagesTab">
						<ul class="list">
						
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Darius Jackson</a> (darius.jackson@fake-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double highlight">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Darius Jackson</a> (darius.jackson@fake-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Jane Doe</a> (jane.doe@lovely-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Martin Glades</a> (martin.glades@wee-email.com)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">John Doe</a> (john.doe@fake-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Messages Tab END -->
					
					<!-- Filter Links Tab -->
					<div class="tab-pane" id="filterLinksTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2305</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Links Tab END -->
					
					<!-- Filter Photos Tab -->
					<div class="tab-pane" id="filterPhotosTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Photos Tab END -->
				
				</div>
			</div>
		</div>
		
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

widget-activity-social

<div class="widget widget-tabs widget-tabs-icons-only-2 widget-activity margin-none widget-activity-social">

	<!-- Tabs Heading -->
	<div class="widget-head">
		<ul>
			<li class="active"><a data-toggle="tab" href="#shareTab" class="glyphicons user"><i></i></a></li>
			<li><a data-toggle="tab" href="#webcamTab" class="glyphicons webcam"><i></i></a></li>
			<li><a data-toggle="tab" href="#pictureTab" class="glyphicons picture"><i></i></a></li>
			<li><a data-toggle="tab" href="#linkTab" class="glyphicons link"><i></i></a></li>
		</ul>
	</div>
	<!-- // Tabs Heading END -->
	
	<div class="widget-body padding-none">
		<div class="tab-content">
		
			<div class="tab-pane active" id="shareTab">
				<div class="share">
					<textarea class="form-control" rows="2" placeholder="Share what you've been up to..."></textarea>
					
					<a class="btn btn-default  btn-sm">Submit <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="tab-pane innerAll text-center" id="webcamTab">
				<h4>Share Webcam</h4>
				<p>BUSINESS would like to start your webcam.</p>
				<button class="btn btn-primary"><i class="fa fa-video-camera"></i> Allow</button>
				<button class="btn btn-danger"><i class="fa fa-ban"></i></button>
			</div>
			<div class="tab-pane innerAll" id="pictureTab">Picture</div>
			<div class="tab-pane" id="linkTab">
				<div class="share">
					<textarea class="form-control" rows="2" placeholder="Share a link ..."></textarea>
					
					<a class="btn btn-default">Share <i class="text-primary fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>

		</div>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/widgets/widget-activity/assets/less/widget-activity-social.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.