Skip to content

Commit 17c99f0

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
change material template
1 parent fd4e66b commit 17c99f0

File tree

4 files changed

+123
-104
lines changed

4 files changed

+123
-104
lines changed

‎demo/demoApp.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ngMaterial']
77
};
88
myAppFactory.getData().then(function (responseData) {
99
$scope.gridOptions.data = responseData.data;
10-
})
10+
});
1111

1212
}])
1313
.factory('myAppFactory', function ($http) {
@@ -19,4 +19,5 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ngMaterial']
1919
});
2020
}
2121
}
22-
});
22+
});
23+

‎demo/material.html‎

Lines changed: 88 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,25 @@
33
<head lang="en">
44
<meta charset="UTF-8">
55
<title>Angular Data Grid</title>
6-
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
8+
<link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
79
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
810
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
911
<link rel="stylesheet" href="material/css/angular-data-grid.material.css">
1012
</head>
1113
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
1214
<div layout="column" layout-fill>
13-
<md-toolbar>
14-
<div class="md-toolbar-tools max-width">
15+
<md-toolbar layout="row" layout-align="center">
16+
<div class="md-toolbar-tools" flex-lg="60" flex-md="80" flex-sm="100">
1517
<span>Angular Data Grid &mdash; Material Design</span>
1618
<span flex></span>
17-
<md-menu>
19+
<md-menu md-position-mode="target-right target">
1820
<md-button ng-click="$mdOpenMenu($event)">
21+
<span layout="row" layout-align="center center">
1922
Change theme
23+
<i class="material-icons">arrow_drop_down</i>
24+
</span>
2025
</md-button>
2126
<md-menu-content>
2227
<md-menu-item>
@@ -29,12 +34,17 @@
2934
</md-menu>
3035
</div>
3136
</md-toolbar>
32-
<md-content class="layout-padding">
33-
<div class="max-width">
34-
<div layout-gt-sm="row" class="layout-gt-sm-row">
35-
<div class="flex-gt-sm">
36-
<md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
37-
<label for="order">Search By Order #</label>
37+
<md-content layout-padding layout="row" layout-align="center">
38+
<div flex-lg="60" flex-md="80" flex-xs="100">
39+
<div>
40+
<h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Material styling</h3>
41+
<p class="layout-padding">Features enabled: sorting, filtering (using both in-grid and external controls), pagination and item-per-page functionality. Angular Material Datepickers used for date controls, although you can use any other framework / plugins.<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a></p>
42+
</div>
43+
<hr class="layout-margin">
44+
<div layout-gt-sm="row" layout-sm="column" layout-align="center" class="layout-padding">
45+
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="row" layout-align="center start">
46+
<md-input-container class="md-block flex-gt-xs flex-xs">
47+
<label for="order" class="md-no-float">Search By Order #</label>
3848
<input ng-model="code"
3949
class="md-input"
4050
ng-change="gridActions.filter()"
@@ -44,17 +54,21 @@
4454
aria-invalid="false">
4555
</md-input-container>
4656
</div>
47-
<div class="flex-gt-sm" style="padding: 18px 0;">
57+
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="column" layout-align="start stretch">
58+
<label class="md-datepicker-label">From</label>
4859
<md-datepicker ng-model="dateFrom"
60+
flex="100"
4961
md-placeholder="MM/DD/YYYY"
5062
is-open="dateFromOpened"
5163
ng-click="dateFromOpened = true"
5264
filter-by="placed"
5365
filter-type="dateFrom"
5466
ng-change="gridActions.filter()"></md-datepicker>
5567
</div>
56-
<div class="flex-gt-sm" style="padding: 18px 0;">
68+
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="column" layout-align="start stretch">
69+
<label class="md-datepicker-label">To</label>
5770
<md-datepicker ng-model="dateTo"
71+
flex="100"
5872
md-placeholder="MM/DD/YYYY"
5973
is-open="dateToOpened"
6074
ng-click="dateToOpened = true"
@@ -63,71 +77,81 @@
6377
ng-change="gridActions.filter()"></md-datepicker>
6478
</div>
6579
</div>
80+
<hr class="layout-margin">
6681
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
67-
<div class="controls-wrap clearfix">
68-
<strong class="items">Found: {{filtered.length}} items</strong>
82+
<div layout-gt-xs="row" layout-xs="column" layout-align="center" class="layout-padding">
83+
<div flex-gt-xs="25" flex-xs="100" layout="row" layout-align="start center">
84+
<strong>Found: {{filtered.length}} items</strong>
85+
</div>
86+
<div flex-gt-xs="75" flex-xs="100">
87+
<div layout="row" layout-align="end center">
88+
<grid-pagination max-size="5"
89+
boundary-links="true"
90+
class="pagination-sm"
91+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
92+
total-items="paginationOptions.totalItems"
93+
ng-model="paginationOptions.currentPage"
94+
ng-change="reloadGrid()"
95+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
96+
</div>
97+
</div>
98+
</div>
99+
<div class="layout-padding">
100+
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
101+
<thead>
102+
<tr>
103+
<th sortable="code" class="sortable mdl-data-table__cell--non-numeric" >
104+
Order #
105+
</th>
106+
<th class="st-sort-disable th-dropdown">
107+
<md-select filter-by="statusDisplay"
108+
filter-type="select"
109+
ng-model="status"
110+
placeholder="Status"
111+
ng-change="filter()">
112+
<md-option value="">All Statuses</md-option>
113+
<md-option ng-repeat="option in statusOptions track by option.value"
114+
value="{{option.value}}">
115+
{{option.text}}
116+
</md-option>
117+
</md-select>
118+
</th>
119+
<th sortable="placed" class="sortable">
120+
Date Placed
121+
</th>
122+
<th sortable='total.value' class="sortable">
123+
Total
124+
</th>
125+
</tr>
126+
</thead>
127+
<tbody>
128+
<tr grid-item>
129+
<td class="mdl-data-table__cell--non-numeric">
130+
<span ng-bind="item.code"></span>
131+
</td>
132+
<td ng-bind="item.statusDisplay"></td>
133+
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
134+
<td ng-bind="item.total.formattedValue"></td>
135+
</tr>
136+
</tbody>
137+
</table>
138+
</div>
139+
<div layout="row" layout-align="end center" class="layout-padding">
69140
<grid-pagination max-size="5"
70141
boundary-links="true"
71142
class="pagination-sm"
72143
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
73144
total-items="paginationOptions.totalItems"
74145
ng-model="paginationOptions.currentPage"
75146
ng-change="reloadGrid()"
147+
previous-text="‹" next-text="›" first-text="«" last-text="»"
76148
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
77149
</div>
78-
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
79-
<thead>
80-
<tr>
81-
<th sortable="code" class="sortable">
82-
Order #
83-
</th>
84-
<th class="st-sort-disable th-dropdown">
85-
<md-select filter-by="statusDisplay"
86-
filter-type="select"
87-
ng-model="status"
88-
placeholder="Status"
89-
ng-change="filter()">
90-
<md-option value="">All Statuses</md-option>
91-
<md-option ng-repeat="option in statusOptions track by option.value"
92-
value="{{option.value}}">
93-
{{option.text}}
94-
</md-option>
95-
</md-select>
96-
</th>
97-
<th sortable="placed" class="sortable">
98-
Date Placed
99-
</th>
100-
<th sortable='total.value' class="sortable">
101-
Total
102-
</th>
103-
</tr>
104-
</thead>
105-
<tbody>
106-
<tr grid-item>
107-
<td>
108-
<span ng-bind="item.code"></span>
109-
</td>
110-
<td ng-bind="item.statusDisplay" class="mdl-data-table__cell--non-numeric"></td>
111-
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
112-
<td ng-bind="item.total.formattedValue"></td>
113-
</tr>
114-
</tbody>
115-
</table>
116-
<div class="controls-wrap">
117-
<grid-pagination max-size="5"
118-
boundary-links="true"
119-
class="pagination-sm"
120-
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
121-
total-items="paginationOptions.totalItems"
122-
ng-model="paginationOptions.currentPage"
123-
ng-change="reloadGrid()"
124-
previous-text="‹" next-text="›" first-text="«" last-text="»"
125-
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
126-
</div>
127-
<div class="controls-wrap">
150+
<div layout="row" layout-align="end center" class="layout-padding">
128151
<div grid-item-per-page="10, 25, 50, 75"></div>
129152
</div>
130153
</div>
154+
<hr class="layout-margin">
131155
</div>
132156
</md-content>
133157
</div>

‎demo/material/css/angular-data-grid.material.css‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
1-
th:focus,
21
a:focus {
32
outline: none; }
43

54
.mdl-data-table {
6-
margin: 0 auto 20px;
7-
min-width: 700px; }
5+
width: 100%; }
6+
7+
.md-errors-spacer {
8+
display: none; }
89

910
.mdl-data-table tr {
1011
transition: none !important; }
1112

12-
.max-width {
13-
max-width: 1170px;
14-
margin: 0 auto;
15-
padding: 0 16px;
16-
box-sizing: border-box; }
17-
18-
.controls-wrap {
19-
max-width: 700px;
20-
margin: 0 auto 20px;
21-
text-align: right; }
22-
2313
th md-select {
2414
margin: 0; }
2515

26-
.items {
27-
float: left;
28-
line-height: 30px; }
16+
.layout-padding > .controls {
17+
padding: 0; }
18+
19+
md-datepicker {
20+
margin-bottom: 18px; }
21+
22+
.md-datepicker-label {
23+
padding-left: 64px;
24+
line-height: 14px;
25+
color: rgba(0, 0, 0, 0.26); }
2926

30-
.md-datepicker-input {
31-
width: 300px; }
27+
.md-datepicker-input-container {
28+
width: calc(100% - 76px); }
3229

3330
.pagination {
3431
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

‎demo/material/scss/angular-data-grid.material.scss‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
11
@import 'angular-data-grid.variables';
22

3-
th:focus,
43
a:focus {
54
outline: none;
65
}
76
.mdl-data-table {
8-
margin: 0 auto 20px;
9-
min-width: 700px;
7+
width: 100%;
8+
}
9+
.md-errors-spacer {
10+
display: none;
1011
}
1112
.mdl-data-table tr {
1213
transition: none !important;
1314
}
14-
.max-width {
15-
max-width: 1170px;
16-
margin: 0 auto;
17-
padding: 0 16px;
18-
box-sizing: border-box;
19-
}
20-
.controls-wrap {
21-
max-width: 700px;
22-
margin: 0 auto 20px;
23-
text-align: right;
24-
}
2515
th md-select {
2616
margin: 0;
2717
}
28-
.items {
29-
float: left;
30-
line-height: 30px;
18+
.layout-padding > .controls {
19+
padding: 0;
20+
}
21+
md-datepicker {
22+
margin-bottom: 18px;
23+
}
24+
.md-datepicker-label {
25+
padding-left: 64px;
26+
line-height: 14px;
27+
color: rgba(0,0,0,0.26);
3128
}
32-
.md-datepicker-input {
33-
width: 300px;
29+
.md-datepicker-input-container {
30+
width: calc(100% - 76px);
3431
}
3532
.pagination {
3633
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

0 commit comments

Comments
 (0)