mobile enhancements (#550)

* hide menu bar elements on small screens

* show less columns on handsets

* reduce pagination for handsets

src/app/components/libraries/libraries.component.html

@@ -60,6 +60,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="visibility"
                         title="APP.DOCUMENT_LIST.COLUMNS.STATUS">
                         <ng-template let-value="value">

src/app/components/libraries/libraries.component.ts

@@ -26,6 +26,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ShareDataRow } from '@alfresco/adf-content-services';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -40,12 +41,15 @@ import { ExtensionService } from '../../extensions/extension.service';
 })
 export class LibrariesComponent extends PageComponent implements OnInit {
 
+    isSmallScreen = false;
+
     constructor(private route: ActivatedRoute,
                 content: ContentManagementService,
                 private contentApi: ContentApiService,
                 store: Store<AppStore>,
                 extensions: ExtensionService,
-                private router: Router) {
+                private router: Router,
+                private breakpointObserver: BreakpointObserver) {
         super(store, extensions, content);
     }
 
@@ -56,7 +60,16 @@ export class LibrariesComponent extends PageComponent implements OnInit {
             this.content.libraryDeleted.subscribe(() => this.reload()),
             this.content.libraryCreated.subscribe((node: SiteEntry) => {
                 this.navigate(node.entry.guid);
-            })
+            }),
+
+            this.breakpointObserver
+                .observe([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape
+                ])
+                .subscribe(result => {
+                    this.isSmallScreen = result.matches;
+                })
         );
     }