-
- {{'name' | thingTranslate: item}}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{'name' | thingTranslate: item}}
+
+
+
+
+
+
diff --git a/src/app/modules/data/list/data-list-item.scss b/src/app/modules/data/list/data-list-item.scss
index b09a90a8..b16f7766 100644
--- a/src/app/modules/data/list/data-list-item.scss
+++ b/src/app/modules/data/list/data-list-item.scss
@@ -1,3 +1,13 @@
+.item {
+ ion-label {
+ width: 100%;
+
+ div {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+}
::ng-deep {
ion-grid, ion-col {
diff --git a/src/app/modules/data/list/data-list.component.ts b/src/app/modules/data/list/data-list.component.ts
index f9bdddfa..fdf3242a 100644
--- a/src/app/modules/data/list/data-list.component.ts
+++ b/src/app/modules/data/list/data-list.component.ts
@@ -13,8 +13,19 @@
* this program. If not, see
.
*/
import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ HostListener,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ SimpleChanges,
+ ViewChild,
+} from '@angular/core';
import {SCThings} from '@openstapps/core';
+import {ceil} from 'lodash-es';
import {BehaviorSubject, Observable, Subscription} from 'rxjs';
/**
@@ -51,6 +62,10 @@ export class DataListComponent implements OnChanges, OnInit {
* Indicates whether or not the list is to display SCThings of a single type
*/
@Input() singleType = false;
+ /**
+ * Items that display the skeleton list
+ */
+ skeletonItems: number[];
/**
* Array of all subscriptions to Observables
*/
@@ -58,9 +73,19 @@ export class DataListComponent implements OnChanges, OnInit {
// tslint:disable-next-line: completed-docs
@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
+ /**
+ * Calculate how many items would fill the screen
+ */
+ @HostListener('window.resize', ['$event'])
+ calcSkeletonItems() {
+ const itemHeight = 122;
+ this.skeletonItems = new Array(ceil(window.innerHeight / itemHeight));
+ }
+
/**
* Uniquely identifies item at a certain list index
*/
+ // tslint:disable-next-line:prefer-function-over-method
identifyItem(_index: number, item: SCThings) {
return item.uid;
}
@@ -73,18 +98,19 @@ export class DataListComponent implements OnChanges, OnInit {
}
// tslint:disable-next-line: completed-docs
- ngOnInit(): void {
- if (typeof this.resetToTop !== 'undefined') {
- this.subscriptions.push(this.resetToTop.subscribe(() => {
- this.viewPort.scrollToIndex(0);
- }));
+ ngOnDestroy(): void {
+ for (const subscription of this.subscriptions) {
+ subscription.unsubscribe();
}
}
// tslint:disable-next-line: completed-docs
- ngOnDestroy(): void {
- for (const subscription of this.subscriptions) {
- subscription.unsubscribe();
+ ngOnInit(): void {
+ this.calcSkeletonItems();
+ if (typeof this.resetToTop !== 'undefined') {
+ this.subscriptions.push(this.resetToTop.subscribe(() => {
+ this.viewPort.scrollToIndex(0);
+ }));
}
}
diff --git a/src/app/modules/data/list/data-list.html b/src/app/modules/data/list/data-list.html
index 5b76556c..c949bee9 100644
--- a/src/app/modules/data/list/data-list.html
+++ b/src/app/modules/data/list/data-list.html
@@ -13,5 +13,5 @@