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

47
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>
@ -43,6 +43,7 @@
</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">
@ -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
@ -151,7 +173,6 @@
<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">