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

79
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,7 +42,8 @@
</div> </div>
</nav> </nav>
<div class="container" data-bind="with: userList"> <div class="container" data-bind="with: userList">
<!-- Home page > All User List -->
<div class="col-md-10 col-md-offset-1"> <div class="col-md-10 col-md-offset-1">
<div class="row"> <div class="row">
<div class="col-xs-8"> <div class="col-xs-8">
@ -55,7 +56,7 @@
</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> <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 /> <br/>
<div> <div>
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
@ -64,8 +65,8 @@
<th>UserId</th> <th>UserId</th>
<th class="col-md-1">firstName</th> <th class="col-md-1">firstName</th>
<th class="col-md-1">lastName</th> <th class="col-md-1">lastName</th>
<th /> <th/>
<th /> <th/>
</tr> </tr>
</thead> </thead>
<tbody data-bind="foreach: Users"> <tbody data-bind="foreach: Users">
@ -79,30 +80,51 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<label>Total User Count: <span data-bind="text: UserCount"></span></label>
</div> </div>
<div class="row"> <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)"> <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> <li data-bind="css:{ active: $parent.PageNumber==($index()+1)}">
<a data-bind="text: $index()+1, click: function(){$root.goToUserPage($index()+1);}"></a>
</li>
</ul> </ul>
<div class="dropdown"> </div>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> </div>
<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 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">
<!-- Edit User Page -->
<div class="col-md-10 col-md-offset-1"> <div class="col-md-10 col-md-offset-1">
<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">
<span class="glyphicon glyphicon-chevron-left"></span>Users <span class="glyphicon glyphicon-chevron-left"></span>Users
@ -112,27 +134,27 @@
<input type="hidden" name="id" data-bind="value: UserId"> <input type="hidden" name="id" data-bind="value: UserId">
<div class="form-group"> <div class="form-group">
<label for="FirstName">First Name</label> <label for="FirstName">First Name</label>
<input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName" /> <input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="LastName">Last Name</label> <label for="LastName">Last Name</label>
<input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName" /> <input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="HoursPerWeek">Hours Per Week</label> <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" /> <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="input-group "> <div class="input-group ">
<span class="input-group-addon"> <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> <div>
<label for="AssociatedCards">Associated Cards</label> <label for="AssociatedCards">Associated Cards</label>
<br /> <br/>
<div class="row"> <div class="row">
<!-- ko foreach: AssociatedIdentifiers --> <!-- 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="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
@ -140,35 +162,34 @@
<span class="input-group-addon"> <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> </div>
<!-- /ko --> <!-- /ko -->
</div> </div>
<hr /> <hr/>
</div> </div>
<div data-bind="with: $root.unassignedCardData"> <div data-bind="with: $root.unassignedCardData">
<label for="AssociatedCards">Unassociated/Available Cards</label> <label for="AssociatedCards">Unassociated/Available Cards</label>
<br /> <br/>
<div class="row"> <div class="row">
<!-- -->
<!-- ko foreach: data --> <!-- 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="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"> <div class="input-group">
<span class="input-group-addon"> <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> </div>
<!-- /ko --> <!-- /ko -->
</div> </div>
</div> </div>
<br /> <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> <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> </form>
</div> </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">