BUSINESS Documentation

component.employees

employees

Live Example

Manage Employees

1490 Employees Found
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz
  • Image
    Adrian Demian contact@mosaicpro.biz

Adrian Demian

Senior Designer

4 projects

30%
Profile
  • contac@mosaicpro.biz
  • 00353 9191238101
  • mosaicpro
About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Reports
June May April
Skills
100%
HTML
90%
CSS
93%
jQuery
79%
PHP
20%
WP
MosaicPro Team (2 people)
  • 1Adrian DemianSenior Designer
  • 2Laza BogdanSenior Developer
<!-- Widget -->
<div class="widget widget-heading-simple widget-body-white widget-employees">
		
	<!-- Widget Heading -->
	<div class="widget-head">
		<h4 class="heading glyphicons user"><i></i>Manage Employees</h4>
	</div>
	<!-- // Widget Heading END -->
	
	<div class="widget-body padding-none">
		
		<div class="row row-merge">
			<div class="col-md-4 listWrapper">
				<div class="innerAll">
					<form autocomplete="off" class="form-inline">
						<div class="widget-search separator bottom">
							<button type="button" class="btn btn-inverse pull-right"><i class="icon-search"></i></button>
							<div class="overflow-hidden">
								<input class="form-control" type="text" value="" placeholder="Find someone ..">
							</div>
						</div>
						<select style="width: 100%;">
			               <optgroup label="Department">
			                   <option value="design">Design</option>
			                   <option value="development">Development</option>
			               </optgroup>
						</select>
					</form>
				</div>
				<span class="results">1490 Employees Found <i class="icon-circle-arrow-down"></i></span>
				<ul class="list unstyled">
										<li class="active">
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">Adrian Demian</span>
								<span class="muted">contact@mosaicpro.biz</span>
								<i class="icon-envelope"></i>
								<i class="icon-phone"></i> 
								<i class="icon-skype"></i> 
							</div>
						</div>
					</li>
									</ul>
			</div>
			<div class="col-md-8 detailsWrapper">
				<div class="ajax-loading hide">
					<i class="icon-spinner icon-spin icon-4x"></i>
				</div>
				<div class="innerAll">
					<div class="title">
						<div class="row">
							<div class="col-md-8">
								<h3 class="text-primary">Adrian Demian</h3>
								<span class="muted">Senior Designer</span>
							</div>
							<div class="col-md-4 text-right">
								<p class="muted">4 projects <a href=""><i class="icon-circle-arrow-right"></i></a></p>
								<div class="margin-bottom-none progress progress-small count-outside"><div class="count">30%</div><div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div></div>
							</div>
						</div>
					</div>
					<hr/>
					<div class="body">
						<div class="row">
							<div class="col-md-4 overflow-hidden">
								<!-- Profile Photo -->
								<div class="center"><a href="" class="thumb inline-block"><img src="../assets/images/avatar-2-large.jpg" alt="Profile" class="img-responsive" /></a></div>
								<div class="separator bottom"></div>
								<!-- // Profile Photo END -->
								<ul class="icons-ul">
									<li><i class="icon-envelope icon-li icon-fixed-width"></i> contac@mosaicpro.biz</li>
									<li><i class="icon-phone icon-li icon-fixed-width"></i> 00353 9191238101</li>
									<li><i class="icon-skype icon-li icon-fixed-width"></i> mosaicpro</li>
								</ul>
							</div>
							<div class="col-md-8">
								<h5 class="strong">About</h5>
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
								<div class="row">
									<div class="col-md-4">
										<h5 class="strong">Reports</h5>
										<a href="" class="btn btn-primary btn-sm btn-block"><i class="icon-download-alt icon-fixed-width"></i> June</a>
										<a href="" class="btn btn-default btn-sm btn-block"><i class="icon-download-alt icon-fixed-width"></i> May</a>
										<a href="" class="btn btn-default btn-sm btn-block"><i class="icon-download-alt icon-fixed-width"></i> April</a>
										<div class="separator bottom"></div>
									</div>
									<div class="col-md-8">
										<h5 class="strong">Skills</h5>
										<div class="progress progress-mini progress-primary count-outside add-outside"><div class="count">100%</div><div class="progress-bar" style="width: 100%;"></div><div class="add">HTML</div></div>
										<div class="progress progress-mini progress-primary count-outside add-outside"><div class="count">90%</div><div class="progress-bar" style="width: 90%;"></div><div class="add">CSS</div></div>
										<div class="progress progress-mini progress-primary count-outside add-outside"><div class="count">93%</div><div class="progress-bar" style="width: 93%;"></div><div class="add">jQuery</div></div>
										<div class="progress progress-mini progress-primary count-outside add-outside"><div class="count">79%</div><div class="progress-bar" style="width: 79%;"></div><div class="add">PHP</div></div>
										<div class="progress progress-mini count-outside add-outside"><div class="count">20%</div><div class="progress-bar" style="width: 20%;"></div><div class="add">WP</div></div>
										<div class="separator bottom"></div>
									</div>
								</div>
								<h5 class="text-uppercase strong text-primary"><i class="icon-group text-regular icon-fixed-width"></i> MosaicPro <span class="text-lowercase strong padding-none">Team</span> <span class="text-lowercase padding-none">(2 people)</span></h5>
								<ul class="team">
									<li><span class="crt">1</span><span class="strong">Adrian Demian</span><span class="muted">Senior Designer</span></li>
									<li><span class="crt">2</span><span class="strong">Laza Bogdan</span><span class="muted">Senior Developer</span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</div>
<!-- // Widget END -->

Code

@import "assets/components/modules/admin/employees/assets/less/employees.less";
@import "http://localhost/shared/components/common/ui/progress-bars/assets/less/progress-bars.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "http://localhost/shared/components/common/forms/elements/select2/assets/lib/css/select2.css";
@import "http://localhost/shared/components/common/forms/elements/select2/assets/custom/less/select2.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. 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.

  5. 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.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/employees/assets/js/employees.init.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/forms/elements/select2/assets/lib/js/select2.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/forms/elements/select2/assets/custom/js/select2.init.js?v=v1.0.2&sv=v0.0.1"></script>