From 923e4473a9606ba55d8a0e3139a806074e61d2f1 Mon Sep 17 00:00:00 2001
From: "Chris.Watts90@outlook.com" <Chris.Watts90@outlook.com>
Date: Mon, 13 Feb 2017 11:48:57 +0000
Subject: [PATCH] formatting changes. corrected pagination options at the
 bottom of users page to be aligned correctly, both horizontally and
 vertically.

#11
---
 .../WindowsDataCenter/www/index.html          | 225 ++++++++++--------
 1 file changed, 123 insertions(+), 102 deletions(-)

diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
index 667f93f..32bd409 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
@@ -28,13 +28,13 @@
                 <a class="navbar-brand" href="#">Big Brother</a>
             </div>
 
-            <!-- Collect the nav links, forms, and other content for toggling data-bind="foreach: menuOptions",active: $data == $root.chosenMenuItemId() -->
+            <!-- Collect the nav links, forms, and other content for toggling  -->
             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav">
                     <!-- ko foreach: menuOptions -->
                     <li data-bind="css: { active: $root.chosenMenuItemId() == $data },
                        click: $root.goToMenuOption">
-                        <a class="indent-nav-xs" data-bind="text: $data"></a> <!-- would be nice to indent these "1 col" on xs, when the navbar compacts.. any ideas? -->
+                        <a class="indent-nav-xs" data-bind="text: $data"></a>
                     </li>
                     <!-- /ko -->
                 </ul>
@@ -42,133 +42,154 @@
         </div>
     </nav>
 
-    <div class="container" data-bind="with: userList">
-        <div class="col-md-10 col-md-offset-1">
-            <div class="row">
-                <div class="col-xs-8">
-                    <form class="input-group" action="#users" method="get">
-                        <span class="input-group-btn">
+<div class="container" data-bind="with: userList">
+    <!-- Home page > All User List -->
+    <div class="col-md-10 col-md-offset-1">
+        <div class="row">
+            <div class="col-xs-8">
+                <form class="input-group" action="#users" method="get">
+                    <span class="input-group-btn">
                             <button class="btn btn-default" type="submit">Go!</button>
                         </span>
-                        <input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
-                    </form>
+                    <input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
+                </form>
+            </div>
+            <button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick" pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
+        </div>
+        <br/>
+        <div>
+            <table class="table table-striped">
+                <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>UserId</th>
+                    <th class="col-md-1">firstName</th>
+                    <th class="col-md-1">lastName</th>
+                    <th/>
+                    <th/>
+                </tr>
+                </thead>
+                <tbody data-bind="foreach: Users">
+                <tr>
+                    <td class="valign" data-bind="text: UserId"></td>
+                    <td class="valign" data-bind="text: UserId"></td>
+                    <td class="valign" data-bind="text: LastName"></td>
+                    <td class="valign" data-bind="text: FirstName"></td>
+                    <td class="fit"><button data-bind="click: $root.goToUserDetails" class="btn btn-default">Details</button></td>
+                    <td class="fit hidden-md-down"><button data-bind="click: $root.goToTimeLogs" class="btn btn-default">View Logs</button></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="row">
+            <div class="pagination col-md-3 align-middle">
+                <label>Total User Count: <span data-bind="text: TotalUserCount"></span></label>
+            </div>
+            <div class="col-md-6">
+                <div class="text-center">
+                    <ul class="pagination" data-bind="foreach: new Array(PageCount)">
+                        <li data-bind="css:{ active: $parent.PageNumber==($index()+1)}">
+                            <a data-bind="text: $index()+1, click: function(){$root.goToUserPage($index()+1);}"></a>
+                        </li>
+                    </ul>
                 </div>
-                <button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick" pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
             </div>
-            <br />
-            <div>
-                <table class="table table-striped">
-                    <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>UserId</th>
-                        <th class="col-md-1">firstName</th>
-                        <th class="col-md-1">lastName</th>
-                        <th />
-                        <th />
-                    </tr>
-                    </thead>
-                    <tbody data-bind="foreach: Users">
-                    <tr>
-                        <td class="valign" data-bind="text: UserId"></td>
-                        <td class="valign" data-bind="text: UserId"></td>
-                        <td class="valign" data-bind="text: LastName"></td>
-                        <td class="valign" data-bind="text: FirstName"></td>
-                        <td class="fit"><button data-bind="click: $root.goToUserDetails" class="btn btn-default">Details</button></td>
-                        <td class="fit hidden-md-down"><button data-bind="click: $root.goToTimeLogs" class="btn btn-default">View Logs</button></td>
-                    </tr>
-                    </tbody>
-                </table>
-                <label>Total User Count: <span data-bind="text: UserCount"></span></label>
-            </div>
-            <div class="row">
-                <ul class="pagination" data-bind="foreach: new Array(PageCount)">
-                    <li data-bind="css:{ active: $parent.PageNumber==($index()+1)}"><a data-bind="text: $index()+1, click: function(){$root.goToUserPage($index()+1);}"></a></li>
-                </ul>
-                <div class="dropdown">
-                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <div class="pagination col-md-2 text-center" style="float: right">
+                <div>
+                    <button class="btn btn-default dropdown-toggle" type="button" id="pageSizeDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                         Page Size
                         <span class="caret"></span>
                     </button>
-                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                        <li data-bind="css:{disabled:$root.userList().PageSize===-1}"><a data-bind="click: function(){$root.setPageSize(-1);}">All</a></li>
-                        <li data-bind="css:{disabled:$root.userList().PageSize===1}"><a data-bind="click: function(){$root.setPageSize(1);}">1</a></li>
-                        <li data-bind="css:{disabled:$root.userList().PageSize===10}"><a data-bind="click: function(){$root.setPageSize(10);}">10</a></li>
-                        <li data-bind="css:{disabled:$root.userList().PageSize===20}"><a data-bind="click: function(){$root.setPageSize(20);}">20</a></li>
-                        <li data-bind="css:{disabled:$root.userList().PageSize===50}"><a data-bind="click: function(){$root.setPageSize(50);}">50</a></li>
+                    <ul class="dropdown-menu" aria-labelledby="pageSizeDropDown">
+                        <li data-bind="css:{disabled:$root.userList().PageSize===-1}">
+                            <a data-bind="click: function(){$root.setPageSize(-1);}">All</a>
+                        </li>
+                        <li data-bind="css:{disabled:$root.userList().PageSize===1}">
+                            <a data-bind="click: function(){$root.setPageSize(1);}">1</a>
+                        </li>
+                        <li data-bind="css:{disabled:$root.userList().PageSize===10}">
+                            <a data-bind="click: function(){$root.setPageSize(10);}">10</a>
+                        </li>
+                        <li data-bind="css:{disabled:$root.userList().PageSize===20}">
+                            <a data-bind="click: function(){$root.setPageSize(20);}">20</a>
+                        </li>
+                        <li data-bind="css:{disabled:$root.userList().PageSize===50}">
+                            <a data-bind="click: function(){$root.setPageSize(50);}">50</a>
+                        </li>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
+</div>
 
-    <div class="container" data-bind="with: chosenUserDetails">
-        <div class="col-md-10 col-md-offset-1">
-            <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
-                <span class="glyphicon glyphicon-chevron-left"></span>Users
-            </button>
-            <h1 data-bind="text: FirstName"></h1>
-            <form action="#edituser" method="post">
-                <input type="hidden" name="id" data-bind="value: UserId">
-                <div class="form-group">
-                    <label for="FirstName">First Name</label>
-                    <input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName" />
-                </div>
-                <div class="form-group">
-                    <label for="LastName">Last Name</label>
-                    <input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName" />
-                </div>
-                <div class="form-group">
-                    <label for="HoursPerWeek">Hours Per Week</label>
-                    <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek" />
-                </div>
-                <div class="form-group">
-                    <div class="input-group ">
-                        <span class="input-group-addon">
+<div class="container" data-bind="with: chosenUserDetails">
+    <!-- Edit User Page -->
+    <div class="col-md-10 col-md-offset-1">
+        <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
+            <span class="glyphicon glyphicon-chevron-left"></span>Users
+        </button>
+        <h1 data-bind="text: FirstName"></h1>
+        <form action="#edituser" method="post">
+            <input type="hidden" name="id" data-bind="value: UserId">
+            <div class="form-group">
+                <label for="FirstName">First Name</label>
+                <input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName"/>
+            </div>
+            <div class="form-group">
+                <label for="LastName">Last Name</label>
+                <input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName"/>
+            </div>
+            <div class="form-group">
+                <label for="HoursPerWeek">Hours Per Week</label>
+                <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek"/>
+            </div>
+            <div class="form-group">
+                <div class="input-group ">
+                    <span class="input-group-addon">
                             <input for="IsContractor" type="checkbox" id="isContractorEditor" data-bind="checked: IsContractor" />
                         </span>
-                        <input type="text" readonly class="form-control col-md-8" value="This User is a Contractor" />
-                    </div>
+                    <input type="text" readonly class="form-control col-md-8" value="This User is a Contractor"/>
                 </div>
-                <div>
-                    <label for="AssociatedCards">Associated Cards</label>
-                    <br />
-                    <div class="row">
-                        <!-- ko foreach: AssociatedIdentifiers -->
-                        <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
-                            <div class="input-group ">
-                                <span class="input-group-addon">
+            </div>
+            <div>
+                <label for="AssociatedCards">Associated Cards</label>
+                <br/>
+                <div class="row">
+                    <!-- ko foreach: AssociatedIdentifiers -->
+                    <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
+                        <div class="input-group ">
+                            <span class="input-group-addon">
                                     <input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
                                 </span>
-                                <input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId" />
-                            </div>
+                            <input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId"/>
                         </div>
-                        <!-- /ko -->
                     </div>
-                    <hr />
+                    <!-- /ko -->
                 </div>
-                <div data-bind="with: $root.unassignedCardData">
-                    <label for="AssociatedCards">Unassociated/Available Cards</label>
-                    <br />
-                    <div class="row">
-                        <!--  -->
-                        <!-- ko foreach: data -->
-                        <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
-                            <div class="input-group">
-                                <span class="input-group-addon">
+                <hr/>
+            </div>
+            <div data-bind="with: $root.unassignedCardData">
+                <label for="AssociatedCards">Unassociated/Available Cards</label>
+                <br/>
+                <div class="row">
+                    <!-- ko foreach: data -->
+                    <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
+                        <div class="input-group">
+                            <span class="input-group-addon">
                                     <input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
                                 </span>
-                                <input type="text" readonly class="form-control" data-bind="value: UniqueId" />
-                            </div>
+                            <input type="text" readonly class="form-control" data-bind="value: UniqueId"/>
                         </div>
-                        <!-- /ko -->
                     </div>
+                    <!-- /ko -->
                 </div>
-                <br />
-                <button pageDestination="Users" class="btn btn-secondary" type="button" data-bind="click: $root.returnButtonClick">Cancel</button>      <button type="submit" class="btn btn-primary">Submit</button>
-            </form>
-        </div>
+            </div>
+            <br/>
+            <button pageDestination="Users" class="btn btn-secondary" type="button" data-bind="click: $root.returnButtonClick">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
     </div>
+</div>
 
     <div class="container" data-bind="with: userTimeLogData">
         <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">