diff --git a/demo/demo.css b/demo/demo.css index 78558f5..d72570b 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -1,6 +1,9 @@ *, *:before, *:after { box-sizing: border-box; } +:focus { + outline: none; } + body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -20,7 +23,8 @@ h1 { padding-left: 15px; } .b-change-theme { - padding: 20px; } + padding: 20px; + margin-bottom: 20px; } .b-change-theme__link { font-size: 16px; line-height: 20px; @@ -61,49 +65,33 @@ h1 { th.sortable { line-height: 24px; position: relative; } - th.sortable.sort-descent:before { + th.sortable.sort-descent:before, th.sortable.sort-descent:after, th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { content: ''; position: absolute; + margin: auto 0; } + th.sortable.sort-descent:before, th.sortable.sort-ascent:before { left: 12px; width: 2px; background: #333; - height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } - th.sortable.sort-descent:after { - content: ''; - position: absolute; + height: 12px; } + th.sortable.sort-descent:after, th.sortable.sort-ascent:after { left: 9px; border-top: 2px solid #333; border-left: 2px solid #333; transform-origin: center; - transform: rotate(-135deg); height: 8px; - width: 8px; - top: 6px; - bottom: 0; - margin: auto 0; } + width: 8px; } + th.sortable.sort-descent:before, th.sortable.sort-descent:after { + bottom: 0; } + th.sortable.sort-descent:before { + top: 0; } + th.sortable.sort-descent:after { + transform: rotate(-135deg); + top: 6px; } + th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { + top: 0; } th.sortable.sort-ascent:before { - content: ''; - position: absolute; - left: 12px; - width: 2px; - background: #333; - height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } + bottom: 0; } th.sortable.sort-ascent:after { - content: ''; - position: absolute; - left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; - transform-origin: center; transform: rotate(45deg); - height: 8px; - width: 8px; - top: 0; - bottom: 6px; - margin: auto 0; } + bottom: 6px; } diff --git a/demo/demoApp.js b/demo/demoApp.js index 0328a1b..5122559 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,4 +1,5 @@ -angular.module('myApp', ['dataGrid', 'pagination']) +angular + .module('myApp', ['dataGrid', 'pagination', 'ngMaterial']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { $scope.gridOptions = { @@ -10,7 +11,6 @@ angular.module('myApp', ['dataGrid', 'pagination']) .factory('myAppFactory', function () { return { getData: function () { - //return $http.get(root + '/posts', {}); return [{ "total": { "currencyIso": "USD", diff --git a/demo/index.html b/demo/index.html index b0fc361..d3b2211 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,6 +3,7 @@ Flat JSON format for data tables + @@ -11,140 +12,124 @@

Angular Data Grid

- Material Design Bootstrap + Material Design
-
-
-
-
- -
-
-
-
-
- - -
- - - - -
-
-
- - -
- - - - -
-
-
-
- Clear Dates -
+
+
+ + + + + + + + + + + + +
+
+
+ + found : {{filtered.length}} items +
-
-
- - found : {{filtered.length}} items - + + + + + + + + + + + + + + + + + + + + + + +
+ Order # + + Date Placed + + Purchase Order # + - - - - - - - - - - - - - - - - - - - - - - - -
- Order # - - Date Placed - - Purchase Order # - - - - Total - -
- - - View - Order -
-
+ + + + All Statuses + + {{option.text}} + + + +
+ Total + +
+ + + View + Order +
+
+ Angular Data Grid ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"> + +
-
+
+
- + + + + diff --git a/dist/material.css b/dist/material.css index 823b576..3e7484c 100644 --- a/dist/material.css +++ b/dist/material.css @@ -1,91 +1,41 @@ table { border-collapse: collapse; border-spacing: 0; + width: 100%; + font-size: 16px; margin: 8px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } -:focus { - outline: none; } - -.pagination { - display: inline-block; - box-sizing: border-box; } - -.pagination > li { - display: inline-block; - vertical-align: middle; - width: auto; - height: 30px; - position: relative; - border-radius: 2px; - box-sizing: border-box; } - -.pagination a { - color: #444; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - box-sizing: border-box; } - .pagination a .md-ripple-container { - border-radius: 2px; } - -.pagination-none-svg svg { - display: none !important; } - -.pagination-none-svg .pagination-prev a, -.pagination-none-svg .pagination-next a, -.pagination-none-svg .pagination-first a, -.pagination-none-svg .pagination-last a { - width: 30px; - text-align: center; - line-height: 24px; } - -.pagination-page { - transition: background .1s ease-out, color .1s ease-out; } - .pagination-page.active { - background: #106cc8; } - .pagination-page.active a { - color: #fff; } - .pagination { transition: background .1s ease-out, color .1s ease-out; } + .pagination > li { + display: inline-block; + vertical-align: middle; + height: 30px; + position: relative; + border-radius: 2px; } + .pagination a { + color: #444; + font-size: 16px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } .pagination .active { background: #106cc8; } .pagination .active a { color: #fff; } + .pagination-page { + transition: background .1s ease-out, color .1s ease-out; } + .pagination-page.active { + background: #106cc8; } + .pagination-page.active a { + color: #fff; } -.table td { +.table td, .table th { border-top: 1px rgba(0, 0, 0, 0.12) solid; padding: 12px 24px; } -.table th { - padding: 12px 24px; - border-top: 1px rgba(0, 0, 0, 0.12) solid; } - -th.sortable { - line-height: 24px; - padding-right: 31px; } - th.sortable svg { - height: 18px; - width: 18px; - margin: 0 4px; - transition: fill .25s,-webkit-transform .25s; - transition: fill .25s,transform .25s; - vertical-align: middle; - display: none !important; } - th.sortable.sort-descent { - padding-right: 0; } - th.sortable.sort-descent svg { - display: inline-block !important; } - th.sortable.sort-ascent { - padding-right: 0; } - th.sortable.sort-ascent svg { - display: inline-block !important; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } - .items-per-page .active { background: #106cc8; } .items-per-page .active a { @@ -93,3 +43,57 @@ th.sortable { .items-per-page a { cursor: pointer; } + +.pagination-prev a, +.pagination-next a, +.pagination-first a, +.pagination-last a { + font-size: 0; + width: 30px; + position: relative; } + .pagination-prev a:before, + .pagination-next a:before, + .pagination-first a:before, + .pagination-last a:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + content: ''; + display: block; + width: 10px; + height: 10px; + transform-origin: center; + border-left: 2px solid #333; + border-bottom: 2px solid #333; } + +.pagination-first a:after, +.pagination-last a:after { + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + width: 2px; + height: 14px; + background: #333; } + +.pagination-prev a:before { + transform: rotate(45deg); } + +.pagination-next a:before { + transform: rotate(-135deg); } + +.pagination-first a:before { + transform: rotate(45deg); } + +.pagination-first a:after { + left: 4px; } + +.pagination-last a:before { + transform: rotate(-135deg); } + +.pagination-last a:after { + right: 4px; } diff --git a/index.html b/index.html index 1ad4606..6f1283e 100644 --- a/index.html +++ b/index.html @@ -118,6 +118,8 @@

Angular Data Grid

ng-model="status" ng-change="filter()"> + @@ -128,18 +130,6 @@

Angular Data Grid

- - - - - - - - - - - - @@ -178,8 +168,11 @@

Angular Data Grid

- + + + + diff --git a/src/css/demo.scss b/src/css/demo.scss index 05c77cc..961b684 100644 --- a/src/css/demo.scss +++ b/src/css/demo.scss @@ -1,6 +1,10 @@ +@import 'variables'; *, *:before, *:after { box-sizing: border-box; } +:focus { + outline: none; +} body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -21,6 +25,7 @@ h1 { } .b-change-theme { padding: 20px; + margin-bottom: 20px; &__link { font-size: 16px; line-height: 20px; @@ -56,6 +61,7 @@ h1 { } } } + .table { td { padding: 12px 24px !important; @@ -69,58 +75,53 @@ h1 { th.sortable { line-height: 24px; position: relative; - &.sort-descent { - &:before { + &.sort-descent, + &.sort-ascent { + &:before, + &:after { content: ''; position: absolute; + margin: auto 0; + } + &:before { left: 12px; width: 2px; - background: #333; + background: $backgroundIcons; height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } &:after { - content: ''; - position: absolute; left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; + border-top: 2px solid $backgroundIcons; + border-left: 2px solid $backgroundIcons; transform-origin:center; - transform: rotate(-135deg); height: 8px; width: 8px; - top: 6px; + } + } + &.sort-descent { + &:before, + &:after { bottom: 0; - margin: auto 0; + } + &:before { + top: 0; + } + &:after { + transform: rotate(-135deg); + top: 6px; } } &.sort-ascent { - &:before { - content: ''; - position: absolute; - left: 12px; - width: 2px; - background: #333; - height: 12px; + &:before, + &:after { top: 0; + } + &:before { bottom: 0; - margin: auto 0; } &:after { - content: ''; - position: absolute; - left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; - transform-origin:center; transform: rotate(45deg); - height: 8px; - width: 8px; - top: 0; bottom: 6px; - margin: auto 0; } } } \ No newline at end of file diff --git a/src/css/material.scss b/src/css/material.scss index b68987d..49c4557 100644 --- a/src/css/material.scss +++ b/src/css/material.scss @@ -2,117 +2,124 @@ table { border-collapse: collapse; border-spacing: 0; - + width: 100%; + font-size: 16px; margin: 8px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); } -:focus { - outline: none; -} .pagination { - display: inline-block; - box-sizing: border-box; -} -.pagination > li{ - display: inline-block; - vertical-align: middle; - width: auto; - height: 30px; - position: relative; - border-radius: 2px; - box-sizing: border-box; -} -.pagination a { - color: $textColor; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - box-sizing: border-box; - .md-ripple-container { + transition: background .1s ease-out, color .1s ease-out; + & > li{ + display: inline-block; + vertical-align: middle; + height: 30px; + position: relative; border-radius: 2px; } -} -.pagination-none-svg { - svg { - display: none !important; + a { + color: $foregroundDefault; + font-size: 16px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } - .pagination-prev, - .pagination-next, - .pagination-first, - .pagination-last { + .active { + background: $backgroundActive; a { - width: 30px; - text-align: center; - line-height: 24px; + color: $foregroundActive; } } -} -.pagination-page { - transition: background .1s ease-out, color .1s ease-out; - &.active { - background: $activeBg; - a { - color: $activeText; + &-page { + transition: background .1s ease-out, color .1s ease-out; + &.active { + background: $backgroundActive; + a { + color: $foregroundActive; + } } } } -.pagination { - transition: background .1s ease-out, color .1s ease-out; +.table { + td, th { + border-top: 1px rgba(0,0,0,.12) solid; + padding: 12px 24px; + } +} +.items-per-page { .active { - background: $activeBg; + background: $backgroundActive; a { - color: $activeText; + color: $foregroundActive; + } + } + a { + cursor: pointer; + } +} + +.pagination-prev, +.pagination-next, +.pagination-first, +.pagination-last { + a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + content: ''; + display: block; + width: 10px; + height: 10px; + transform-origin:center; + border-left: 2px solid $backgroundIcons; + border-bottom: 2px solid $backgroundIcons; } } } -.table { - td { - border-top: 1px rgba(0,0,0,.12) solid; - padding: 12px 24px; +.pagination-first, +.pagination-last { + a:after { + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + width: 2px; + height: 14px; + background: $backgroundIcons; } - th { - padding: 12px 24px; - border-top: 1px rgba(0,0,0,.12) solid; +} + +.pagination-prev a { + &:before { + transform: rotate(45deg); } } -th.sortable { - line-height: 24px; - svg { - height: 18px; - width: 18px; - margin: 0 4px; - transition: fill .25s,-webkit-transform .25s; - transition: fill .25s,transform .25s; - vertical-align: middle; - display: none !important; +.pagination-next a { + &:before { + transform: rotate(-135deg); } - padding-right: 31px; - &.sort-descent { - padding-right: 0; - svg { - display: inline-block !important; - } +} +.pagination-first a { + &:before { + transform: rotate(45deg); } - &.sort-ascent { - padding-right: 0; - svg { - display: inline-block !important; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } + &:after { + left: 4px; } } - -.items-per-page { - .active { - background: $activeBg; - a { - color: $activeText; - } +.pagination-last a { + &:before { + transform: rotate(-135deg); } - a { - cursor: pointer; + &:after { + right: 4px; } } \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss index 0ed9536..40d2f45 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,3 +1,4 @@ -$activeBg: rgb(16,108,200); -$activeText: #fff; -$textColor: #444; \ No newline at end of file +$backgroundActive: rgb(16,108,200); +$foregroundActive: #fff; +$foregroundDefault: #444; +$backgroundIcons: #333; \ No newline at end of file