formatting changes. corrected pagination options at the bottom of users page to be aligned correctly, both horizontally and vertically.
#11
This commit is contained in:
parent
cdac61b18d
commit
923e4473a9
@ -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,7 +42,8 @@
|
||||
</div>
|
||||
</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="row">
|
||||
<div class="col-xs-8">
|
||||
@ -55,7 +56,7 @@
|
||||
</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 />
|
||||
<br/>
|
||||
<div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -64,8 +65,8 @@
|
||||
<th>UserId</th>
|
||||
<th class="col-md-1">firstName</th>
|
||||
<th class="col-md-1">lastName</th>
|
||||
<th />
|
||||
<th />
|
||||
<th/>
|
||||
<th/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind="foreach: Users">
|
||||
@ -79,30 +80,51 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<label>Total User Count: <span data-bind="text: UserCount"></span></label>
|
||||
</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>
|
||||
<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>
|
||||
</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
|
||||
<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="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
|
||||
@ -112,27 +134,27 @@
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<input type="text" readonly class="form-control col-md-8" value="This User is a Contractor"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="AssociatedCards">Associated Cards</label>
|
||||
<br />
|
||||
<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">
|
||||
@ -140,35 +162,34 @@
|
||||
<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" />
|
||||
<input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<hr />
|
||||
<hr/>
|
||||
</div>
|
||||
<div data-bind="with: $root.unassignedCardData">
|
||||
<label for="AssociatedCards">Unassociated/Available Cards</label>
|
||||
<br />
|
||||
<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" />
|
||||
<input type="text" readonly class="form-control" data-bind="value: UniqueId"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-bind="with: userTimeLogData">
|
||||
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user