Skip to content

Commit ef7bcc8

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
add codepen and items-per-page select
1 parent bba1960 commit ef7bcc8

File tree

3 files changed

+42
-13
lines changed

3 files changed

+42
-13
lines changed

‎demo/material.html‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head lang="en">
44
<meta charset="UTF-8">
5-
<title>Angular Data Grid</title>
5+
<title>Angular Data Grid - Material Design</title>
66
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
88
<link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
@@ -78,20 +78,29 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
7878
</div>
7979
<hr class="layout-margin">
8080
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
81-
<div layout-gt-xs="row" layout-xs="column" layout-align="center" class="layout-padding">
82-
<div flex-gt-xs="25" flex-xs="100" layout="row" layout-align="start center">
83-
<strong>Found: {{filtered.length}} items</strong>
81+
<div layout-gt-sm="row" layout-sm="column" layout-align="center" class="layout-padding">
82+
<div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
83+
<span>{{filtered.length}} items total</span>
8484
</div>
85-
<div flex-gt-xs="75" flex-xs="100">
86-
<div layout="row" layout-align="end center">
85+
<div flex-gt-sm="75" flex-xs="100">
86+
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
8787
<grid-pagination max-size="5"
8888
boundary-links="true"
89-
class="pagination-sm"
89+
class="pagination"
9090
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
9191
total-items="paginationOptions.totalItems"
9292
ng-model="paginationOptions.currentPage"
9393
ng-change="reloadGrid()"
9494
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
95+
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
96+
<label>Items per page</label>
97+
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
98+
<md-option>10</md-option>
99+
<md-option>25</md-option>
100+
<md-option>50</md-option>
101+
<md-option>75</md-option>
102+
</md-select>
103+
</md-input-container>
95104
</div>
96105
</div>
97106
</div>
@@ -135,22 +144,36 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
135144
</tbody>
136145
</table>
137146
</div>
138-
<div layout="row" layout-align="end center" class="layout-padding">
147+
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center" class="layout-padding">
139148
<grid-pagination max-size="5"
140149
boundary-links="true"
141-
class="pagination-sm"
150+
class="pagination"
142151
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
143152
total-items="paginationOptions.totalItems"
144153
ng-model="paginationOptions.currentPage"
145154
ng-change="reloadGrid()"
146-
previous-text="‹" next-text="›" first-text="«" last-text="»"
147155
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
148-
</div>
149-
<div layout="row" layout-align="end center" class="layout-padding">
150-
<div grid-item-per-page="10, 25, 50, 75"></div>
156+
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
157+
<label>Items per page</label>
158+
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
159+
<md-option>10</md-option>
160+
<md-option>25</md-option>
161+
<md-option>50</md-option>
162+
<md-option>75</md-option>
163+
</md-select>
164+
</md-input-container>
151165
</div>
152166
</div>
153167
<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>
175+
</div>
176+
<hr>
154177
</div>
155178
</md-content>
156179
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ md-datepicker {
2525
.md-datepicker-input-container {
2626
width: calc(100% - 76px); }
2727

28+
.items-per-page {
29+
width: 120px; }
30+
2831
.pagination {
2932
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);
3033
padding: 0;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ md-datepicker {
2727
.md-datepicker-input-container {
2828
width: calc(100% - 76px);
2929
}
30+
.items-per-page {
31+
width: 120px;
32+
}
3033
.pagination {
3134
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);
3235
padding: 0;

0 commit comments

Comments
 (0)