Skip to content

Commit 45b065f

Browse files
micrummicrum
committed
adjust table styles
1 parent 5b74fe4 commit 45b065f

File tree

7 files changed

+156
-146
lines changed

7 files changed

+156
-146
lines changed

‎src/app/controllers/ProfileController.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
firstName: '',
1616
lastName: '' ,
1717
company: 'FlatLogic Inc.' ,
18-
address: 'Kulman street, 1' ,
18+
address: 'Fabritsiusa str, 4' ,
1919
city: 'Minsk' ,
2020
state: '' ,
2121
biography: 'We are young and ambitious full service design and technology company. ' +
2222
'Our focus is JavaScript development and User Interface design.',
23-
postalCode : '220013'
23+
postalCode : '220007'
2424
};
2525
}
2626

‎src/app/index.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,23 +52,20 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
5252
.warnPalette('defaultPrimary');
5353

5454
$mdThemingProvider.theme('dark', 'default')
55-
.primaryPalette('orange')
55+
.primaryPalette('defaultPrimary')
5656
.dark();
5757

5858
$mdThemingProvider.theme('grey', 'default')
5959
.primaryPalette('grey');
6060

61-
$mdThemingProvider.theme('red', 'default')
62-
.primaryPalette('red');
63-
6461
$mdThemingProvider.theme('custom', 'default')
6562
.primaryPalette('defaultPrimary', {
6663
'hue-1': '50'
6764
});
6865

6966
$mdThemingProvider.definePalette('defaultPrimary', {
7067
'50': '#FFFFFF',
71-
'100': '#E75753',
68+
'100': 'rgb(255, 198, 197)',
7269
'200': '#E75753',
7370
'300': '#E75753',
7471
'400': '#E75753',

‎src/app/stylesheets/_custom.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,4 +150,12 @@ md-radio-button.md-accent.md-checked .md-label span {
150150
background-color: transparent;
151151
border: none;
152152
font-weight: $font-weight-bold;
153+
}
154+
155+
.orange .md-bar2 {
156+
background-color: orange;
157+
}
158+
159+
.orange .md-container {
160+
background-color: rgb(255, 236, 201)
153161
}

‎src/app/views/profile.html‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,59 @@
11
<!-- TODO: Add validations -->
22
<md-content md-theme="dark" class="md-padding" layout="row" layout-sm="column">
3-
<md-input-container>
4-
<label>Username</label>
5-
<input ng-model="vm.user.title">
6-
</md-input-container>
7-
<md-input-container>
8-
<label>Email</label>
9-
<input ng-model="vm.user.email" type="email">
10-
</md-input-container>
11-
</md-content>
12-
<md-content class="md-padding">
13-
<form name="userForm">
14-
<div layout layout-sm="column">
15-
<md-input-container flex="80">
16-
<label>Company (Disabled)</label>
17-
<input ng-model="vm.user.company" disabled>
18-
</md-input-container>
19-
<md-input-container flex>
20-
<label>Submission Date</label>
21-
<input type="date" ng-model="vm.user.submissionDate">
22-
</md-input-container>
23-
</div>
24-
<div layout layout-sm="column">
25-
<md-input-container flex>
26-
<label>First Name</label>
27-
<input ng-model="vm.user.firstName" placeholder="Placeholder text">
28-
</md-input-container>
29-
<md-input-container flex>
30-
<label>Last Name</label>
31-
<input ng-model="vm.user.lastName">
32-
</md-input-container>
33-
</div>
34-
<md-input-container flex>
35-
<label>Address</label>
36-
<input ng-model="vm.user.address">
3+
<md-input-container>
4+
<label>Username</label>
5+
<input ng-model="vm.user.title">
376
</md-input-container>
38-
<div layout layout-sm="column">
39-
<md-input-container flex>
40-
<label>City</label>
41-
<input ng-model="vm.user.city">
42-
</md-input-container>
43-
<md-input-container flex>
44-
<label>State</label>
45-
<input ng-model="user.state">
46-
</md-input-container>
47-
<md-input-container flex>
48-
<label>Postal Code</label>
49-
<input ng-model="vm.user.postalCode">
50-
</md-input-container>
51-
</div>
52-
<md-input-container flex>
53-
<label>About us</label>
54-
<textarea ng-model="vm.user.biography" columns="1" md-maxlength="150"></textarea>
7+
<md-input-container>
8+
<label>Email</label>
9+
<input ng-model="vm.user.email" type="email">
5510
</md-input-container>
56-
</form>
11+
</md-content>
12+
<md-content class="md-padding">
13+
<form name="userForm">
14+
<div layout layout-sm="column">
15+
<md-input-container flex="80">
16+
<label>Company (Disabled)</label>
17+
<input ng-model="vm.user.company" disabled>
18+
</md-input-container>
19+
<md-input-container flex>
20+
<label>Submission Date</label>
21+
<input type="date" ng-model="vm.user.submissionDate">
22+
</md-input-container>
23+
</div>
24+
<div layout layout-sm="column">
25+
<md-input-container flex>
26+
<label>First Name</label>
27+
<input ng-model="vm.user.firstName"
28+
placeholder="Placeholder text">
29+
</md-input-container>
30+
<md-input-container flex>
31+
<label>Last Name</label>
32+
<input ng-model="vm.user.lastName">
33+
</md-input-container>
34+
</div>
35+
<md-input-container flex>
36+
<label>Address</label>
37+
<input ng-model="vm.user.address">
38+
</md-input-container>
39+
<div layout layout-sm="column">
40+
<md-input-container flex>
41+
<label>City</label>
42+
<input ng-model="vm.user.city">
43+
</md-input-container>
44+
<md-input-container flex>
45+
<label>State</label>
46+
<input ng-model="user.state">
47+
</md-input-container>
48+
<md-input-container flex>
49+
<label>Postal Code</label>
50+
<input ng-model="vm.user.postalCode">
51+
</md-input-container>
52+
</div>
53+
<md-input-container flex>
54+
<label>About us</label>
55+
<textarea ng-model="vm.user.biography" columns="1"
56+
md-maxlength="150"></textarea>
57+
</md-input-container>
58+
</form>
5759
</md-content>

‎src/app/views/table.html‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
<!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
22
<div class="table-responsive-vertical md-whiteframe-z1">
3-
<table id="table" class="table table-hover table-bordered">
4-
<thead>
5-
<tr>
6-
<th>#</th>
7-
<th>Issue</th>
8-
<th>Status</th>
9-
<th>Progress</th>
10-
</tr>
11-
</thead>
12-
<tbody>
13-
<tr ng-repeat="data in vm.tableData track by $index">
14-
<td data-title="ID">{{$index + 1}}</td>
15-
<td data-title="Issue">{{data.issue}}</td>
16-
<td data-title="Status">{{data.status}}</td>
17-
<td data-title="Progress">
18-
<md-progress-linear class="table-progress" md-theme={{data.theme}} md-mode="determinate" value={{data.progress}}></md-progress-linear>
19-
</td>
20-
</tr>
21-
</tbody>
22-
</table>
3+
<table id="table" class="table table-hover table-bordered">
4+
<thead>
5+
<tr>
6+
<th>#</th>
7+
<th>Issue</th>
8+
<th>Status</th>
9+
<th>Progress</th>
10+
</tr>
11+
</thead>
12+
<tbody>
13+
<tr ng-repeat="data in vm.tableData track by $index">
14+
<td data-title="ID">{{$index + 1}}</td>
15+
<td data-title="Issue">{{data.issue}}</td>
16+
<td data-title="Status">{{data.status}}</td>
17+
<td data-title="Progress">
18+
<md-progress-linear class="table-progress {{data.class}}"
19+
md-mode="determinate"
20+
value={{data.progress}}>
21+
</md-progress-linear>
22+
</td>
23+
</tr>
24+
</tbody>
25+
</table>
2326
</div>

‎src/components/data/PerformanceService.js‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,63 @@
1-
(function(){
2-
'use strict';
1+
(function () {
2+
'use strict';
33

4-
angular.module('app')
4+
angular.module('app')
55
.service('performanceService', [
6-
performanceService
7-
]);
8-
9-
function performanceService(){
10-
11-
var service = {
12-
getPerformanceData: getPerformanceData
13-
};
14-
15-
return service;
16-
17-
function getPerformanceData(performancePeriod) {
18-
if (performancePeriod === 'week') {
19-
return [
20-
{
21-
"key" : 'Middleware' ,
22-
"values" : [ [1,11], [2,10], [3,14], [4,21], [5,13], [6,21], [7,21], [8, 18], [9,11], [10,11], [11,18], [12,14], [13,10], [14,20], [15,21], [16,28], [17,12], [18,16], [19, 22], [20, 18], [21,21], [22,10], [23,11], [24, 14], [25,9], [26,14], [27,10], [28,21], [29,11] ]
23-
},
24-
25-
{
26-
"key" : 'Ruby' ,
27-
"values" : [ [1,29], [2,36], [3,42], [4,25], [5,22], [6,34], [7,41], [8, 19], [9,45], [10,31], [11,28], [12,36], [13,54], [14,41], [15,36], [16,39], [17,21], [18,20], [19, 22], [20, 44], [21,32], [22,20], [23,28], [24, 24], [25,29], [26,19], [27,20], [28,31], [29,49] ]
28-
},
29-
30-
{
31-
"key" : 'Web External' ,
32-
"values" : [ [1,54], [2,74], [3,64], [4,68], [5,56], [6,44], [7,61], [8, 63], [9,45], [10,51], [11,68], [12,46], [13,64], [14,51], [15,42], [16,63], [17,72], [18,60], [19, 52], [20, 58], [21,41], [22,40], [23,58], [24, 30], [25,49], [26,54], [27,60], [28,41], [29,66] ]
33-
} ,
34-
{
35-
"key" : 'Database' ,
36-
"values" : [ [1,64], [2,84], [3,64], [4,68], [5,86], [6,74], [7,81], [8, 83], [9,65], [10,61], [11,88], [12,76], [13,84], [14,71], [15,82], [16,73], [17,92], [18,80], [19, 62], [20, 68], [21,71], [22,50], [23,78], [24, 60], [25,59], [26,74], [27,80], [28,51], [29,97] ]
37-
}
38-
]
39-
} else {
40-
return [
41-
{
42-
"key" : 'Middleware' ,
43-
"values" : [ [1,13], [2,14], [3,24], [4,18], [5,16], [6,14], [7,11], [8, 13], [9,15], [10,11], [11,18], [12,16], [13,28], [14,11], [15,12], [16,13], [17,12], [18,20], [19, 22], [20, 18], [21,11], [22,10], [23,18], [24, 20], [25,9], [26,14], [27,10], [28,11], [29,17] ]
44-
},
45-
46-
{
47-
"key" : 'Ruby' ,
48-
"values" : [ [1,29], [2,36], [3,42], [4,25], [5,22], [6,34], [7,41], [8, 19], [9,45], [10,31], [11,28], [12,36], [13,54], [14,41], [15,36], [16,39], [17,21], [18,20], [19, 22], [20, 44], [21,32], [22,20], [23,28], [24, 24], [25,29], [26,19], [27,20], [28,31], [29,49] ]
49-
},
50-
51-
{
52-
"key" : 'Web External' ,
53-
"values" : [ [1,54], [2,74], [3,64], [4,68], [5,56], [6,44], [7,61], [8, 63], [9,45], [10,51], [11,68], [12,46], [13,64], [14,51], [15,42], [16,63], [17,72], [18,60], [19, 52], [20, 58], [21,41], [22,40], [23,58], [24, 30], [25,49], [26,54], [27,60], [28,41], [29,66] ]
54-
} ,
55-
{
56-
"key" : 'Database' ,
57-
"values" : [ [1,74], [2,64], [3,84], [4,78], [5,66], [6,64], [7,71], [8, 83], [9,55], [10,81], [11,88], [12,76], [13,84], [14,71], [15,62], [16,73], [17,82], [18,80], [19, 92], [20, 68], [21,71], [22,70], [23,78], [24, 80], [25,59], [26,74], [27,80], [28,51], [29,67] ]
58-
}
59-
]
60-
}
6+
performanceService
7+
]);
8+
9+
function performanceService() {
10+
11+
var service = {
12+
getPerformanceData: getPerformanceData
13+
};
14+
15+
return service;
16+
17+
function getPerformanceData(performancePeriod) {
18+
if (performancePeriod === 'week') {
19+
return [
20+
{
21+
"key": 'Middleware',
22+
"values": [[1, 11], [2, 10], [3, 14], [4, 21], [5, 13], [6, 21], [7, 21], [8, 18], [9, 11], [10, 11], [11, 18], [12, 14], [13, 10], [14, 20], [15, 21], [16, 28], [17, 12], [18, 16], [19, 22], [20, 18], [21, 21], [22, 10], [23, 11], [24, 14], [25, 9], [26, 14], [27, 10], [28, 21], [29, 11]]
23+
},
24+
25+
{
26+
"key": 'Ruby',
27+
"values": [[1, 29], [2, 36], [3, 42], [4, 25], [5, 22], [6, 34], [7, 41], [8, 19], [9, 45], [10, 31], [11, 28], [12, 36], [13, 54], [14, 41], [15, 36], [16, 39], [17, 21], [18, 20], [19, 22], [20, 44], [21, 32], [22, 20], [23, 28], [24, 24], [25, 29], [26, 19], [27, 20], [28, 31], [29, 49]]
28+
},
29+
30+
{
31+
"key": 'Web External',
32+
"values": [[1, 54], [2, 74], [3, 64], [4, 68], [5, 56], [6, 44], [7, 61], [8, 63], [9, 45], [10, 51], [11, 68], [12, 46], [13, 64], [14, 51], [15, 42], [16, 63], [17, 72], [18, 60], [19, 52], [20, 58], [21, 41], [22, 40], [23, 58], [24, 30], [25, 49], [26, 54], [27, 60], [28, 41], [29, 66]]
33+
},
34+
{
35+
"key": 'Database',
36+
"values": [[1, 64], [2, 84], [3, 64], [4, 68], [5, 86], [6, 74], [7, 81], [8, 83], [9, 65], [10, 61], [11, 88], [12, 76], [13, 84], [14, 71], [15, 82], [16, 73], [17, 92], [18, 80], [19, 62], [20, 68], [21, 71], [22, 50], [23, 78], [24, 60], [25, 59], [26, 74], [27, 80], [28, 51], [29, 97]]
37+
}
38+
]
39+
} else {
40+
return [
41+
{
42+
"key": 'Middleware',
43+
"values": [[1, 13], [2, 14], [3, 24], [4, 18], [5, 16], [6, 14], [7, 11], [8, 13], [9, 15], [10, 11], [11, 18], [12, 16], [13, 28], [14, 11], [15, 12], [16, 13], [17, 12], [18, 20], [19, 22], [20, 18], [21, 11], [22, 10], [23, 18], [24, 20], [25, 9], [26, 14], [27, 10], [28, 11], [29, 17]]
44+
},
45+
46+
{
47+
"key": 'Ruby',
48+
"values": [[1, 29], [2, 36], [3, 42], [4, 25], [5, 22], [6, 34], [7, 41], [8, 19], [9, 45], [10, 31], [11, 28], [12, 36], [13, 54], [14, 41], [15, 36], [16, 39], [17, 21], [18, 20], [19, 22], [20, 44], [21, 32], [22, 20], [23, 28], [24, 24], [25, 29], [26, 19], [27, 20], [28, 31], [29, 49]]
49+
},
50+
51+
{
52+
"key": 'Web External',
53+
"values": [[1, 54], [2, 74], [3, 64], [4, 68], [5, 56], [6, 44], [7, 61], [8, 63], [9, 45], [10, 51], [11, 68], [12, 46], [13, 64], [14, 51], [15, 42], [16, 63], [17, 72], [18, 60], [19, 52], [20, 58], [21, 41], [22, 40], [23, 58], [24, 30], [25, 49], [26, 54], [27, 60], [28, 41], [29, 66]]
54+
},
55+
{
56+
"key": 'Database',
57+
"values": [[1, 74], [2, 64], [3, 84], [4, 78], [5, 66], [6, 64], [7, 71], [8, 83], [9, 55], [10, 81], [11, 88], [12, 76], [13, 84], [14, 71], [15, 62], [16, 73], [17, 82], [18, 80], [19, 92], [20, 68], [21, 71], [22, 70], [23, 78], [24, 80], [25, 59], [26, 74], [27, 80], [28, 51], [29, 67]]
58+
}
59+
]
60+
}
61+
}
6162
}
62-
}
6363
})();

‎src/components/data/TableService.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,49 +13,49 @@
1313
issue: 'Nested views',
1414
progress: 100,
1515
status: 'Done',
16-
theme: ''
16+
class: 'md-accent'
1717
},
1818
{
1919
issue: 'Table component',
2020
progress: 40,
2121
status: 'Feedback',
22-
theme: 'dark'
22+
class: ''
2323
},
2424
{
2525
issue: 'Dashboard tiles',
2626
progress: 100,
2727
status: 'Done',
28-
theme: ''
28+
class: 'md-accent'
2929
},
3030
{
3131
issue: 'Panel widget',
3232
progress: 84,
3333
status: 'In progress',
34-
theme: 'grey'
34+
class: 'orange'
3535
},
3636
{
3737
issue: 'Form',
3838
progress: 100,
3939
status: 'Done',
40-
theme: ''
40+
class: 'md-accent'
4141
},
4242
{
4343
issue: 'Custom CSS',
4444
progress: 20,
4545
status: 'Feedback',
46-
theme: 'dark'
46+
class: ''
4747
},
4848
{
4949
issue: 'Add backend',
5050
progress: 1,
5151
status: 'To do',
52-
theme: 'red'
52+
class: 'md-warn'
5353
},
5454
{
5555
issue: 'Layout with sidebar',
5656
progress: 100,
5757
status: 'Done',
58-
theme: ''
58+
class: 'md-accent'
5959
}
6060
];
6161

0 commit comments

Comments
 (0)