Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-20 16:42:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add detail view for news

Browse Source
This commit is contained in:
Jovan Krunić
2021-12-06 12:14:42 +00:00
parent 8f3df58e42
commit 2566a71a81
13 changed files with 177 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/modules/data/types/message/message-detail-content.component.ts
View File

@@ -14,6 +14,7 @@
*/
import {Component, Input} from '@angular/core';
import {SCMessage} from '@openstapps/core';
import {Browser} from '../../../../util/browser.factory';
/**
* TODO
@@ -21,10 +22,22 @@ import {SCMessage} from '@openstapps/core';
@Component({
selector: 'stapps-message-detail-content',
templateUrl: 'message-detail-content.html',
styleUrls: ['message-detail-content.scss'],
})
export class MessageDetailContentComponent {
constructor(private browser: Browser) {}
/**
* TODO
*/
@Input() item: SCMessage;
/**
* Open the external link when clicked
*
* @param url Web address to open
*/
onLinkClick(url: string) {
this.browser.open(url);
}
}

74
src/app/modules/data/types/message/message-detail-content.html
View File

@@ -1,23 +1,51 @@
<stapps-simple-card
[title]="'messageBody' | propertyNameTranslate: item | titlecase"
[content]="'messageBody' | thingTranslate: item"
></stapps-simple-card>
<stapps-simple-card
[title]="'audiences' | propertyNameTranslate: item | titlecase"
[content]="'audiences' | thingTranslate: item"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.datePublished"
[title]="'datePublished' | propertyNameTranslate: item | titlecase"
[content]="item.datePublished | amDateFormat: 'll'"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.authors"
[title]="'authors' | propertyNameTranslate: item | titlecase"
[content]="item.authors"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.publishers"
[title]="'publishers' | propertyNameTranslate: item | titlecase"
[content]="item.publishers"
></stapps-simple-card>
<div *ngIf="!item.categories.includes('news'); else news">
<stapps-simple-card
[title]="'messageBody' | propertyNameTranslate: item | titlecase"
[content]="'messageBody' | thingTranslate: item"
></stapps-simple-card>
<stapps-simple-card
[title]="'audiences' | propertyNameTranslate: item | titlecase"
[content]="'audiences' | thingTranslate: item"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.datePublished"
[title]="'datePublished' | propertyNameTranslate: item | titlecase"
[content]="item.datePublished | amDateFormat: 'll'"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.authors"
[title]="'authors' | propertyNameTranslate: item | titlecase"
[content]="item.authors"
></stapps-simple-card>
<stapps-simple-card
*ngIf="item.publishers"
[title]="'publishers' | propertyNameTranslate: item | titlecase"
[content]="item.publishers"
></stapps-simple-card>
</div>
<ng-template #news>
<ion-thumbnail>
<ion-img
*ngIf="item.image"
src="{{ item.image }}"
(ionError)="$event.target.nextSibling.style.display = 'none'"
alt="{{ item.name }}"
></ion-img>
</ion-thumbnail>
<stapps-simple-card
*ngIf="item.datePublished"
content="{{ item.datePublished | amCalendar | sentencecase }}"
></stapps-simple-card>
<stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
<ion-card *ngIf="item.sameAs">
<ion-card-header>
{{ 'sameAs' | propertyNameTranslate: item | titlecase }}
</ion-card-header>
<ion-card-content>
<a (click)="onLinkClick(item.sameAs)"
>{{ item.name }}<ion-icon name="open-outline"></ion-icon>
</a>
</ion-card-content>
</ion-card>
</ng-template>

39
src/app/modules/data/types/message/message-detail-content.scss Normal file
View File

@@ -0,0 +1,39 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
:host {
ion-thumbnail {
width: 100%;
height: auto;
img {
display: block;
}
}
a {
cursor: pointer;
ion-icon {
vertical-align: text-top;
font-size: 80%;
padding-left: 2px;
}
}
// Show smaller image on a desktop
@media (min-width: 992px) {
ion-thumbnail {
width: 60%;
margin: 0 auto;
}
}
}