M-Porter/Status-Monitor.markdown

## index.html
<html ng-app="status_monitor">

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
</head>

<body>

<div ng-controller="EmpCtrl as ctrl">
  <div class="nav">
    <div class="title">Status Monitor</div>
    <div class="user">Welcome back, <a href="#">Mike Romanager</a></div>
  </div>
  <div class="filters">
    <div class="button disabled"
         ng-click="predicate = '';">ALL</div>
    <div class="button disabled"
         ng-click="predicate = 'status';">IN</div>
    <div class="button disabled"
         ng-click="predicate = '-status';">OUT</div>
    <div class="button disabled"
         ng-click="predicate = 'first';">FIRST</div>
    <div class="button disabled"
         ng-click="predicate = 'last';">LAST</div>
  </div>
  <div class="hr"></div>
  <div class="container">
    <div class="row">
      <div class="employees">
          <div class="employee"
               ng-repeat="employee in employees | orderBy:predicate"
               ng-class="{in: employee.status == 'in',
                         out: employee.status == 'out'}">
            <div class="name">
              {{ employee.first }} {{ employee.last }}
            </div>
            <div class="date">
              {{ employee.date | date: 'MMM dd yyyy  h:mm a' }}
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="footer">
    by <a href="http://codepen.io/pattmorter">Matthew Porter</a><br>
    Inspired by <a href="https://dribbble.com/roach">Dave Roach</a>'s <a href="https://dribbble.com/shots/1669764-Status-Monitor">Status Monitor</a>
  </div>

</div>

</body>
</html>

## script.js
angular.module('status_monitor', [])

  .controller('EmpCtrl', function($scope) {

    $scope.employees = employee_list;

  });

var employee_list = [
  {
    first: 'Matthew',
    last: 'Chambers',
    status: 'in',
    date: '1406809200000'
  },
  {
    first: 'Michelle',
    last: 'Sissom',
    status: 'in',
    date: '1406809440000'
  },
  {
    first: 'Nathan',
    last: 'McOwen',
    status: 'in',
    date: '1406807400000'
  },
  {
    first: 'Nicole',
    last: 'Thornton',
    status: 'in',
    date: '1406808120000'
  },
  {
    first: 'Paul',
    last: 'Russell',
    status: 'out',
    date: '1406758860000'
  },
  {
    first: 'Penny',
    last: 'Vrient',
    status: 'in',
    date: '1406806620000'
  },
  {
    first: 'Shulu',
    last: 'Zhang',
    status: 'in',
    date: '1406807280000'
  },
  {
    first: 'Sonny',
    last: 'Drennin',
    status: 'out',
    date: '1406808060000'
  },
  {
    first: 'Sou',
    last: 'Sopraseuth',
    status: 'out',
    date: '1406054160000'
  },
  {
    first: 'Steve',
    last: 'Lutes',
    status: 'in',
    date: '1406030280000'
  },
  {
    first: 'Tana',
    last: 'Fager',
    status: 'in',
    date: '1406026200000'
  },
  {
    first: 'Terry',
    last: 'Miller',
    status: 'in',
    date: '1406029860000'
  }
];

## Status-Monitor.markdown

      
    Raw
  

              Status-Monitor.markdown
            
          
    Status Monitor

Status Monitor, as inspired by Dave Roach's dribbble, Status Monitor, with my own twist and visions.
https://dribbble.com/shots/1669764-Status-Monitor
A Pen by Matt Porter on CodePen.
License.

  
## style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);

$darkblack: #0C1422;
$darkblue: #212E47;
$bluegrey: #A5A9B1;
$lightgrey: #ECEDEE;
$disabled: #39455E;
$enabled: #536383;
$in: #76DE90;
$out: #E31B29;

body, html {
  background: $lightgrey;
  font-family: 'Open Sans';
}

.container {
  margin: 0 10%;
}

.row {
  margin: 16px -15px;
}

.nav {
  background: $darkblack;
  width: 100%;
  padding: 0 10%;
  height: 62px;
  border-bottom: 2px solid $darkblue;
}

.title {
  display: inline;
  color: $lightgrey;
  vertical-align: center;
  line-height: 62px;
  font-size: 1.3em;
}

.user {
  @extend .title;
  float: right;
  font-size: 0.85em;
}

.user a {
  color: $lightgrey;
}

.user a:hover {
  color: $enabled;
}

.filters {
  background: #f1f1f1;
  line-height: 62px;
  height: 62px;
  padding: 0 10%;
  display: block;
}

.filters .sp {
  width: 16px;
}

.button {
  cursor: pointer;
  border: 1px solid $disabled;
  border-radius: 4px;
  padding: 1px 24px;
  font-size: 0.85em;
  color: $disabled;
  display: inline;
  margin: 0 2px;
}

.disabled:hover {
  background: $disabled;
  border: 1px solid $darkblack;
  color: $lightgrey;
}

.disabled {
  color: $disabled;
  border: 1px solid $disabled;
}

.enabled {
  color: $lightgrey;
  border: 1px solid $darkblack;
  background: $darkblue;
  transition: background 250ms, border 250ms, color 250ms;
}

.hr {
  margin: 0 auto;
  height: 1px;
  width: 100%;
  background: #ccc;
  display: block;
}

.employees {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style-position: inside;
  list-style-type: disc;
}

.employee {
  padding: 2px 16px;
  display: inline-block;
  margin: 12px 0;
  width: 100%;
  cursor: pointer;
}

.employee:hover {
  background: #ddd;
}

.employee .name {
  font-size: 1.25em;
  font-weight: 700;
}

.employee .date {
  color: #777;
  font-size: 0.75em;
  font-weight: 400;
}

.in {
  border-left: 3px solid $in;
}

.out {
  border-left: 3px solid $out;
}

.footer {
  margin: 24px 0 6px 0;
  font-size: 0.7em;
  height: 62px;
  position: relative;
  display: block;
  text-align: center;
}

a {
  color: $disabled;
  text-decoration: underline;
}
	<html ng-app="status_monitor">

	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
	</head>

	<body>

	<div ng-controller="EmpCtrl as ctrl">
	<div class="nav">
	<div class="title">Status Monitor</div>
	<div class="user">Welcome back, <a href="#">Mike Romanager</a></div>
	</div>
	<div class="filters">
	<div class="button disabled"
	ng-click="predicate = '';">ALL</div>
	<div class="button disabled"
	ng-click="predicate = 'status';">IN</div>
	<div class="button disabled"
	ng-click="predicate = '-status';">OUT</div>
	<div class="button disabled"
	ng-click="predicate = 'first';">FIRST</div>
	<div class="button disabled"
	ng-click="predicate = 'last';">LAST</div>
	</div>
	<div class="hr"></div>
	<div class="container">
	<div class="row">
	<div class="employees">
	<div class="employee"
	ng-repeat="employee in employees \| orderBy:predicate"
	ng-class="{in: employee.status == 'in',
	out: employee.status == 'out'}">
	<div class="name">
	{{ employee.first }} {{ employee.last }}
	</div>
	<div class="date">
	{{ employee.date \| date: 'MMM dd yyyy h:mm a' }}
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="footer">
	by <a href="http://codepen.io/pattmorter">Matthew Porter</a><br>
	Inspired by <a href="https://dribbble.com/roach">Dave Roach</a>'s <a href="https://dribbble.com/shots/1669764-Status-Monitor">Status Monitor</a>
	</div>

	</div>

	</body>
	</html>
	angular.module('status_monitor', [])

	.controller('EmpCtrl', function($scope) {

	$scope.employees = employee_list;

	});

	var employee_list = [
	{
	first: 'Matthew',
	last: 'Chambers',
	status: 'in',
	date: '1406809200000'
	},
	{
	first: 'Michelle',
	last: 'Sissom',
	status: 'in',
	date: '1406809440000'
	},
	{
	first: 'Nathan',
	last: 'McOwen',
	status: 'in',
	date: '1406807400000'
	},
	{
	first: 'Nicole',
	last: 'Thornton',
	status: 'in',
	date: '1406808120000'
	},
	{
	first: 'Paul',
	last: 'Russell',
	status: 'out',
	date: '1406758860000'
	},
	{
	first: 'Penny',
	last: 'Vrient',
	status: 'in',
	date: '1406806620000'
	},
	{
	first: 'Shulu',
	last: 'Zhang',
	status: 'in',
	date: '1406807280000'
	},
	{
	first: 'Sonny',
	last: 'Drennin',
	status: 'out',
	date: '1406808060000'
	},
	{
	first: 'Sou',
	last: 'Sopraseuth',
	status: 'out',
	date: '1406054160000'
	},
	{
	first: 'Steve',
	last: 'Lutes',
	status: 'in',
	date: '1406030280000'
	},
	{
	first: 'Tana',
	last: 'Fager',
	status: 'in',
	date: '1406026200000'
	},
	{
	first: 'Terry',
	last: 'Miller',
	status: 'in',
	date: '1406029860000'
	}
	];

	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);

	$darkblack: #0C1422;
	$darkblue: #212E47;
	$bluegrey: #A5A9B1;
	$lightgrey: #ECEDEE;
	$disabled: #39455E;
	$enabled: #536383;
	$in: #76DE90;
	$out: #E31B29;

	body, html {
	background: $lightgrey;
	font-family: 'Open Sans';
	}

	.container {
	margin: 0 10%;
	}

	.row {
	margin: 16px -15px;
	}

	.nav {
	background: $darkblack;
	width: 100%;
	padding: 0 10%;
	height: 62px;
	border-bottom: 2px solid $darkblue;
	}

	.title {
	display: inline;
	color: $lightgrey;
	vertical-align: center;
	line-height: 62px;
	font-size: 1.3em;
	}

	.user {
	@extend .title;
	float: right;
	font-size: 0.85em;
	}

	.user a {
	color: $lightgrey;
	}

	.user a:hover {
	color: $enabled;
	}

	.filters {
	background: #f1f1f1;
	line-height: 62px;
	height: 62px;
	padding: 0 10%;
	display: block;
	}

	.filters .sp {
	width: 16px;
	}

	.button {
	cursor: pointer;
	border: 1px solid $disabled;
	border-radius: 4px;
	padding: 1px 24px;
	font-size: 0.85em;
	color: $disabled;
	display: inline;
	margin: 0 2px;
	}

	.disabled:hover {
	background: $disabled;
	border: 1px solid $darkblack;
	color: $lightgrey;
	}

	.disabled {
	color: $disabled;
	border: 1px solid $disabled;
	}

	.enabled {
	color: $lightgrey;
	border: 1px solid $darkblack;
	background: $darkblue;
	transition: background 250ms, border 250ms, color 250ms;
	}

	.hr {
	margin: 0 auto;
	height: 1px;
	width: 100%;
	background: #ccc;
	display: block;
	}

	.employees {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	list-style-position: inside;
	list-style-type: disc;
	}

	.employee {
	padding: 2px 16px;
	display: inline-block;
	margin: 12px 0;
	width: 100%;
	cursor: pointer;
	}

	.employee:hover {
	background: #ddd;
	}

	.employee .name {
	font-size: 1.25em;
	font-weight: 700;
	}

	.employee .date {
	color: #777;
	font-size: 0.75em;
	font-weight: 400;
	}

	.in {
	border-left: 3px solid $in;
	}

	.out {
	border-left: 3px solid $out;
	}

	.footer {
	margin: 24px 0 6px 0;
	font-size: 0.7em;
	height: 62px;
	position: relative;
	display: block;
	text-align: center;
	}

	a {
	color: $disabled;
	text-decoration: underline;
	}