Chris/FlexitimeTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting changes. corrected pagination options at the bottom of users page to be aligned correctly, both horizontally and vertically.

Browse Source 
#11
This commit is contained in:
Chris.Watts90@outlook.com 2017-02-13 11:48:57 +00:00
parent cdac61b18d
commit 923e4473a9
1 changed files with 123 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
View File

@ -28,13 +28,13 @@
<a class="navbar-brand" href="#">Big Brother</a> <a class="navbar-brand" href="#">Big Brother</a>
</div> </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"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<!-- ko foreach: menuOptions --> <!-- ko foreach: menuOptions -->
<li data-bind="css: { active: $root.chosenMenuItemId() == $data }, <li data-bind="css: { active: $root.chosenMenuItemId() == $data },
click: $root.goToMenuOption"> 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> </li>
<!-- /ko --> <!-- /ko -->
</ul> </ul>
@ -42,133 +42,154 @@
</div> </div>
</nav> </nav>
<div class="container" data-bind="with: userList"> <div class="container" data-bind="with: userList">
<div class="col-md-10 col-md-offset-1"> <!-- Home page > All User List -->
<div class="row"> <div class="col-md-10 col-md-offset-1">
<div class="col-xs-8"> <div class="row">
<form class="input-group" action="#users" method="get"> <div class="col-xs-8">
<span class="input-group-btn"> <form class="input-group" action="#users" method="get">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button> <button class="btn btn-default" type="submit">Go!</button>
</span> </span>
<input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query"> <input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
</form> </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> </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> </div>
<br /> <div class="pagination col-md-2 text-center" style="float: right">
<div> <div>
<table class="table table-striped"> <button class="btn btn-default dropdown-toggle" type="button" id="pageSizeDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<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">
Page Size Page Size
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <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}">
<li data-bind="css:{disabled:$root.userList().PageSize===1}"><a data-bind="click: function(){$root.setPageSize(1);}">1</a></li> <a data-bind="click: function(){$root.setPageSize(-1);}">All</a>
<li data-bind="css:{disabled:$root.userList().PageSize===10}"><a data-bind="click: function(){$root.setPageSize(10);}">10</a></li> </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===1}">
<li data-bind="css:{disabled:$root.userList().PageSize===50}"><a data-bind="click: function(){$root.setPageSize(50);}">50</a></li> <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> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="container" data-bind="with: chosenUserDetails"> <div class="container" data-bind="with: chosenUserDetails">
<div class="col-md-10 col-md-offset-1"> <!-- Edit User Page -->
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default"> <div class="col-md-10 col-md-offset-1">
<span class="glyphicon glyphicon-chevron-left"></span>Users <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
</button> <span class="glyphicon glyphicon-chevron-left"></span>Users
<h1 data-bind="text: FirstName"></h1> </button>
<form action="#edituser" method="post"> <h1 data-bind="text: FirstName"></h1>
<input type="hidden" name="id" data-bind="value: UserId"> <form action="#edituser" method="post">
<div class="form-group"> <input type="hidden" name="id" data-bind="value: UserId">
<label for="FirstName">First Name</label> <div class="form-group">
<input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName" /> <label for="FirstName">First Name</label>
</div> <input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName"/>
<div class="form-group"> </div>
<label for="LastName">Last Name</label> <div class="form-group">
<input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName" /> <label for="LastName">Last Name</label>
</div> <input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName"/>
<div class="form-group"> </div>
<label for="HoursPerWeek">Hours Per Week</label> <div class="form-group">
<input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek" /> <label for="HoursPerWeek">Hours Per Week</label>
</div> <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek"/>
<div class="form-group"> </div>
<div class="input-group "> <div class="form-group">
<span class="input-group-addon"> <div class="input-group ">
<span class="input-group-addon">
<input for="IsContractor" type="checkbox" id="isContractorEditor" data-bind="checked: IsContractor" /> <input for="IsContractor" type="checkbox" id="isContractorEditor" data-bind="checked: IsContractor" />
</span> </span>
<input type="text" readonly class="form-control col-md-8" value="This User is a Contractor" /> <input type="text" readonly class="form-control col-md-8" value="This User is a Contractor"/>
</div>
</div> </div>
<div> </div>
<label for="AssociatedCards">Associated Cards</label> <div>
<br /> <label for="AssociatedCards">Associated Cards</label>
<div class="row"> <br/>
<!-- ko foreach: AssociatedIdentifiers --> <div class="row">
<div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0"> <!-- ko foreach: AssociatedIdentifiers -->
<div class="input-group "> <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
<span class="input-group-addon"> <div class="input-group ">
<span class="input-group-addon">
<input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" /> <input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
</span> </span>
<input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId" /> <input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId"/>
</div>
</div> </div>
<!-- /ko -->
</div> </div>
<hr /> <!-- /ko -->
</div> </div>
<div data-bind="with: $root.unassignedCardData"> <hr/>
<label for="AssociatedCards">Unassociated/Available Cards</label> </div>
<br /> <div data-bind="with: $root.unassignedCardData">
<div class="row"> <label for="AssociatedCards">Unassociated/Available Cards</label>
<!-- --> <br/>
<!-- ko foreach: data --> <div class="row">
<div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0"> <!-- ko foreach: data -->
<div class="input-group"> <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
<span class="input-group-addon"> <div class="input-group">
<span class="input-group-addon">
<input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" /> <input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
</span> </span>
<input type="text" readonly class="form-control" data-bind="value: UniqueId" /> <input type="text" readonly class="form-control" data-bind="value: UniqueId"/>
</div>
</div> </div>
<!-- /ko -->
</div> </div>
<!-- /ko -->
</div> </div>
<br /> </div>
<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> <br/>
</form> <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>
</div> </form>
</div> </div>
</div>
<div class="container" data-bind="with: userTimeLogData"> <div class="container" data-bind="with: userTimeLogData">
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default"> <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">