Commit 510dab22 authored by Matija Obreza's avatar Matija Obreza
Browse files

UI layout fix: Overview props small, numeric

parent 3d3ad005
...@@ -191,6 +191,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> { ...@@ -191,6 +191,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
{ overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 && { overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: t([`accessions.common.available.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small propertyItemProps={ { numeric: true } } /> <PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: t([`accessions.common.available.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small propertyItemProps={ { numeric: true } } />
} }
{ overviewsTerms && overviewsTerms.get('historic') && overviewsTerms.get('historic').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('historic').map((term) => ({title: t([`accessions.common.historic.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('historic', term, term.count) })) } title={ t(`accessions.common.overview.historic`) } small propertyItemProps={ { numeric: true } } />
}
{ overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 && { overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: t([`accessions.common.sgsv.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small propertyItemProps={ { numeric: true } } /> <PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: t([`accessions.common.sgsv.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small propertyItemProps={ { numeric: true } } />
} }
......
...@@ -118,7 +118,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -118,7 +118,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('crop.public.p.display.holdingInstitutes') } title={ t('crop.public.p.display.holdingInstitutes') }
propertiesList={ crop.overview['institute.code'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) } propertiesList={ crop.overview['institute.code'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -137,7 +137,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -137,7 +137,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('crop.public.p.display.countryOfInstitutes') } title={ t('crop.public.p.display.countryOfInstitutes') }
propertiesList={ crop.overview['institute.country.code3'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) } propertiesList={ crop.overview['institute.country.code3'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -156,7 +156,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -156,7 +156,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('crop.public.p.display.representedGenera') } title={ t('crop.public.p.display.representedGenera') }
propertiesList={ crop.overview['taxonomy.genus'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) } propertiesList={ crop.overview['taxonomy.genus'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -175,7 +175,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -175,7 +175,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('crop.public.p.display.representedSpecies') } title={ t('crop.public.p.display.representedSpecies') }
propertiesList={ crop.overview['taxonomy.genusSpecies'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) } propertiesList={ crop.overview['taxonomy.genusSpecies'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -191,8 +191,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -191,8 +191,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
} }
</GridContainer > </GridContainer >
} }
<PropertiesCard title={ t(`crop.public.p.display.otherNames`) } propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) } propertyItemProps={ {keepEmpty: true, small: true} }/> <PropertiesCard title={ t(`crop.public.p.display.otherNames`) }
propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) }
propertyItemProps={ { keepEmpty: true, small: true, numeric: true } }
/>
</PageContents> </PageContents>
} }
</PageLayout> </PageLayout>
......
...@@ -201,7 +201,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -201,7 +201,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('institutes.public.p.display.representedCrops') } title={ t('institutes.public.p.display.representedCrops') }
propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) } propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
small small propertyItemProps={ { numeric: true } }
/> />
} }
...@@ -209,7 +209,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -209,7 +209,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('institutes.public.p.display.representedCropNames') } title={ t('institutes.public.p.display.representedCropNames') }
propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) } propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -228,7 +228,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -228,7 +228,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('institutes.public.p.display.representedGenera') } title={ t('institutes.public.p.display.representedGenera') }
propertiesList={ taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) } propertiesList={ taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
...@@ -247,7 +247,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -247,7 +247,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesCard <PropertiesCard
title={ t('institutes.public.p.display.representedSpecies') } title={ t('institutes.public.p.display.representedSpecies') }
propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) } propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small small propertyItemProps={ { numeric: true } }
> >
<PieChart <PieChart
data={ data={
......
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