feat: add detail view for news

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

@@ -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);
+  }
 }

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

@@ -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>

src/app/modules/data/types/message/message-detail-content.scss

@@ -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;
+    }
+  }
+}

src/app/modules/news/item/news-item.component.ts

@@ -14,6 +14,7 @@
  */
 import {Component, Input} from '@angular/core';
 import {SCMessage} from '@openstapps/core';
+import {Browser} from '../../../util/browser.factory';
 /**
  * News page component
  */
@@ -23,8 +24,14 @@ import {SCMessage} from '@openstapps/core';
   styleUrls: ['news-item.scss'],
 })
 export class NewsItemComponent {
+  constructor(private browser: Browser) {}
+
   /**
    * News (message) to show
    */
   @Input() item: SCMessage;
+
+  onLinkClick(url: string) {
+    this.browser.open(url);
+  }
 }

src/app/modules/news/item/news-item.html

@@ -1,6 +1,6 @@
 <ion-card>
-  <span *ngIf="item.sameAs; else imageNoUrl">
-    <a href="{{ item.sameAs }}">
+  <span>
+    <a [routerLink]="['/data-detail', item.uid]">
       <ion-thumbnail
         ><ion-img
           src="{{ item.image }}"
@@ -11,31 +11,20 @@
       </ion-thumbnail>
     </a>
   </span>
-  <ng-template #imageNoUrl>
-    <ion-thumbnail>
-      <ion-img
-        src="{{ item.image }}"
-        (ionError)="$event.target.nextSibling.style.display = 'block'"
-        alt=""
-      ></ion-img>
-      <ion-icon name="newspaper-outline"></ion-icon>
-    </ion-thumbnail>
-  </ng-template>
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished">{{
       item.datePublished | amCalendar | sentencecase
     }}</ion-card-subtitle>
     <ion-card-title>
-      <span *ngIf="item.sameAs; else titleNoUrl"
-        ><a href="{{ item.sameAs }}"
-          ><span class="text">{{ item.name }}</span
-          ><span class="icon"
-            ><ion-icon name="open-outline"></ion-icon></span></a
-      ></span>
-      <ng-template #titleNoUrl>{{ item.name }}</ng-template>
+      <span>
+        <a [routerLink]="['/data-detail', item.uid]"
+          ><span class="text">{{ item.name }}</span></a
+        ></span
+      >
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    {{ item.messageBody }}
+    <!-- TODO: Temporary solution until the designs are ready, where is probable use of title only -->
+    {{ item.messageBody | slice: 0:120 }}...
   </ion-card-content>
 </ion-card>

src/app/modules/news/item/news-item.scss

@@ -1,11 +1,6 @@
 ion-card-header a {
   color: var(--ion-color-dark-tint);
   text-decoration: none;
-     span.icon ion-icon {
-       vertical-align: text-top;
-       font-size: 60%;
-       padding-left: 4px;
-     }
 }
 
 ion-card ion-thumbnail {