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.
Created
August 26, 2014 13:27
-
-
Save M-Porter/7bc57dc88c69b90379c8 to your computer and use it in GitHub Desktop.
A Pen by Matt Porter.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' | |
| } | |
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment