Commit b88a3503 authored by Jérémy Destin's avatar Jérémy Destin Committed by Célia Michotey
Browse files

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

parent aed32453
......@@ -2,4 +2,7 @@
.field {
font-weight: bold;
overflow-wrap: normal;
}
<div class="card mb-3 mt-4" *ngIf="test">
<div class="card mb-3" *ngIf="test">
<div class="card-header">
{{ header }}
</div>
......
@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;
}
<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>
......
......@@ -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;
}
......@@ -6,6 +6,10 @@ label {
}
}
.nav-link {
text-decoration: none;
}
.nav-tabs {
.nav-link.active {
font-weight: bold;
......
......@@ -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
......
......@@ -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;
});
}
......
......@@ -24,4 +24,9 @@
.dropdown-container {
position: relative;
text-decoration: none;
}
.dropdown-item {
text-decoration: none;
}
......@@ -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">
......
......@@ -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"
......
......@@ -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; }*/
......
......@@ -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 {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment