.
+ */
+
+.text-accordion {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+}
diff --git a/src/app/modules/data/elements/title-card.component.html b/src/app/modules/data/elements/title-card.component.html
new file mode 100644
index 00000000..f9c17507
--- /dev/null
+++ b/src/app/modules/data/elements/title-card.component.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ {{ 'name' | thingTranslate: item }}
+
+
+
+
+
+ {{ 'description' | thingTranslate: item }}
+
+
+
+
+
diff --git a/src/app/modules/data/elements/title-card.component.ts b/src/app/modules/data/elements/title-card.component.ts
new file mode 100644
index 00000000..6cc90e37
--- /dev/null
+++ b/src/app/modules/data/elements/title-card.component.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see
.
+ */
+
+import {
+ Component,
+ ElementRef,
+ HostListener,
+ Input,
+ OnChanges,
+ OnInit,
+ ViewChild,
+} from '@angular/core';
+import {SCThings} from '@openstapps/core';
+
+enum AccordionButtonState {
+ collapsed = 'chevron-down',
+ expanded = 'chevron-up',
+}
+
+@Component({
+ selector: 'stapps-title-card',
+ templateUrl: './title-card.component.html',
+ styleUrls: ['./title-card.component.css'],
+})
+export class TitleCardComponent implements OnInit, OnChanges {
+ /**
+ * The item whose title (and description) to display
+ */
+ @Input() item: SCThings;
+
+ @ViewChild('accordionTextArea') accordionTextArea: ElementRef;
+
+ buttonState = AccordionButtonState.collapsed;
+
+ buttonShown = true;
+
+ descriptionLinesShown: number;
+
+ descriptionLinesTotal: number;
+
+ descriptionPreviewLines = 3;
+
+ descriptionLinesToDisplay = 0;
+
+ ngOnInit(): void {
+ if (this.item.description) {
+ this.descriptionLinesToDisplay = this.descriptionPreviewLines;
+ setTimeout(() => this.checkTextElipsis(), 0);
+ }
+ }
+
+ ngOnChanges() {
+ this.checkTextElipsis();
+ }
+
+ @HostListener('window:resize', ['$event'])
+ checkTextElipsis() {
+ if (typeof this.accordionTextArea === 'undefined') {
+ return;
+ }
+ const element = this.accordionTextArea.nativeElement as HTMLElement;
+
+ const lineHeight = Number.parseInt(
+ getComputedStyle(element).getPropertyValue('line-height'),
+ );
+ this.descriptionLinesTotal = element?.scrollHeight / lineHeight;
+ this.descriptionLinesShown = element?.offsetHeight / lineHeight;
+ if (this.buttonState === AccordionButtonState.expanded) {
+ this.descriptionLinesToDisplay = this.descriptionLinesTotal;
+ }
+ const isElipsed = element?.offsetHeight < element?.scrollHeight;
+ this.buttonShown =
+ (isElipsed && this.buttonState === AccordionButtonState.collapsed) ||
+ (!isElipsed && this.buttonState === AccordionButtonState.expanded);
+ }
+
+ toggleDescriptionAccordion() {
+ if (this.descriptionLinesToDisplay > 0) {
+ this.descriptionLinesToDisplay =
+ this.descriptionLinesToDisplay === this.descriptionPreviewLines
+ ? this.descriptionLinesTotal
+ : this.descriptionPreviewLines;
+ }
+ this.buttonState =
+ this.buttonState === AccordionButtonState.collapsed
+ ? AccordionButtonState.expanded
+ : AccordionButtonState.collapsed;
+ setTimeout(() => this.checkTextElipsis(), 0);
+ }
+}
diff --git a/src/app/modules/data/types/catalog/catalog-detail-content.component.ts b/src/app/modules/data/types/catalog/catalog-detail-content.component.ts
index 568bea42..f2c9ba1a 100644
--- a/src/app/modules/data/types/catalog/catalog-detail-content.component.ts
+++ b/src/app/modules/data/types/catalog/catalog-detail-content.component.ts
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2019 StApps
+ * Copyright (C) 2019-2021 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
@@ -12,24 +12,10 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
.
*/
-import {
- Component,
- Input,
- OnInit,
- ViewChild,
- ElementRef,
- HostListener,
- OnDestroy,
- OnChanges,
-} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import {SCCatalog, SCSearchBooleanFilter, SCDucetSort} from '@openstapps/core';
import {SearchPageComponent} from '../../list/search-page.component';
-enum AccordionButtonState {
- collapsed = 'chevron-down',
- expanded = 'chevron-up',
-}
-
@Component({
selector: 'stapps-catalog-detail-content',
templateUrl: 'catalog-detail-content.html',
@@ -37,37 +23,15 @@ enum AccordionButtonState {
})
export class CatalogDetailContentComponent
extends SearchPageComponent
- implements OnInit, OnDestroy, OnChanges
+ implements OnInit
{
/**
* SCCatalog to display
*/
@Input() item: SCCatalog;
- @ViewChild('accordionTextArea') accordionTextArea: ElementRef;
-
- buttonState = AccordionButtonState.collapsed;
-
- buttonShown = true;
-
- descriptionLinesShown: number;
-
- descriptionLinesTotal: number;
-
- descriptionPreviewLines = 3;
-
- descriptionLinesToDisplay = 0;
-
ngOnInit() {
super.ngOnInit();
- if (this.item.description) {
- this.descriptionLinesToDisplay = this.descriptionPreviewLines;
- setTimeout(() => this.checkTextElipsis(), 0);
- }
- }
-
- ngOnChanges() {
- this.checkTextElipsis();
}
initialize() {
@@ -141,39 +105,4 @@ export class CatalogDetailContentComponent
type: 'boolean',
};
}
-
- @HostListener('window:resize', ['$event'])
- checkTextElipsis() {
- if (typeof this.accordionTextArea === 'undefined') {
- return;
- }
- const element = this.accordionTextArea.nativeElement as HTMLElement;
-
- const lineHeight = Number.parseInt(
- getComputedStyle(element).getPropertyValue('line-height'),
- );
- this.descriptionLinesTotal = element?.scrollHeight / lineHeight;
- this.descriptionLinesShown = element?.offsetHeight / lineHeight;
- if (this.buttonState === AccordionButtonState.expanded) {
- this.descriptionLinesToDisplay = this.descriptionLinesTotal;
- }
- const isElipsed = element?.offsetHeight < element?.scrollHeight;
- this.buttonShown =
- (isElipsed && this.buttonState === AccordionButtonState.collapsed) ||
- (!isElipsed && this.buttonState === AccordionButtonState.expanded);
- }
-
- toggleDescriptionAccordion() {
- if (this.descriptionLinesToDisplay > 0) {
- this.descriptionLinesToDisplay =
- this.descriptionLinesToDisplay === this.descriptionPreviewLines
- ? this.descriptionLinesTotal
- : this.descriptionPreviewLines;
- }
- this.buttonState =
- this.buttonState === AccordionButtonState.collapsed
- ? AccordionButtonState.expanded
- : AccordionButtonState.collapsed;
- setTimeout(() => this.checkTextElipsis(), 0);
- }
}
diff --git a/src/app/modules/data/types/catalog/catalog-detail-content.html b/src/app/modules/data/types/catalog/catalog-detail-content.html
index 70207f44..77fe4f14 100644
--- a/src/app/modules/data/types/catalog/catalog-detail-content.html
+++ b/src/app/modules/data/types/catalog/catalog-detail-content.html
@@ -1,30 +1,3 @@
-
-
-
-
- {{ 'name' | thingTranslate: item }}
-
-
-
-
-
- {{ 'description' | thingTranslate: item }}
-
-
-
-
-
-
-
-
- {{ 'name' | thingTranslate: item }}
-
-
- {{ 'description' | thingTranslate: item }}
-
-
diff --git a/src/app/modules/data/types/place/special/mensa/place-mensa.html b/src/app/modules/data/types/place/special/mensa/place-mensa.html
index 8d152d2e..600f417e 100644
--- a/src/app/modules/data/types/place/special/mensa/place-mensa.html
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa.html
@@ -1,13 +1,3 @@
-
-
-
-
- {{ 'name' | thingTranslate: item }}
-
-
- {{ 'description' | thingTranslate: item }}
-