tweaked pagination styling & cleanup some code

Author: Ghislain Beaulac

README.md

@@ -31,10 +31,9 @@ This is a work in progress, but so far here are some of the features that `angul
 - Integrated Plugins.
     - Column Picker (show/hide any column by doing `right+click` in the header, click [here to see print screen](/screenshots/columnPicker.png)).
     - ... more to come
-- Server side (backend) services
-    - Filtering, Sorting, Pagination
-      - [GraphQL](https://github.com/ghiscoding/Angular-Slickgrid/wiki/GraphQL)
-      - [OData](https://github.com/ghiscoding/Angular-Slickgrid/wiki/OData)
+- Server side (backend) Services (filtering, sorting, pagination)
+    - [GraphQL](https://github.com/ghiscoding/Angular-Slikgrid/wiki/GraphQL)
+    - [OData](https://github.com/ghiscoding/Angular-Slickgrid/wiki/OData)
 - Some Features of SlickGrid itself which are working out of the gate
   - Sort/Multi-Sort (client/server side)
   - Header Row with Filters (currently support `Input` and `Select` dropdown, multi-select is planned)

src/app/app.component.html

@@ -25,9 +25,6 @@
       <li routerLinkActive="active">
         <a [routerLink]="['/clientside']">Client Side Sort/Filter</a>
       </li>
-      <li routerLinkActive="active">
-        <a [routerLink]="['/backend']">Backend Server</a>
-      </li>
       <li routerLinkActive="active">
         <a [routerLink]="['/odata']">Backend Server with OData</a>
       </li>

src/app/examples/grid-graphql.component.ts

@@ -69,7 +69,6 @@ export class GridGraphqlComponent implements OnInit {
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (response) => {
-          console.log(response);
           this.displaySpinner(false);
           this.getCustomerCallback(response);
         },

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -163,7 +163,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
         // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
         setTimeout(() => {
           this.resizer.resizeGrid(this.grid, this._gridOptions);
-          this.grid.autosizeColumns();
+          // this.grid.autosizeColumns();
         });
       }
     }

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -50,13 +50,14 @@ $header-border-right:                   0 none !default;
 $header-border-bottom:                  0 none !default;
 $header-border-left:                    0 none !default;
 $header-resizable-hover:                1px solid #d0d0d0 !default;
-$header-scroll-width-to-remove:         16px !default;                        // without this, the header (which doesn't have scrolling) will be wider than the data viewport
+$header-scroll-width-to-remove:         18px !default;                        // without this, the header (which doesn't have scrolling) will be wider than the data viewport
 
 /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */
 $icon-font-family:                      "FontAwesome" !default;               // or Glyphicons Halflings */
 $icon-font-size:                        14px !default;
 $icon-sort-asc:                         "\f0d8" !default;
 $icon-sort-desc:                        "\f0d7" !default;
+$icon-sort-color:                       rgb(76, 128, 190) !default;
 $table-background:                      transparent !default;
 $container-border:                      0px solid $border-color !default;
 $link-color:        				            #08c !default;
@@ -75,8 +76,8 @@ $column-picker-close-border:            1px solid #9c9c9c !default;
 $column-picker-close-opacity:           0.9 !default;
 
 /* pagination variables */
-$pagination-text-color:                 #808080 !default;
-$pagination-border-color:               #bbb !default;
+$pagination-button-hover-color:         #E6E6E6 !default;
+$pagination-border-color:               #ddd !default;
 $pagination-icon-seek-first:            "\f100" !default;
 $pagination-icon-seek-end:              "\f101" !default;
 $pagination-icon-seek-next:             "\f105" !default;
@@ -87,3 +88,4 @@ $pagination-border-top:                 0 none !default;
 $pagination-border-right:               0 none !default;
 $pagination-border-bottom:              0 none !default;
 $pagination-border-left:                0 none !default;
+$pagination-text-color:                 #808080 !default;

src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss

@@ -176,10 +176,11 @@
       .slick-sort-indicator {
         position: absolute;
         display: inline-block;
+        color: $icon-sort-color;
         width: 8px;
         height: 5px;
         left: auto;
-        right: 7px;
+        right: 10px;
         top: ((15px * $header-row-count) - 15px);
       }
 

src/app/modules/angular-slickgrid/styles/slick-pagination.scss

@@ -1,5 +1,5 @@
 /* pagination/pagination variables */
-@import './variables.scss';
+@import './variables';
 
 /* Pagination styling */
 .slick-pagination {
@@ -61,6 +61,9 @@
 
           border-color: $pagination-button-border;
         }
+        a[class*="icon-seek-"]:hover {
+          background-color: $pagination-button-hover-color;
+        }
 
         .icon-seek-first {
           &:before {