fix: Fix display bugs on germplasm card. Uniformize style on the cards. Minor fixes. GNP-5490

frontend/src/app/card-row/card-row.component.scss

@@ -2,4 +2,7 @@
 
 .field {
   font-weight: bold;
+  overflow-wrap: normal;
 }
+
+

frontend/src/app/card-section/card-section.component.html

-<div class="card mb-3 mt-4" *ngIf="test">
+<div class="card mb-3" *ngIf="test">
   <div class="card-header">
     {{ header }}
   </div>

frontend/src/app/card-section/card-section.component.scss

+@import '../../styles.scss';
+
+a {
+  text-decoration: underline;
+}
+
 .card {
-  margin-top: 25px;
-  margin-bottom: 10px;
-  border-color: rgba(15, 97, 145, 0.25);
-  border-width: 2px;
+  border: none;
 }
 
 .card-header {
@@ -10,6 +13,5 @@
   font-weight: bold;
   color: #f5f5f5;
   background-color: #0f6191;
-  border-color: #0f6191;
-  border-width: 2px;
 }
+

frontend/src/app/card-table/card-table.component.html

-<div class="table-responsive scroll-table">
+<div class="table-responsive scroll-table table-card-body">
   <table class="table table-sm table-striped">
     <thead *ngIf="headers">
       <tr>

frontend/src/app/card-table/card-table.component.scss

@@ -9,3 +9,11 @@
     background-color: white;
   }
 }
+
+.table-card-body {
+  padding: 0;
+  border: 2px solid rgb(195, 214, 226);
+  border-top-width: 0px;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}

frontend/src/app/form/form.component.scss

@@ -6,6 +6,10 @@ label {
   }
 }
 
+.nav-link {
+  text-decoration: none;
+}
+
 .nav-tabs {
   .nav-link.active {
     font-weight: bold;

frontend/src/app/germplasm-card/germplasm-card.component.html

@@ -6,10 +6,10 @@
   </h3>
 
   <div class="container-fluid">
-    <div class="row">
+    <div class="row align-items-center">
 
       <!--Section for the image representing the germplasm and the details about this image-->
-      <div class="col-md-auto field" *ngIf="germplasmGnpis.photo && germplasmGnpis.photo.thumbnailFileName">
+      <div class="col-auto field" *ngIf="germplasmGnpis.photo && germplasmGnpis.photo.thumbnailFileName">
         <figure class="figure">
           <img
             [src]="IMAGES_SIREGAL_URL +'/' + germplasmGnpis.holdingGenbank.instituteCode + '/' + germplasmGnpis.photo.thumbnailFileName"
@@ -49,10 +49,10 @@
 
       <!--Section for the information about the identification of the germplasm-->
       <gpds-card-section
-        class="col"
+        class="col-12 col-lg"
         header="Identification">
         <ng-template>
-          <div class="card-body">
+          <div class="card-body card-section-body">
 
             <gpds-card-row
               label="Germplasm name"
@@ -270,13 +270,13 @@
       header="Holding"
       [test]="germplasmGnpis.holdingInstitute">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
 
           <gpds-card-row
             label="Institution">
             <ng-template>
-              <a class="btn popovers" data-boundary="window" placement="top"
+              <a class="popovers" data-boundary="window" placement="top"
                  [ngbPopover]="holdingInstituteTemplate"
                  [popoverTitle]="germplasmGnpis.holdingInstitute.instituteName"
                  container="body">
@@ -313,7 +313,7 @@
       header="Origin"
       [test]="testOrigin()">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
           <gpds-card-row
             label="Geographical origin"
@@ -334,7 +334,7 @@
                 label="Institution"
                 [test]="germplasmGnpis.collector.institute && germplasmGnpis.collector.institute.instituteName">
                 <ng-template>
-                  <a class="btn popovers" placement="top"
+                  <a class="popovers" placement="top"
                      [ngbPopover]="CollectorInstituteTemplate"
                      [popoverTitle]="germplasmGnpis.collector.institute.instituteName">
                     {{ germplasmGnpis.collector.institute.instituteName }}
@@ -399,7 +399,7 @@
                 [test]="germplasmGnpis.breeder.institute && germplasmGnpis.breeder.institute.instituteName">
                 <ng-template>
                   <!--TODO : Fix the issue with the overflow link (issue 13)-->
-                  <a class="btn popovers" placement="top"
+                  <a class="popovers" placement="top"
                      [ngbPopover]="BreederInstituteTemplate"
                      [popoverTitle]="germplasmGnpis.breeder.institute.instituteName">
                     {{ germplasmGnpis.breeder.institute.instituteName }} {{ germplasmGnpis.breeder.institute.instituteCode }}
@@ -496,7 +496,7 @@
                     label="Institute name"
                     [test]="donor.donorInstitute.instituteName">
                     <ng-template>
-                      <a class="btn popovers" placement="top"
+                      <a class="popovers" placement="top"
                          [ngbPopover]="DonorInstituteTemplate"
                          [popoverTitle]="donor.donorInstitute.instituteName">
                         {{ donor.donorInstitute.instituteName }}
@@ -591,7 +591,7 @@
               </ng-template>
 
               <td>
-                <a class="btn popovers" placement="top"
+                <a class="popovers" placement="top"
                    [ngbPopover]="InstituteTemplate"
                    [popoverTitle]="row.institute.instituteName">
                   {{ row.institute.instituteName }}
@@ -612,33 +612,42 @@
       header="Genealogy"
       [test]="testPedigree() || testProgeny()">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
           <gpds-card-row
             label="Crossing plan"
-            [value]="germplasmPedigree.crossingPlan">
+            [test]="germplasmPedigree && germplasmPedigree.crossingPlan">
+            <ng-template>
+              {{ germplasmPedigree.crossingPlan }}
+            </ng-template>
           </gpds-card-row>
 
           <gpds-card-row
             label="Crossing year"
-            [value]="germplasmPedigree.crossingYear">
+            [test]="germplasmPedigree && germplasmPedigree.crossingYear">
+            <ng-template>
+              {{ germplasmPedigree.crossingYear }}
+            </ng-template>
           </gpds-card-row>
 
           <gpds-card-row
             label="Family code"
-            [value]="germplasmPedigree.familyCode">
+            [test]="germplasmPedigree && germplasmPedigree.familyCode">
+            <ng-template>
+              {{ germplasmPedigree.familyCode }}
+            </ng-template>
           </gpds-card-row>
 
 
           <gpds-card-row
             label="Parent accessions"
-            [test]="germplasmPedigree.parent1Name || germplasmPedigree.parent2Name">
+            [test]="germplasmPedigree && (germplasmPedigree.parent1Name || germplasmPedigree.parent2Name)">
 
             <ng-template>
 
               <gpds-card-row
                 label="Mother"
-                [test]="germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'FEMALE'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'FEMALE')">
                 <ng-template>
                   <a [routerLink]="['/germplasm']"
                      [queryParams]="{id:germplasmPedigree.parent1DbId}">
@@ -649,7 +658,7 @@
 
               <gpds-card-row
                 label="Father"
-                [test]="germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'MALE'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'MALE')">
                 <ng-template>
                   <a [routerLink]="['/germplasm']"
                      [queryParams]="{id:germplasmPedigree.parent1DbId}">
@@ -660,7 +669,7 @@
 
               <gpds-card-row
                 label="Population"
-                [test]="germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'POPULATION'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent1Type && germplasmPedigree.parent1Type == 'POPULATION')">
                 <ng-template>
                   {{ germplasmPedigree.parent1Name }}
                 </ng-template>
@@ -668,7 +677,7 @@
 
               <gpds-card-row
                 label="SELF"
-                [test]="germplasmPedigree.parent1Type == 'SELF'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent1Type == 'SELF')">
                 <ng-template>
                   Self
                 </ng-template>
@@ -677,7 +686,7 @@
 
               <gpds-card-row
                 label="Mother"
-                [test]="germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'FEMALE'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'FEMALE')">
                 <ng-template>
                   <a [routerLink]="['/germplasm']"
                      [queryParams]="{id:germplasmPedigree.parent2DbId}">
@@ -688,7 +697,7 @@
 
               <gpds-card-row
                 label="Father"
-                [test]="germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'MALE'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'MALE')">
                 <ng-template>
                   <a [routerLink]="['/germplasm']"
                      [queryParams]="{id:germplasmPedigree.parent2DbId}">
@@ -699,7 +708,7 @@
 
               <gpds-card-row
                 label="Population"
-                [test]="germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'POPULATION'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent2Type && germplasmPedigree.parent2Type == 'POPULATION')">
                 <ng-template>
                   {{ germplasmPedigree.parent2Name }}
                 </ng-template>
@@ -707,7 +716,7 @@
 
               <gpds-card-row
                 label="SELF"
-                [test]="germplasmPedigree.parent2Type == 'SELF'">
+                [test]="germplasmPedigree && (germplasmPedigree.parent2Type == 'SELF')">
                 <ng-template>
                   Self
                 </ng-template>
@@ -718,7 +727,7 @@
 
           <gpds-card-row
             label="Sibling accessions"
-            [test]="germplasmPedigree.siblings && germplasmPedigree.siblings.length > 0">
+            [test]="germplasmPedigree && (germplasmPedigree.siblings && germplasmPedigree.siblings.length > 0)">
             <ng-template>
 
               <div class="content-overflow">
@@ -740,8 +749,8 @@
           <div class="content-overflow-big">
             <ng-container *ngFor="let child of germplasmProgeny">
 
-              <gpds-card-row
-                [label]="'Child of ' + child.firstParentName + ' and ' + child.secondParentName"
+              <gpds-card-row class="text"
+                [label]="'child(ren) of ' + child.firstParentName + ' and ' + child.secondParentName"
                 [test]="testProgeny()">
                 <ng-template>
 
@@ -765,7 +774,7 @@
       header="Evaluation Data"
       [test]="germplasmAttributes && germplasmAttributes.length > 0">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
           <ng-container *ngFor="let descriptor of germplasmAttributes">
             <gpds-card-row
@@ -783,7 +792,7 @@
       header="Collection"
       [test]="germplasmGnpis.collection && germplasmGnpis.collection.length > 0">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
           <ng-container *ngFor="let collection of germplasmGnpis.collection">
             <gpds-card-row
@@ -806,7 +815,7 @@
       header="Panel"
       [test]="germplasmGnpis.panel && germplasmGnpis.panel.length > 0">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body">
 
           <ng-container *ngFor="let panel of germplasmGnpis.panel">
             <gpds-card-row
@@ -827,7 +836,7 @@
       header="Population"
       [test]="germplasmGnpis.population && germplasmGnpis.population.length > 0">
       <ng-template>
-        <div class="card-body">
+        <div class="card-body card-section-body card-section-body">
 
           <ng-container *ngFor="let population of germplasmGnpis.population">
             <gpds-card-row

frontend/src/app/germplasm-card/germplasm-card.component.ts

@@ -13,6 +13,7 @@ import { BrapiGermplasmAttributes, BrapiGermplasmPedigree } from '../models/brap
 
 export class GermplasmCardComponent implements OnInit {
 
+    alreadyInitialize = false;
 
     constructor(private brapiService: BrapiService,
                 private gnpisService: GnpisService,
@@ -21,7 +22,7 @@ export class GermplasmCardComponent implements OnInit {
 
         this.router.events.subscribe((event: any) => {
             // If it is a NavigationEnd event re-initalise the component
-            if (event instanceof NavigationEnd) {
+            if (this.alreadyInitialize && event instanceof NavigationEnd) {
                 this.ngOnInit();
             }
         });
@@ -75,6 +76,7 @@ export class GermplasmCardComponent implements OnInit {
         this.loaded = Promise.all([germplasm$]);
         this.loaded.then(() => {
             this.loading = false;
+            this.alreadyInitialize = true;
         });
 
     }

frontend/src/app/navbar/navbar.component.scss

@@ -24,4 +24,9 @@
 
 .dropdown-container {
   position: relative;
+  text-decoration: none;
+}
+
+.dropdown-item {
+  text-decoration: none;
 }

frontend/src/app/site-card/site-card.component.html

@@ -14,7 +14,7 @@
   <gpds-card-section
     header="Details">
     <ng-template>
-      <div class="card-body">
+      <div class="card-body card-section-body">
         <gpds-card-row
           label="Site type"
           [value]="location.locationType">

frontend/src/app/study-card/study-card.component.html

@@ -12,7 +12,7 @@
   <gpds-card-section
     header="Identification">
     <ng-template>
-      <div class="card-body">
+      <div class="card-body card-section-body">
 
         <gpds-card-row
           label="Name"

frontend/src/assets/gpds/theme.scss

@@ -29,6 +29,7 @@ $enable-shadows: true;
 //custom tables
 .table {
   table-layout: fixed;
+
   thead {
     background-color: #0f6191;
   }
@@ -43,7 +44,7 @@ a.btn.popovers {
 }
 
 .popover {
-  max-width: 50%;
+  max-width: 100%;
 }
 
 /*table th, table td { overflow: hidden; }*/

frontend/src/styles.scss

@@ -18,10 +18,22 @@ h3 {
   font-weight: bold;
   color: #0f6191;
 }
+
+.card-section-body {
+  border: 2px solid rgb(195, 214, 226);
+  border-top-width: 0px;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
 .row-sep {
   border-top: 1px solid #f0f0f0;
 }
 
+.row-sep .row-sep:first-of-type {
+  border: none;
+}
+
 .content-overflow {
   max-height: 175px;
   overflow-y: auto;
@@ -29,7 +41,7 @@ h3 {
 
 .content-overflow-big {
   max-height: 275px;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 .display-spinner-front {