Skip to content

Commit 6b0995b

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
update meterial html
1 parent ef7bcc8 commit 6b0995b

File tree

4 files changed

+41
-60
lines changed

4 files changed

+41
-60
lines changed

‎demo/material.html‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -36,64 +36,60 @@
3636
<md-content layout-padding layout="row" layout-align="center">
3737
<div flex-gt-md="60" flex-md="80" flex-xs="100">
3838
<div>
39-
<h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Material styling</h3>
40-
<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>
39+
<h4>Angular Data Grid sample using out-of-box Angular Material styling</h4>
40+
<p>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>
4141
</div>
42-
<hr class="layout-margin">
43-
<div layout-gt-sm="row" layout-sm="column" layout-align="center" class="layout-padding">
44-
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="row" layout-align="center start">
45-
<md-input-container class="md-block flex-gt-xs flex-xs">
46-
<label for="order" class="md-no-float">Search By Order #</label>
42+
<hr>
43+
<div layout-gt-sm="row" layout-sm="column" layout-align="stretch center">
44+
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="center start">
45+
<md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
4746
<input ng-model="code"
4847
class="md-input"
4948
ng-change="gridActions.filter()"
5049
id="order"
50+
placeholder="Search by Order #"
5151
filter-by="code"
5252
filter-type="text"
5353
aria-invalid="false">
5454
</md-input-container>
5555
</div>
56-
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="column" layout-align="start stretch">
57-
<label class="md-datepicker-label">From</label>
56+
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="start center">
5857
<md-datepicker ng-model="dateFrom"
5958
flex="100"
60-
md-placeholder="MM/DD/YYYY"
59+
md-placeholder="From"
6160
is-open="dateFromOpened"
6261
ng-click="dateFromOpened = true"
6362
filter-by="placed"
6463
filter-type="dateFrom"
6564
ng-change="gridActions.filter()"></md-datepicker>
6665
</div>
67-
<div class="controls" flex-gt-sm="33" flex-sm="100" layout="column" layout-align="start stretch">
68-
<label class="md-datepicker-label">To</label>
66+
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="start center">
6967
<md-datepicker ng-model="dateTo"
7068
flex="100"
71-
md-placeholder="MM/DD/YYYY"
69+
md-placeholder="To"
7270
is-open="dateToOpened"
7371
ng-click="dateToOpened = true"
7472
filter-by="placed"
7573
filter-type="dateTo"
7674
ng-change="gridActions.filter()"></md-datepicker>
7775
</div>
7876
</div>
79-
<hr class="layout-margin">
8077
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
81-
<div layout-gt-sm="row" layout-sm="column" layout-align="center" class="layout-padding">
78+
<div layout-gt-sm="row" layout-sm="column" layout-align="center">
8279
<div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
8380
<span>{{filtered.length}} items total</span>
8481
</div>
8582
<div flex-gt-sm="75" flex-xs="100">
8683
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
8784
<grid-pagination max-size="5"
8885
boundary-links="true"
89-
class="pagination"
86+
class="pagination mdl-shadow--2dp"
9087
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
9188
total-items="paginationOptions.totalItems"
9289
ng-model="paginationOptions.currentPage"
9390
ng-change="reloadGrid()"
9491
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
9592
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
96-
<label>Items per page</label>
9793
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
9894
<md-option>10</md-option>
9995
<md-option>25</md-option>
@@ -104,7 +100,7 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
104100
</div>
105101
</div>
106102
</div>
107-
<div class="layout-padding">
103+
<div>
108104
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
109105
<thead>
110106
<tr>
@@ -144,7 +140,7 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
144140
</tbody>
145141
</table>
146142
</div>
147-
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center" class="layout-padding">
143+
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
148144
<grid-pagination max-size="5"
149145
boundary-links="true"
150146
class="pagination"
@@ -154,7 +150,6 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
154150
ng-change="reloadGrid()"
155151
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
156152
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
157-
<label>Items per page</label>
158153
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
159154
<md-option>10</md-option>
160155
<md-option>25</md-option>
@@ -164,14 +159,12 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
164159
</md-input-container>
165160
</div>
166161
</div>
167-
<hr class="layout-margin">
168-
<div>
169-
<md-button class="md-raised md-primary layout-margin" ng-click="showCode = !showCode">CodePen</md-button>
170-
<div ng-show="showCode" class="layout-margin">
171-
<p data-height="768" data-theme-id="21603" data-slug-hash="jWBaOX" data-default-tab="html" data-user="IvanBisultanov" class='codepen'>See the Pen <a
172-
href='http://codepen.io/IvanBisultanov/pen/jWBaOX'>jWBaOX</a> by IvanBisultanov (<a href='http://codepen.io/IvanBisultanov'>@IvanBisultanov</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
173-
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
174-
</div>
162+
<hr>
163+
<md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
164+
<div ng-show="showCode" class="codepen-wtap">
165+
<p data-height="768" data-theme-id="21603" data-slug-hash="jWBaOX" data-default-tab="html" data-user="IvanBisultanov" class='codepen'>See the Pen <a
166+
href='http://codepen.io/IvanBisultanov/pen/jWBaOX'>jWBaOX</a> by IvanBisultanov (<a href='http://codepen.io/IvanBisultanov'>@IvanBisultanov</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
167+
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
175168
</div>
176169
<hr>
177170
</div>

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

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,27 @@ th:focus,
22
a:focus {
33
outline: none; }
44

5+
.codepen-wtap {
6+
margin-top: 15px; }
7+
58
.mdl-data-table {
69
width: 100%; }
10+
.mdl-data-table th {
11+
cursor: pointer; }
712

813
.mdl-data-table tr {
914
transition: none !important; }
1015

1116
th md-select {
1217
margin: 0; }
1318

14-
.layout-padding > .controls {
15-
padding: 0; }
16-
17-
md-datepicker {
18-
margin-bottom: 18px; }
19-
20-
.md-datepicker-label {
21-
padding-left: 64px;
22-
line-height: 14px;
23-
color: rgba(0, 0, 0, 0.26); }
19+
.md-errors-spacer {
20+
display: none; }
2421

2522
.md-datepicker-input-container {
26-
width: calc(100% - 76px); }
27-
28-
.items-per-page {
29-
width: 120px; }
23+
width: 100%; }
3024

3125
.pagination {
32-
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);
3326
padding: 0;
3427
font-size: 0;
3528
display: inline-block; }

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,39 @@ th:focus,
44
a:focus {
55
outline: none;
66
}
7+
.codepen-wtap {
8+
margin-top: 15px;
9+
}
710
.mdl-data-table {
811
width: 100%;
12+
th {
13+
cursor: pointer;
14+
}
915
}
1016
.mdl-data-table tr {
1117
transition: none !important;
1218
}
1319
th md-select {
1420
margin: 0;
1521
}
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);
22+
.md-errors-spacer {
23+
display: none;
2624
}
2725
.md-datepicker-input-container {
28-
width: calc(100% - 76px);
29-
}
30-
.items-per-page {
31-
width: 120px;
26+
width: 100%;
3227
}
3328
.pagination {
34-
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);
3529
padding: 0;
3630
font-size: 0;
3731
display: inline-block;
3832
& > li{
3933
display: inline-block;
4034
vertical-align: middle;
4135
height: 30px;
42-
border: 1px solid #ddd;
36+
border: 1px solid $foregroundPagination;
4337
border-left: 0;
4438
&:first-child {
45-
border-left: 1px solid #ddd;
39+
border-left: 1px solid $foregroundPagination;
4640
border-radius: 2px 0 0 2px;
4741
}
4842
&:last-child {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
$backgroundActive: rgb(63, 81, 181);
22
$foregroundActive: #fff;
3+
$foregroundPagination: #ddd;
34
$foregroundDefault: #444;
45
$backgroundIcons: #333;

0 commit comments

Comments
 (0)