Skip to content

Commit 21e1f2e

Browse files
ajeftsajefts
authored
Merge pull request #89 from topcoder-platform/mobile-support
add support for mobile browsers
2 parents 7540016 + 61b2f9d commit 21e1f2e

27 files changed

+223
-93
lines changed

‎src/app/addmembers/add.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h2>Import Users</h2>
1010
<div class="wrapper wrapper-content animated fadeInRight">
1111
<div class="row" ng-controller="addmembers.AddMemberController">
1212
<div class="col-lg-12">
13-
<div class="ibox float-e-margins">
13+
<div class="ibox float-e-margins import-form">
1414
<div class="ibox-title">
1515
<div class="row">
1616
<form role="form">

‎src/app/admintool/admintool.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@ <h2>Admins / Copilots / Reviewers</h2>
8484
<div class="text-center" ng-show="formSearch.isLoading">
8585
<img src="assets/images/loading.gif"/>
8686
</div>
87-
<div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && !users.length">
87+
<div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && !users.length" class="table-responsive">
8888
<p> No users found. </p>
8989
</div>
90-
<div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && users.length">
90+
<div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && users.length" class="table-responsive">
9191
<table class="footable table table-stripped toggle-arrow-tiny"
9292
data-sort="true"
9393
data-page-size="50">
@@ -135,6 +135,7 @@ <h2>Admins / Copilots / Reviewers</h2>
135135
</tfoot>
136136
</table>
137137
</div>
138+
<!-- table-responsive -->
138139
</div>
139140
</div>
140141
</div>

‎src/app/billing_account_resources/billingaccountresources.list.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="text-center" ng-show="formSearch.isLoading">
1919
<img src="assets/images/loading.gif" />
2020
</div>
21-
<div ng-show="!formSearch.isLoading">
21+
<div ng-show="!formSearch.isLoading" class="table-responsive">
2222
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="50">
2323
<thead>
2424
<tr>
@@ -46,6 +46,7 @@
4646
</tfoot>
4747
</table>
4848
</div>
49+
<!-- table-responsive -->
4950
</div>
5051
</div>
5152
</div>

‎src/app/billing_accounts/billingaccounts.list.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<div class="text-center" ng-show="formSearch.isLoading">
6565
<img src="assets/images/loading.gif" />
6666
</div>
67-
<div ng-show="!formSearch.isLoading">
67+
<div ng-show="!formSearch.isLoading" class="table-responsive">
6868
<table class="footable table table-stripped toggle-arrow-tiny">
6969
<thead>
7070
<tr>
@@ -131,6 +131,7 @@
131131
</tfoot>
132132
</table>
133133
</div>
134+
<!-- table-responsive -->
134135
</div>
135136
</div>
136137
</div>

‎src/app/clients/clients.list.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<div class="text-center" ng-show="formSearch.isLoading">
6060
<img src="assets/images/loading.gif" />
6161
</div>
62-
<div ng-show="!formSearch.isLoading">
62+
<div ng-show="!formSearch.isLoading" class="table-responsive">
6363
<table class="footable table table-stripped toggle-arrow-tiny">
6464
<thead>
6565
<tr>
@@ -116,6 +116,7 @@
116116
</tfoot>
117117
</table>
118118
</div>
119+
<!-- table-responsive -->
119120
</div>
120121
</div>
121122
</div>

‎src/app/groupmembers/groupmembers.list.html‎

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -102,52 +102,55 @@ <h2>{{memberType === 'user' ? 'Users' : 'Groups'}}</h2>
102102
<div class="text-center" ng-show="isLoading[memberType]">
103103
<img src="assets/images/loading.gif" />
104104
</div>
105-
<table class="footable table table-stripped toggle-arrow-tiny table-type-{{memberType}}" ng-show="memberships[memberType].length && !isLoading[memberType]">
106-
<thead>
107-
<tr>
108-
<th data-sort-ignore="true"><input type="checkbox" ng-model="isAllSelected[memberType]" ng-change="toggleAll(memberType); checkSelected();" /></th>
109-
<th data-type="numeric">{{memberType === 'user' ? 'User Id' : 'Group Id'}}</th>
110-
<th>{{memberType === 'user' ? 'Handle' : 'Name'}}</th>
111-
<th>Created by</th>
112-
<th>Created at</th>
113-
<th>Modified by</th>
114-
<th>Modified at</th>
115-
<th data-sort-ignore="true">&nbsp;</th>
116-
</tr>
117-
</thead>
105+
<div class="table-responsive">
106+
<table class="footable table table-stripped toggle-arrow-tiny table-type-{{memberType}}" ng-show="memberships[memberType].length && !isLoading[memberType]">
107+
<thead>
108+
<tr>
109+
<th data-sort-ignore="true"><input type="checkbox" ng-model="isAllSelected[memberType]" ng-change="toggleAll(memberType); checkSelected();" /></th>
110+
<th data-type="numeric">{{memberType === 'user' ? 'User Id' : 'Group Id'}}</th>
111+
<th>{{memberType === 'user' ? 'Handle' : 'Name'}}</th>
112+
<th>Created by</th>
113+
<th>Created at</th>
114+
<th>Modified by</th>
115+
<th>Modified at</th>
116+
<th data-sort-ignore="true">&nbsp;</th>
117+
</tr>
118+
</thead>
118119

119-
<tbody>
120-
<tr class="animate-repeat" ng-repeat="membership in memberships[memberType]">
121-
<td><input type="checkbox" ng-model="membership.isSelected" ng-change="checkSelected();" /></td>
122-
<td>{{membership.memberId}}</td>
123-
<td>
124-
<span ng-show="memberType === 'user'">
125-
<span ng-if="users[membership.memberId]">{{users[membership.memberId]}}</span>
126-
<span class="text-info" ng-if="membership.memberId && !users[membership.memberId]">loading...</span>
127-
</span>
128-
<span ng-show="memberType === 'group'">
129-
<span ng-if="groups[membership.memberId]">{{groups[membership.memberId]}}</span>
130-
<span class="text-info" ng-if="membership.memberId && !groups[membership.memberId]">loading...</span>
131-
</span>
132-
</td>
133-
<td>
134-
<span ng-if="users[membership.createdBy]">{{users[membership.createdBy]}}</span>
135-
<span class="text-info" ng-if="membership.createdBy && !users[membership.createdBy]">loading...</span>
136-
</td>
137-
<td>{{membership.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{membership.createdAt ? 'EDT' : ''}}</td>
138-
<td>
139-
<span ng-if="users[membership.modifiedBy]">{{users[membership.modifiedBy]}}</span>
140-
<span class="text-info" ng-if="membership.modifiedBy && !users[membership.modifiedBy]">loading...</span>
141-
</td>
142-
<td>{{membership.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{membership.modifiedAt ? 'EDT' : ''}}</td>
143-
<td>
144-
<button data-ng-click='removeMember(membership)' class="btn btn-sm btn-danger" ng-disabled="membership.isRemoving">
145-
<strong>Remove</strong>
146-
</button>
147-
</td>
148-
</tr>
149-
</tbody>
150-
</table>
120+
<tbody>
121+
<tr class="animate-repeat" ng-repeat="membership in memberships[memberType]">
122+
<td><input type="checkbox" ng-model="membership.isSelected" ng-change="checkSelected();" /></td>
123+
<td>{{membership.memberId}}</td>
124+
<td>
125+
<span ng-show="memberType === 'user'">
126+
<span ng-if="users[membership.memberId]">{{users[membership.memberId]}}</span>
127+
<span class="text-info" ng-if="membership.memberId && !users[membership.memberId]">loading...</span>
128+
</span>
129+
<span ng-show="memberType === 'group'">
130+
<span ng-if="groups[membership.memberId]">{{groups[membership.memberId]}}</span>
131+
<span class="text-info" ng-if="membership.memberId && !groups[membership.memberId]">loading...</span>
132+
</span>
133+
</td>
134+
<td>
135+
<span ng-if="users[membership.createdBy]">{{users[membership.createdBy]}}</span>
136+
<span class="text-info" ng-if="membership.createdBy && !users[membership.createdBy]">loading...</span>
137+
</td>
138+
<td>{{membership.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{membership.createdAt ? 'EDT' : ''}}</td>
139+
<td>
140+
<span ng-if="users[membership.modifiedBy]">{{users[membership.modifiedBy]}}</span>
141+
<span class="text-info" ng-if="membership.modifiedBy && !users[membership.modifiedBy]">loading...</span>
142+
</td>
143+
<td>{{membership.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{membership.modifiedAt ? 'EDT' : ''}}</td>
144+
<td>
145+
<button data-ng-click='removeMember(membership)' class="btn btn-sm btn-danger" ng-disabled="membership.isRemoving">
146+
<strong>Remove</strong>
147+
</button>
148+
</td>
149+
</tr>
150+
</tbody>
151+
</table>
152+
</div>
153+
<!-- table-responsive -->
151154
<div ng-show="!memberships[memberType].length" style="margin-bottom: 20px;">No members</div><br/>
152155
</div>
153156

‎src/app/groups/groups.list.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="text-center" ng-show="isLoading">
77
<img src="assets/images/loading.gif" />
88
</div>
9-
<div ng-show="!isLoading">
9+
<div ng-show="!isLoading" class="table-responsive">
1010
<table class="footable table table-stripped toggle-arrow-tiny" ng-show="groups.length" data-page-size="50">
1111
<thead>
1212
<tr>
@@ -53,6 +53,7 @@
5353
</table>
5454
<div ng-show="!groups.length">No records found</div>
5555
</div>
56+
<!-- table-responsive -->
5657
</div>
5758
</div>
5859
</div>

‎src/app/less/base.less‎

100755100644
Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ body {
88
}
99

1010
html,body {
11-
height: 100%;
11+
min-height: 100%;
12+
}
1213

14+
.app-wrapper {
15+
height: inherit;
1316
}
1417

1518
body.full-height-layout #wrapper,
@@ -18,7 +21,7 @@ body.full-height-layout #page-wrapper {
1821
}
1922

2023
#page-wrapper {
21-
min-height: auto;
24+
height: 100%;
2225
}
2326

2427
body.boxed-layout {
@@ -171,6 +174,7 @@ video {
171174
#wrapper {
172175
width: 100%;
173176
overflow-x: hidden;
177+
height: inherit;
174178
}
175179

176180
.wrapper {
@@ -183,16 +187,17 @@ video {
183187

184188
#page-wrapper {
185189
padding: 0 15px;
186-
min-height: 568px;
190+
min-height: 667px;
187191
position: relative !important;
188192
}
189193

190194
@media (min-width: 768px) {
191195
#page-wrapper {
192196
position: inherit;
197+
min-height: 959px;
193198
margin: 0 0 0 240px;
194-
min-height: 1000px;
195199
}
200+
196201
}
197202

198203
.title-action {

‎src/app/less/buttons.less‎

100755100644
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,29 @@
77
margin-bottom: 5px;
88
}
99

10+
@media (max-width: 768px) {
11+
12+
.float-e-margins .btn {
13+
margin: 15px 0 0 14px;
14+
}
15+
16+
.float-e-margins .col-md-2 .btn,
17+
.float-e-margins .col-sm-3 .btn {
18+
margin-left: 0;
19+
}
20+
21+
.float-e-margins table .btn {
22+
margin: 0;
23+
width: 100%;
24+
display: block;
25+
26+
&:first-child {
27+
margin-bottom: 15px;
28+
}
29+
}
30+
}
31+
32+
1033
.btn-w-m {
1134
min-width: 120px;
1235
}

‎src/app/less/media.less‎

100755100644
Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
#page-wrapper {
33
position: inherit;
44
margin: 0 0 0 @sidebar-width;
5-
min-height: 1200px;
5+
height: 100%;
6+
}
7+
8+
.m-menu {
9+
display: none;
610
}
711

812
.navbar-static-side {
@@ -23,14 +27,57 @@
2327
#page-wrapper {
2428
position: inherit;
2529
margin: 0 0 0 0px;
26-
min-height: 1000px;
30+
}
31+
32+
.m-menu {
33+
display: block;
34+
position: absolute;
35+
top: 5px;
36+
right: 10px;
37+
z-index: 2;
38+
&.menu-open {
39+
color: #fff;
40+
}
41+
}
42+
43+
.table-responsive {
44+
overflow-y: auto;
45+
border: none;
46+
padding-bottom: 49px;
47+
margin: 0;
48+
}
49+
50+
// Now at mobile, paignation will be position absolute and display 0 left
51+
.table-responsive .pagination {
52+
position: absolute;
53+
left: 34px;
54+
bottom: 42px;
55+
}
56+
57+
.roles-table .pagination {
58+
bottom: 22px;
59+
}
60+
61+
.dropdown-menu {
62+
right: 0;
63+
left: auto;
64+
top: 30px;
2765
}
2866

2967
.body-small .navbar-static-side {
30-
display: none;
3168
z-index: 2001;
3269
position: absolute;
33-
width: 70px;
70+
width: 100%;
71+
top: 0;
72+
}
73+
74+
.metismenu {
75+
display: none;
76+
}
77+
78+
.metismenu.menu-open {
79+
background: rgb(47, 64, 80);
80+
display: block;
3481
}
3582

3683
.body-small.mini-navbar .navbar-static-side {

0 commit comments

Comments
 (0)