Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
urgi-is
FAIDARE
Commits
b88a3503
Commit
b88a3503
authored
Mar 05, 2019
by
Jérémy Destin
Committed by
Célia Michotey
Mar 19, 2019
Browse files
fix: Fix display bugs on germplasm card. Uniformize style on the cards. Minor fixes.
GNP-5490
parent
aed32453
Changes
13
Hide whitespace changes
Inline
Side-by-side
frontend/src/app/card-row/card-row.component.scss
View file @
b88a3503
...
...
@@ -2,4 +2,7 @@
.field
{
font-weight
:
bold
;
overflow-wrap
:
normal
;
}
frontend/src/app/card-section/card-section.component.html
View file @
b88a3503
<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
View file @
b88a3503
@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
View file @
b88a3503
<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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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]=
"'
C
hild of ' + child.firstParentName + ' and ' + child.secondParentName"
<gpds-card-row
class=
"text"
[label]=
"'
c
hild
(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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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
View file @
b88a3503
...
...
@@ -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
:
5
0%
;
max-width
:
10
0%
;
}
/*table th, table td { overflow: hidden; }*/
...
...
frontend/src/styles.scss
View file @
b88a3503
...
...
@@ -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
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment