diff --git a/src/app/components/current-user/current-user.component.theme.scss b/src/app/components/current-user/current-user.component.theme.scss
index 6a22fa665..449fad6f7 100644
--- a/src/app/components/current-user/current-user.component.theme.scss
+++ b/src/app/components/current-user/current-user.component.theme.scss
@@ -34,5 +34,11 @@
line-height: 1.43;
letter-spacing: -0.2px;
}
+
+ @media screen and ($mat-small) {
+ .current-user__full-name {
+ display: none;
+ }
+ }
}
}
diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html
index 7b029ca71..7fc5a0717 100644
--- a/src/app/components/favorites/favorites.component.html
+++ b/src/app/components/favorites/favorites.component.html
@@ -57,6 +57,7 @@
@@ -65,12 +66,14 @@
@@ -79,6 +82,7 @@
diff --git a/src/app/components/favorites/favorites.component.ts b/src/app/components/favorites/favorites.component.ts
index 33da9d6d8..7a3b2cc39 100644
--- a/src/app/components/favorites/favorites.component.ts
+++ b/src/app/components/favorites/favorites.component.ts
@@ -26,6 +26,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import {
MinimalNodeEntity,
MinimalNodeEntryEntity,
@@ -42,12 +43,15 @@ import { ExtensionService } from '../../extensions/extension.service';
templateUrl: './favorites.component.html'
})
export class FavoritesComponent extends PageComponent implements OnInit {
+ isSmallScreen = false;
+
constructor(
private router: Router,
store: Store,
extensions: ExtensionService,
private contentApi: ContentApiService,
- content: ContentManagementService
+ content: ContentManagementService,
+ private breakpointObserver: BreakpointObserver
) {
super(store, extensions, content);
}
@@ -60,7 +64,16 @@ export class FavoritesComponent extends PageComponent implements OnInit {
this.content.nodesRestored.subscribe(() => this.reload()),
this.content.folderEdited.subscribe(() => this.reload()),
this.content.nodesMoved.subscribe(() => this.reload()),
- this.content.favoriteRemoved.subscribe(() => this.reload())
+ this.content.favoriteRemoved.subscribe(() => this.reload()),
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
+ })
]);
}
diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html
index 6024a92f5..400c8e5b5 100644
--- a/src/app/components/files/files.component.html
+++ b/src/app/components/files/files.component.html
@@ -59,6 +59,7 @@
@@ -67,6 +68,7 @@
@@ -75,6 +77,7 @@
diff --git a/src/app/components/files/files.component.ts b/src/app/components/files/files.component.ts
index 98078cd80..32a506ae8 100644
--- a/src/app/components/files/files.component.ts
+++ b/src/app/components/files/files.component.ts
@@ -35,6 +35,7 @@ import { PageComponent } from '../page.component';
import { ContentApiService } from '../../services/content-api.service';
import { ExtensionService } from '../../extensions/extension.service';
import { SetCurrentFolderAction } from '../../store/actions';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
templateUrl: './files.component.html'
@@ -42,6 +43,7 @@ import { SetCurrentFolderAction } from '../../store/actions';
export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
isValidPath = true;
+ isSmallScreen = false;
private nodePath: PathElement[];
@@ -52,7 +54,8 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
private nodeActionsService: NodeActionsService,
private uploadService: UploadService,
content: ContentManagementService,
- extensions: ExtensionService) {
+ extensions: ExtensionService,
+ private breakpointObserver: BreakpointObserver) {
super(store, extensions, content);
}
@@ -95,6 +98,15 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
content.nodesRestored.subscribe(() => this.documentList.reload()),
uploadService.fileUploadComplete.debounceTime(300).subscribe(file => this.onFileUploadedEvent(file)),
uploadService.fileUploadDeleted.debounceTime(300).subscribe((file) => this.onFileUploadedEvent(file)),
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
+ })
]);
}
diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html
index f8b990203..89f09a7fc 100644
--- a/src/app/components/layout/layout.component.html
+++ b/src/app/components/layout/layout.component.html
@@ -23,9 +23,10 @@
-
-
-
+
+
+
+
diff --git a/src/app/components/layout/layout.component.scss b/src/app/components/layout/layout.component.scss
index bfe4ce972..679f37fcd 100644
--- a/src/app/components/layout/layout.component.scss
+++ b/src/app/components/layout/layout.component.scss
@@ -2,3 +2,15 @@
display: flex;
flex: 1;
}
+
+@media screen and (max-width: 599px) {
+ .adf-app-title {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 719px) {
+ .adf-app-logo {
+ display: none;
+ }
+}
diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts
index 6ee3e68ec..2eacd4790 100644
--- a/src/app/components/layout/layout.component.ts
+++ b/src/app/components/layout/layout.component.ts
@@ -23,24 +23,38 @@
* along with Alfresco. If not, see .
*/
-import { Component, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ OnDestroy,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { NodePermissionService } from '../../services/node-permission.service';
import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
import { Store } from '@ngrx/store';
import { AppStore } from '../../store/states';
-import { currentFolder, selectAppName, selectHeaderColor, selectLogoPath } from '../../store/selectors/app.selectors';
+import {
+ currentFolder,
+ selectAppName,
+ selectHeaderColor,
+ selectLogoPath
+} from '../../store/selectors/app.selectors';
import { takeUntil } from 'rxjs/operators';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
encapsulation: ViewEncapsulation.None,
+ host: { class: 'app-layout' }
})
export class LayoutComponent implements OnInit, OnDestroy {
- @ViewChild(SidenavViewsManagerDirective) manager: SidenavViewsManagerDirective;
+ @ViewChild(SidenavViewsManagerDirective)
+ manager: SidenavViewsManagerDirective;
onDestroy$: Subject = new Subject();
expandedSidenav: boolean;
@@ -51,10 +65,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
headerColor$: Observable;
logo$: Observable;
+ isSmallScreen = false;
+
constructor(
protected store: Store,
- private permission: NodePermissionService) {
-
+ private permission: NodePermissionService,
+ private breakpointObserver: BreakpointObserver
+ ) {
this.headerColor$ = store.select(selectHeaderColor);
this.appName$ = store.select(selectAppName);
this.logo$ = store.select(selectLogoPath);
@@ -69,11 +86,22 @@ export class LayoutComponent implements OnInit, OnDestroy {
this.manager.run(true);
- this.store.select(currentFolder)
+ this.store
+ .select(currentFolder)
.pipe(takeUntil(this.onDestroy$))
.subscribe(node => {
this.node = node;
- this.canUpload = node && this.permission.check(node, ['create']);
+ this.canUpload =
+ node && this.permission.check(node, ['create']);
+ });
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
});
}
diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html
index df0cb1239..fc15ea496 100644
--- a/src/app/components/libraries/libraries.component.html
+++ b/src/app/components/libraries/libraries.component.html
@@ -60,6 +60,7 @@
diff --git a/src/app/components/libraries/libraries.component.ts b/src/app/components/libraries/libraries.component.ts
index 47cfc302b..4b39dae75 100644
--- a/src/app/components/libraries/libraries.component.ts
+++ b/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,
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;
+ })
);
}
diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html
index 1bd4ae175..3ead747e6 100644
--- a/src/app/components/recent-files/recent-files.component.html
+++ b/src/app/components/recent-files/recent-files.component.html
@@ -58,6 +58,7 @@
@@ -66,12 +67,14 @@
diff --git a/src/app/components/recent-files/recent-files.component.ts b/src/app/components/recent-files/recent-files.component.ts
index f1c6af04e..1fc75c779 100644
--- a/src/app/components/recent-files/recent-files.component.ts
+++ b/src/app/components/recent-files/recent-files.component.ts
@@ -24,6 +24,7 @@
*/
import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { ContentManagementService } from '../../services/content-management.service';
import { PageComponent } from '../page.component';
@@ -35,10 +36,13 @@ import { ExtensionService } from '../../extensions/extension.service';
templateUrl: './recent-files.component.html'
})
export class RecentFilesComponent extends PageComponent implements OnInit {
+ isSmallScreen = false;
+
constructor(
store: Store,
extensions: ExtensionService,
- content: ContentManagementService
+ content: ContentManagementService,
+ private breakpointObserver: BreakpointObserver
) {
super(store, extensions, content);
}
@@ -49,7 +53,16 @@ export class RecentFilesComponent extends PageComponent implements OnInit {
this.subscriptions = this.subscriptions.concat([
this.content.nodesDeleted.subscribe(() => this.reload()),
this.content.nodesMoved.subscribe(() => this.reload()),
- this.content.nodesRestored.subscribe(() => this.reload())
+ this.content.nodesRestored.subscribe(() => this.reload()),
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
+ })
]);
}
diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html
index 323f2d3fa..b447f83d2 100644
--- a/src/app/components/shared-files/shared-files.component.html
+++ b/src/app/components/shared-files/shared-files.component.html
@@ -57,6 +57,7 @@
@@ -65,12 +66,14 @@
@@ -79,12 +82,14 @@
diff --git a/src/app/components/shared-files/shared-files.component.ts b/src/app/components/shared-files/shared-files.component.ts
index 1479dccc5..977ad5955 100644
--- a/src/app/components/shared-files/shared-files.component.ts
+++ b/src/app/components/shared-files/shared-files.component.ts
@@ -24,6 +24,7 @@
*/
import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ContentManagementService } from '../../services/content-management.service';
import { PageComponent } from '../page.component';
import { Store } from '@ngrx/store';
@@ -34,10 +35,13 @@ import { ExtensionService } from '../../extensions/extension.service';
templateUrl: './shared-files.component.html'
})
export class SharedFilesComponent extends PageComponent implements OnInit {
+ isSmallScreen = false;
+
constructor(
store: Store,
extensions: ExtensionService,
- content: ContentManagementService
+ content: ContentManagementService,
+ private breakpointObserver: BreakpointObserver
) {
super(store, extensions, content);
}
@@ -50,6 +54,15 @@ export class SharedFilesComponent extends PageComponent implements OnInit {
this.content.nodesMoved.subscribe(() => this.reload()),
this.content.nodesRestored.subscribe(() => this.reload()),
this.content.linksUnshared.subscribe(() => this.reload()),
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
+ })
]);
}
}
diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html
index be3bd82a2..b45488380 100644
--- a/src/app/components/trashcan/trashcan.component.html
+++ b/src/app/components/trashcan/trashcan.component.html
@@ -54,6 +54,7 @@
@@ -62,12 +63,14 @@
@@ -76,7 +79,7 @@
diff --git a/src/app/components/trashcan/trashcan.component.ts b/src/app/components/trashcan/trashcan.component.ts
index fddc50518..1a71090da 100644
--- a/src/app/components/trashcan/trashcan.component.ts
+++ b/src/app/components/trashcan/trashcan.component.ts
@@ -24,6 +24,7 @@
*/
import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ContentManagementService } from '../../services/content-management.service';
import { PageComponent } from '../page.component';
import { Store } from '@ngrx/store';
@@ -37,11 +38,13 @@ import { Observable } from 'rxjs/Observable';
templateUrl: './trashcan.component.html'
})
export class TrashcanComponent extends PageComponent implements OnInit {
+ isSmallScreen = false;
user$: Observable;
constructor(content: ContentManagementService,
extensions: ExtensionService,
- store: Store) {
+ store: Store,
+ private breakpointObserver: BreakpointObserver) {
super(store, extensions, content);
this.user$ = this.store.select(selectUser);
}
@@ -53,6 +56,15 @@ export class TrashcanComponent extends PageComponent implements OnInit {
this.content.nodesRestored.subscribe(() => this.reload()),
this.content.nodesPurged.subscribe(() => this.reload()),
this.content.nodesRestored.subscribe(() => this.reload()),
+
+ this.breakpointObserver
+ .observe([
+ Breakpoints.HandsetPortrait,
+ Breakpoints.HandsetLandscape
+ ])
+ .subscribe(result => {
+ this.isSmallScreen = result.matches;
+ })
);
}
}
diff --git a/src/app/ui/overrides/adf-pagination.theme.scss b/src/app/ui/overrides/adf-pagination.theme.scss
index 47060f65b..b197e11f4 100644
--- a/src/app/ui/overrides/adf-pagination.theme.scss
+++ b/src/app/ui/overrides/adf-pagination.theme.scss
@@ -4,4 +4,19 @@
display: none;
}
}
+
+ @media screen and (max-width: 599px) {
+ .adf-pagination {
+ padding: 0;
+
+ &__range-block,
+ &__perpage-block {
+ display: none;
+ }
+
+ &__actualinfo-block {
+ border-right: none;
+ }
+ }
+ }
}