styling issue...

src/app/component/resource/resource.component.html

@@ -9,7 +9,7 @@
     <div class="col-12">
       <p-panel class="col-12 inline">
         <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class="my-0">{{resource.language?.name}}</div></div>
-        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class="my-0 overflow-text"><a href="{{resource.resourceOrigin}}">{{resource.resourceOrigin}}</a></div></div>
+        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class="my-0 overflow-text"><a href="{{resource.resourceOrigin}}" target="_blank">{{resource.resourceOrigin}}</a></div></div>
         <div class="flex align-items-center"> <div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class="my-0">{{resource.resourceType?.name}}</div></div>
         <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class="my-0">{{resource.contactInstitution}}</div></div>
         <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class="my-0"></div>{{resource.contactEmail}}</div>
@@ -33,19 +33,23 @@
           <p class=" my-0 py-2 mx-2" >{{region.name}}</p>
         </div>
       </div>
-      <div class="flex flex-wrap">
-        <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
-        <div *ngFor="let pest of resource.pests" class="inline my-0">
-          <div class=" my-0 py-2 mx-2" >{{pest.commonName}}</div>
+      <div class="flex">
+        <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
+        <div class="col-9">
+        <div *ngFor="let pest of resource.pests" class="inline-flex pr-2 pb-2">
+          <p-badge  severity="danger" value={{pest.commonName}}></p-badge>
+        </div>
         </div>
       </div>
-      <div class="flex flex-wrap">
-        <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
+      <div class="flex">
+        <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
+        <div class="col-9">
+          <div class="inline-flex pr-2 pb-2" *ngFor="let crop of resource.crops">
+            <p-badge  severity="success" value={{crop.commonName}}></p-badge>
+          </div>
+        </div>
 
-        <div *ngFor="let crop of resource.crops" class="inline my-0">
-          <p class="my-0 py-2 mx-2" >{{crop.commonName}}</p>
 
-        </div>
       </div>
     </p-panel>
     <p-panel class="col-12 p-d-block" header="Find out more" *ngIf="(resource.fileNames != undefined) || (resource.links != undefined)">
@@ -55,7 +59,7 @@
       </div>
       <div class="mt-2" *ngFor="let link of resource.links" >
         <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i>
-        <a class="link-wrap" href="{{link}}">{{link}}</a>
+        <a class="link-wrap" href="{{link}}" target="_blank">{{link}}</a>
       </div>
     </p-panel>
 </div>

src/app/component/resource/resource.component.ts

@@ -40,11 +40,12 @@ export class ResourceComponent implements OnInit {
     this.resourceService.downloadFile(fileName).subscribe((file: any) => {
       const blob = new Blob([file], {type: 'application/pdf'});
 
-      this.url = window.URL.createObjectURL(file);
-      const link = document.createElement('a');
+      this.url = window.URL.createObjectURL(blob);
+      /*const link = document.createElement('a');
       link.href = this.url;
-      link.download = fileName;
-      link.click();
+      link.target="_blank";
+      link.download = fileName;*/
+      window.open(this.url,"_blank")
     }, error => {
       console.log(error)
     });

src/styles.css

@@ -82,3 +82,7 @@
 .p-button.p-button-link{
   background-color: transparent !important;
 }
+
+.p-badge{
+  font-size: 14px !important;
+}