Peek App Documentation

Bootstrap

The css for the peek app is based upon bootstrap. For more detailed reference to bootstrap documentation please visit http://getbootstrap.com.

General Bootstrap Layout

Bootstrap follows a general nested layout, that must be observed. In most cases: Code sample:
<div class="container-fluid"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> </div>

Pages

Home Page

Background

Homepage background is unique and different to other pages.
The background requires a call on the body tag.

Display:
Code:
<body class="home-page">...</body>

Buttons

Buttons on the home page strictly use images.
Font Awesome icons can not be used.
Buttons responsively wrap.

Display Sample:

Testing Noop
Code sample:
<a href=""> <img src="../images/testing_noop.png" class="image"> <p class="text-center">Testing Noop</p> </a>

Information Page

Icon

Icons can be created by using an image or font awesome font.
Images and font awesome icons have their own respective code snippets.
Backgrounds are identical.

Image display:
Image code:
<div class="information-icon-large"> <img src="images/field_switching.png" class="image"> </div>
Font Awesome display:
Font awesome code:
<i class="fa fa-user information-icon-large" aria-hidden="true"></i>

Detail Page

Button Groups

Display:
Code:
<div class="btn-group" role="group" aria-label=""> <button class="btn">My Jobs</button> <button class="btn">Job</button> <button class="btn">Operations</button> </div>

Details Row

Display:
Item

#3

State

Confirmed

Code:
<div class="row"> <div class="form-group col-xs-5"> <h5 class="h5 text-muted">Item</h5> <h3 class="h3">#3</h3> </div> <div class="form-group col-xs-7"> <h5 class="h5 text-muted">State</h5> <h3 class="h3">Confirmed</h3> </div> </div>

Table Pages

All of the elements in the Table Pages use the standard bootstrap classes.

Header

Display:
Item State Location Circuit / Details
Code:
<table class="table table-striped"> <thead> <tr> <th class="text-center">Item</th> <th>State</th> <th>Location</th> <th>Circuit / Details</th> </tr> </thead> </table>

Activity Task

Task list

Code specific only to task list

Display:
New Message New Message New Message New Message
You have a new message You have a new message You have a new message You have a new message
13 hours ago 20:03 05-Mar
Code:
<plugin-active-task-task-list> <div class="plugin-active-task-task-list"> <div class="td bg-success"> <div class="task-icon"><i class="fa fa-comment" aria-hidden="true"></i></div> <div class="task-activity"> <div class="task-tite">New Message New Message New Message New Message</div> You have a new message You have a new message You have a new message You have a new message <div class="task-time">13 hours ago 20:03 05-Mar</div> <div class="task-buttons"> <button type="button" name="button">button1</button> <button type="button" name="button">button2</button> <button type="button" name="button">button3</button> <button type="button" name="button">button4</button> <button type="button" name="button">button5</button> <button type="button" name="button">button6</button> </div> <div class="task-read-more"></div> </div> </div> </div> </plugin-active-task-task-list>

Activity List

Code specific only to Activity List.

Display:
This happened
13 hours ago 20:03 05-Mar
A message came for uoi
Code:
<plugin-active-task-activity-list> <div class="plugin-active-task-activity-list"> <div class="td bg-success"> <div class="activity-list"> <div class="activity-tite">This happened</div> <div class="activity-time">13 hours ago 20:03 05-Mar</div> A message came for uoi </div> <a class="activity-read-more"></a> </div> </div> </plugin-active-task-activity-list>

Messages

Messages list

Display:
Chief Wiggum (C917)
Code:
<div class="plugin-chat-chat-list"> <div class="row"> <div class="col-sm-12"> <div class="well"> <i class="fa fa-comment" aria-hidden="true"></i> <div class="chat-topic">Chief Wiggum (C917)</div> </div> </div> </div> </div>

Messages chat message

Messages bubbles (Message & Reply)

Display:
From Chief Wiggum (C917), 21 hours ago
A message written by a user
From Chief Wiggum (C917), 21 hours ago
A message written by a user
Code:
<div class="plugin-chat-msg-list"><div class="messaging-text"> <div class="chat-window"> <div class="chat-message"> <div class="chat-details"><small>From Chief Wiggum (C917), 21 hours ago</small></div> <div class="chat-bubble">A message written by a user</div> </div> <div class="chat-reply"> <div class="chat-details"><small>From Chief Wiggum (C917), 21 hours ago</small></div> <div class="chat-bubble">A message written by a user</div> </div> </div> </div> </div>

Messaging area

Display:
Code:
<div class="plugin-chat-msg-list"> <div class="messaging-area"> <div class="messaging-textarea"> <textarea class="form-control ng-untouched ng-pristine ng-valid"></textarea> </div> <div class="messaging-buttons"> <button class="btn send" type="button" disabled="">Send</button> <button class="btn" type="button">SOS</button> </div> </div> </div>