#227 improved styling support for columns

- support for custom css class for entire column (th + td) including
cell values
- demo for responsive columns behaviour

demo-shell-ng2/app/components/files/files.component.css

@@ -0,0 +1,17 @@
+/* small desktop */
+@media all and (max-width: 1200px) {}
+
+/* tablet */
+@media all and (max-width: 1024px) {}
+
+    /* mobile phone */
+@media all and (max-width: 768px) {
+
+    alfresco-document-list >>> th.desktop-only .cell-value {
+        display: none;
+    }
+
+    alfresco-document-list >>> td.desktop-only .cell-value {
+        display: none;
+    }
+}

demo-shell-ng2/app/components/files/files.component.html

@@ -31,13 +31,15 @@
             -->
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                    source="createdByUser.displayName">
+                    source="createdByUser.displayName"
+                    class="desktop-only">
             </content-column>
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
                     source="createdAt"
                     type="date"
-                    format="medium">
+                    format="medium"
+                    class="desktop-only">
             </content-column>
         </content-columns>
 

demo-shell-ng2/app/components/files/files.component.ts

@@ -36,6 +36,7 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'files-component',
     templateUrl: './files.component.html',
+    styleUrls: ['./files.component.css'],
     directives: [
         DOCUMENT_LIST_DIRECTIVES,
         MDL,

ng2-components/ng2-alfresco-documentlist/README.md

@@ -519,6 +519,64 @@ export class MyView {
 
 ## Advanced usage and customization
 
+### Hiding columns on small screens
+
+You can hide columns on small screens by means of custom CSS rules:
+
+```css
+@media all and (max-width: 768px) {
+
+    alfresco-document-list >>> th.desktop-only .cell-value {
+        display: none;
+    }
+
+    alfresco-document-list >>> td.desktop-only .cell-value {
+        display: none;
+    }
+}
+```
+
+Now you can declare columns and assign `desktop-only` class where needed:
+
+```html
+<alfresco-document-list ...>
+    <content-columns>
+        
+        <!-- always visible columns -->
+        
+        <content-column source="$thumbnail" type="image"></content-column>
+        <content-column 
+                title="Name" 
+                source="name" 
+                class="full-width name-column">
+        </content-column>
+        
+        <!-- desktop-only columns -->
+        
+        <content-column
+                title="Created by"
+                source="createdByUser.displayName"
+                class="desktop-only">
+        </content-column>
+        <content-column
+                title="Created on"
+                source="createdAt"
+                type="date"
+                format="medium"
+                class="desktop-only">
+        </content-column>
+    </content-columns>
+</alfresco-document-list>
+```
+
+**Desktop View**
+
+![Responsive Desktop](docs/assets/responsive-desktop.png)
+
+**Mobile View**
+
+![Responsive Mobile](docs/assets/responsive-mobile.png)
+
 ### Custom 'empty folder' template
 
 By default Document List provides the following content for the empty folder:
@@ -628,19 +686,19 @@ npm install
 npm run build
 ```
 
-##Build the files and keep watching for changes
+### Build the files and keep watching for changes
 
-    ```sh
-    $ npm run build:w
-    ```
+```sh
+$ npm run build:w
+```
     
-## Running unit tests
+### Running unit tests
 
 ```sh
 npm test
 ```
 
-## Running unit tests in browser
+### Running unit tests in browser
 
 ```sh
 npm test-browser
@@ -649,7 +707,7 @@ npm test-browser
 This task rebuilds all the code, runs tslint, license checks and other quality check tools 
 before performing unit testing. 
 
-## Code coverage
+### Code coverage
 
 ```sh
 npm run coverage

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -15,8 +15,8 @@
             [class.mdl-data-table__header--sorted-ascending]="sorting.key === col.source && sorting.direction === 'asc'"
             [class.mdl-data-table__header--sorted-descending]="sorting.key === col.source && sorting.direction === 'desc'"
             (click)="onColumnHeaderClick(col)">
-            <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
-            <span *ngIf="col.title">{{col.title}}</span>
+            <span *ngIf="col.srTitle" class="cell-value sr-only">{{col.srTitle}}</span>
+            <span *ngIf="col.title" class="cell-value">{{col.title}}</span>
         </th>
         <!-- Actions -->
         <th>