Skip to content

GitLab

Commit a1a1b70c authored by Jean-Baptiste Nizet's avatar Jean-Baptiste Nizet Committed by Exbrayat Cédric
Browse files

feat: implement styling

parent 8bbe24fb
Hide whitespace changes
Inline Side-by-side
backend/src/main/resources/templates/fragments/institute.html
View file @ a1a1b70c
......@@ -11,7 +11,7 @@ Its unique argument (institute) is an InstituteVO
<th:block th:fragment="institute(institute)">
<div class="text-center py-2" th:if="${institute.logo}">
<img th:src="${institute.logo}" th:alt="${institute.instituteName}"/>
<img class="img-fluid" th:src="${institute.logo}" th:alt="${institute.instituteName}"/>
</div>
<div th:replace="fragments/row::text-row(label='Code', text=${institute.instituteCode})"></div>
<div th:replace="fragments/row::text-row(label='Acronym', text=${institute.acronym})"></div>
......
backend/src/main/resources/templates/fragments/map.html
View file @ a1a1b70c
......@@ -10,7 +10,7 @@ to display
-->
<div th:fragment="map" id="map-container" class="d-none">
<div id="map" class="border rounded"></div>
<div class="map-legend mt-1">
<div class="map-legend mt-1 small">
<img th:src="@{/assets/images/marker-icon-red.png}" id="red"/>
<label for="red" class="me-2">Origin site</label>
<img th:src="@{/assets/images/marker-icon-blue.png}" id="blue"/>
......
backend/src/main/resources/templates/fragments/row.html
View file @ a1a1b70c
......@@ -19,7 +19,7 @@ into a block with the condition:
</th:block>
-->
<div th:fragment="row(label, content)" class="row py-2">
<div th:fragment="row(label, content)" class="row f-row">
<div class="col-md-4 label pb-1 pb-md-0" th:text="${label}"></div>
<div class="col">
<th:block th:replace="${content}" />
......@@ -40,7 +40,7 @@ into a block with the condition:
<div th:replace="fragments/row::text-row(label='Some label', text=${someTextExpression})"></div>
</th:block>
-->
<div th:fragment="text-row(label, text)" th:unless="${#strings.isEmpty(text)}" class="row py-2">
<div th:fragment="text-row(label, text)" th:unless="${#strings.isEmpty(text)}" class="row f-row">
<div class="col-md-4 label pb-1 pb-md-0" th:text="${label}"></div>
<div class="col" th:text="${text}"></div>
</div>
......
backend/src/main/resources/templates/fragments/source.html
View file @ a1a1b70c
......@@ -16,7 +16,7 @@ The entityType argument is a string, which is used in the message
<th:block th:if="${source != null}">
<div th:replace="fragments/row::row(label='Source', content=~{::.source})">
<a class="source" target="_blank" th:href="${source.url}">
<img style="max-height: 60px;" th:src="${source.image}" th:alt="${source.name} + ' logo'" />
<img class="img-fluid" style="max-height: 60px;" th:src="${source.image}" th:alt="${source.name} + ' logo'" />
</a>
</div>
</th:block>
......
backend/src/main/resources/templates/fragments/xrefs.html
View file @ a1a1b70c
......@@ -9,12 +9,11 @@ Reusable fragment displaying a cross references section, with its title.
The unique argument (crossReferences) is a List<XRefDocumentVO>
-->
<div th:fragment="xrefs(crossReferences)" th:if="${!#lists.isEmpty(crossReferences)}">
<div class="f-card" th:fragment="xrefs(crossReferences)" th:if="${!#lists.isEmpty(crossReferences)}">
<h2>Cross references</h2>
<div class="table-responsive scroll-big-table table-card-body">
<div class="card">
<table class="table table-sm table-striped">
<div class="f-card-body">
<div class="scroll-table-container scroll-table-container-big">
<table class="table table-sm table-striped table-sticky table-responsive-sm">
<thead>
<tr>
<th scope="col">Name</th>
......@@ -28,13 +27,12 @@ The unique argument (crossReferences) is a List<XRefDocumentVO>
<td><a th:href="${crossRef.url}" target="_blank" th:text="${crossRef.name}"></a></td>
<td th:text="${crossRef.databaseName}"></td>
<td th:text="${crossRef.entryType}"></td>
<td th:text="${#strings.abbreviate(crossRef.description, 120)}"></td>
<td style="min-width: 30rem;" th:text="${#strings.abbreviate(crossRef.description, 120)}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
......
backend/src/main/resources/templates/germplasm.html
View file @ a1a1b70c
......@@ -20,7 +20,7 @@
<div th:replace="fragments/map::map"></div>
<div class="row align-items-center justify-content-center">
<div class="row align-items-center justify-content-center mt-4">
<div class="col-auto field" th:if="${model.germplasm.photo != null && model.germplasm.photo.thumbnailFile != null}">
<template id="photo-popover">
<div class="card">
......@@ -34,212 +34,227 @@
</div>
</template>
<button class="btn btn-link p-0"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.photo.photoName}"
data-bs-element="#photo-popover"
data-bs-container="body"
data-bs-trigger="focus">
<a role="button"
class="d-flex flex-column align-items-center"
data-bs-toggle="popover"
tabindex="0"
th:data-bs-title="${model.germplasm.photo.photoName}"
data-bs-element="#photo-popover"
data-bs-container="body"
data-bs-trigger="focus">
<img th:src="${model.germplasm.photo.thumbnailFile}" class="img-fluid" />
<figcaption class="figure-caption">
© <span th:text="${model.germplasm.photo.copyright}"></span>
</figcaption>
</button>
</a>
</div>
<div class="col-12 col-lg">
<h2>Identification</h2>
<div th:replace="fragments/row::text-row(label='Germplasm name', text=${model.germplasm.germplasmName})"></div>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.accessionNumber})"></div>
<div class="f-card">
<h2>Identification</h2>
<div th:replace="fragments/source::source(source=${model.source}, url=${model.germplasm.url}, entityType='germplasm')"></div>
<div class="f-card-body">
<div th:replace="fragments/row::text-row(label='Germplasm name', text=${model.germplasm.germplasmName})"></div>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.accessionNumber})"></div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.synonyms)}">
<div th:replace="fragments/row::row(label='Accession synonyms', content=~{::#accession-synonyms})">
<div id="accession-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.synonyms, ', ')}"></div>
</div>
</th:block>
<div th:replace="fragments/source::source(source=${model.source}, url=${model.germplasm.url}, entityType='germplasm')"></div>
<th:block th:unless="${#strings.isEmpty(model.taxon)}">
<div th:replace="fragments/row::row(label='Taxon', content=~{::#taxon})">
<div id="taxon">
<template id="taxon-popover">
<th:block th:unless="${#strings.isEmpty(model.germplasm.genus)}">
<div th:replace="fragments/row::row(label='Genus', content=~{::#taxon-genus})">
<em id="taxon-genus" th:text="${model.germplasm.genus}"></em>
</div>
</th:block>
<th:block th:unless="${#strings.isEmpty(model.germplasm.species)}">
<div th:replace="fragments/row::row(label='Species', content=~{::#taxon-species})">
<span id="taxon-species">
<em th:text="${model.germplasm.species}"></em>
<span th:unless="${#strings.isEmpty(model.germplasm.speciesAuthority)}"
th:text="${'(' + model.germplasm.speciesAuthority + ')'}"></span>
</span>
</div>
</th:block>
<th:block th:unless="${#strings.isEmpty(model.germplasm.subtaxa)}">
<div th:replace="fragments/row::row(label='Subtaxa', content=~{::#taxon-subtaxa})">
<span id="taxon-subtaxa">
<em th:text="${model.germplasm.subtaxa}"></em>
<span th:unless="${#strings.isEmpty(model.germplasm.subtaxaAuthority)}"
th:text="${'(' + model.germplasm.subtaxaAuthority + ')'}"></span>
</span>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Authority', text=${model.taxonAuthor})"></div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.synonyms)}">
<div th:replace="fragments/row::row(label='Accession synonyms', content=~{::#accession-synonyms})">
<div id="accession-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.synonyms, ', ')}"></div>
</div>
</th:block>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonIds)}">
<div th:replace="fragments/row::row(label='Taxon IDs', content=~{::#taxon-ids})">
<div id="taxon-ids">
<div th:each="taxonId : ${model.germplasm.taxonIds}" class="row">
<div class="col-6 text-nowrap" th:text="${taxonId.sourceName}"></div>
<div class="col-6">
<span class="taxon-id"
th:replace="fragments/link::link(label=${taxonId.taxonId}, url=${#faidare.taxonIdUrl(taxonId)})"></span>
<th:block th:unless="${#strings.isEmpty(model.taxon)}">
<div th:replace="fragments/row::row(label='Taxon', content=~{::#taxon})">
<div id="taxon">
<template id="taxon-popover">
<th:block th:unless="${#strings.isEmpty(model.germplasm.genus)}">
<div th:replace="fragments/row::row(label='Genus', content=~{::#taxon-genus})">
<em id="taxon-genus" th:text="${model.germplasm.genus}"></em>
</div>
</th:block>
<th:block th:unless="${#strings.isEmpty(model.germplasm.species)}">
<div th:replace="fragments/row::row(label='Species', content=~{::#taxon-species})">
<span id="taxon-species">
<em th:text="${model.germplasm.species}"></em>
<span th:unless="${#strings.isEmpty(model.germplasm.speciesAuthority)}"
th:text="${'(' + model.germplasm.speciesAuthority + ')'}"></span>
</span>
</div>
</th:block>
<th:block th:unless="${#strings.isEmpty(model.germplasm.subtaxa)}">
<div th:replace="fragments/row::row(label='Subtaxa', content=~{::#taxon-subtaxa})">
<span id="taxon-subtaxa">
<em th:text="${model.germplasm.subtaxa}"></em>
<span th:unless="${#strings.isEmpty(model.germplasm.subtaxaAuthority)}"
th:text="${'(' + model.germplasm.subtaxaAuthority + ')'}"></span>
</span>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Authority', text=${model.taxonAuthor})"></div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonIds)}">
<div th:replace="fragments/row::row(label='Taxon IDs', content=~{::#taxon-ids})">
<div id="taxon-ids">
<div th:each="taxonId : ${model.germplasm.taxonIds}" class="row">
<div class="col-6 text-nowrap" th:text="${taxonId.sourceName}"></div>
<div class="col-6">
<span class="taxon-id"
th:replace="fragments/link::link(label=${taxonId.taxonId}, url=${#faidare.taxonIdUrl(taxonId)})"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</th:block>
</th:block>
<div th:replace="fragments/row::text-row(label='Comment', text=${model.germplasm.taxonComment})"></div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonCommonNames)}">
<div th:replace="fragments/row::row(label='Taxon common names', content=~{::#taxon-common-names})">
<div id="taxon-common-names" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonCommonNames, ', ')}"></div>
</div>
</th:block>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonSynonyms)}">
<div th:replace="fragments/row::row(label='Taxon synonyms', content=~{::#taxon-synonyms})">
<div id="taxon-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonSynonyms, ', ')}"></div>
</div>
</th:block>
</template>
<button class="btn btn-link p-0"
data-bs-toggle="popover"
th:data-bs-title="${model.taxon}"
data-bs-element="#taxon-popover"
data-bs-container="body"
data-bs-trigger="focus">
<em th:text="${model.taxon}"></em>
<th:block th:unless="${#strings.isEmpty(model.taxonAuthor)}">(<span th:text="${model.taxonAuthor}"></span>)</th:block>
</button>
</div>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Comment', text=${model.germplasm.taxonComment})"></div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonCommonNames)}">
<div th:replace="fragments/row::row(label='Taxon common names', content=~{::#taxon-common-names})">
<div id="taxon-common-names" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonCommonNames, ', ')}"></div>
</div>
</th:block>
<th:block th:unless="${#lists.isEmpty(model.germplasm.taxonSynonyms)}">
<div th:replace="fragments/row::row(label='Taxon synonyms', content=~{::#taxon-synonyms})">
<div id="taxon-synonyms" class="content-overflow" th:text="${#strings.listJoin(model.germplasm.taxonSynonyms, ', ')}"></div>
</div>
</th:block>
</template>
<a role="button"
tabindex="0"
data-bs-toggle="popover"
th:data-bs-title="${model.taxon}"
data-bs-element="#taxon-popover"
data-bs-container="body"
data-bs-trigger="focus">
<em th:text="${model.taxon}"></em>
<th:block th:unless="${#strings.isEmpty(model.taxonAuthor)}">(<span th:text="${model.taxonAuthor}"></span>)</th:block>
</a>
</div>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Biological status', text=${model.germplasm.biologicalStatusOfAccessionCode})"></div>
<div th:replace="fragments/row::text-row(label='Genetic nature', text=${model.germplasm.geneticNature})"></div>
<div th:replace="fragments/row::text-row(label='Seed source', text=${model.germplasm.seedSource})"></div>
<div th:replace="fragments/row::text-row(label='Pedigree', text=${model.germplasm.pedigree})"></div>
<div th:replace="fragments/row::text-row(label='Comments', text=${model.germplasm.comment})"></div>
<div th:replace="fragments/row::text-row(label='Biological status', text=${model.germplasm.biologicalStatusOfAccessionCode})"></div>
<div th:replace="fragments/row::text-row(label='Genetic nature', text=${model.germplasm.geneticNature})"></div>
<div th:replace="fragments/row::text-row(label='Seed source', text=${model.germplasm.seedSource})"></div>
<div th:replace="fragments/row::text-row(label='Pedigree', text=${model.germplasm.pedigree})"></div>
<div th:replace="fragments/row::text-row(label='Comments', text=${model.germplasm.comment})"></div>
<th:block th:if="${model.germplasm.originSite != null && !#strings.isEmpty(model.germplasm.originSite.siteName)}">
<div th:replace="fragments/row::row(label='Origin site', content=~{::#origin-site})">
<a id="origin-site" th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.originSite.siteId)})}" th:text="${model.germplasm.originSite.siteName}"></a>
<th:block th:if="${model.germplasm.originSite != null && !#strings.isEmpty(model.germplasm.originSite.siteName)}">
<div th:replace="fragments/row::row(label='Origin site', content=~{::#origin-site})">
<a id="origin-site" th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.originSite.siteId)})}" th:text="${model.germplasm.originSite.siteName}"></a>
</div>
</th:block>
</div>
</th:block>
</div>
</div>
</div>
<th:block th:if="${model.germplasm.holdingInstitute}">
<div class="f-card" th:if="${model.germplasm.holdingInstitute}">
<h2>Depositary</h2>
<template id="holding-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.holdingInstitute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institution', content=~{::#institution})">
<button id="institution"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.holdingInstitute.instituteName}"
data-bs-element="#holding-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
class="btn btn-link p-0"
th:text="${model.germplasm.holdingInstitute.instituteName}"></button>
</div>
<th:block th:if="${model.germplasm.holdingGenbank != null && !#strings.isEmpty(model.germplasm.holdingGenbank.instituteName) && !#strings.isEmpty(model.germplasm.holdingGenbank.webSite)}">
<div th:replace="fragments/row::row(label='Stock center name', content=~{::#stock-center-name})">
<a id="stock-center-name"
target="_blank"
th:href="${model.germplasm.holdingGenbank.webSite}"
th:text="${model.germplasm.holdingGenbank.instituteName}"></a>
<div class="f-card-body">
<template id="holding-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.holdingInstitute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institution', content=~{::#institution})">
<a id="institution"
role="button"
tabindex="0"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.holdingInstitute.instituteName}"
data-bs-element="#holding-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
th:text="${model.germplasm.holdingInstitute.instituteName}"></a>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Presence status', text=${model.germplasm.presenceStatus})"></div>
</th:block>
<th:block th:if="${model.germplasm.holdingGenbank != null && !#strings.isEmpty(model.germplasm.holdingGenbank.instituteName) && !#strings.isEmpty(model.germplasm.holdingGenbank.webSite)}">
<div th:replace="fragments/row::row(label='Stock center name', content=~{::#stock-center-name})">
<a id="stock-center-name"
target="_blank"
th:href="${model.germplasm.holdingGenbank.webSite}"
th:text="${model.germplasm.holdingGenbank.instituteName}"></a>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Presence status', text=${model.germplasm.presenceStatus})"></div>
</div>
</div>
<th:block th:if="${model.collecting}">
<div class="f-card" th:if="${model.collecting}">
<h2>Collector</h2>
<th:block th:if="${model.germplasm.collectingSite != null && !#strings.isEmpty(model.germplasm.collectingSite.siteName)}">
<div th:replace="fragments/row::row(label='Collecting site', content=~{::#collecting-site})">
<a id="collecting-site"
th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.collectingSite.siteId)})}"
th:text="${model.germplasm.collectingSite.siteName}"
></a>
</div>
</th:block>
<div class="f-card-body">
<th:block th:if="${model.germplasm.collectingSite != null && !#strings.isEmpty(model.germplasm.collectingSite.siteName)}">
<div th:replace="fragments/row::row(label='Collecting site', content=~{::#collecting-site})">
<a id="collecting-site"
th:href="@{/sites/{siteId}(siteId=${#faidare.toSiteParam(model.germplasm.collectingSite.siteId)})}"
th:text="${model.germplasm.collectingSite.siteName}"
></a>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Material type', text=${model.germplasm.collector.materialType})"></div>
<div th:replace="fragments/row::text-row(label='Collectors', text=${model.germplasm.collector.collectors})"></div>
<div th:replace="fragments/row::text-row(label='Material type', text=${model.germplasm.collector.materialType})"></div>
<div th:replace="fragments/row::text-row(label='Collectors', text=${model.germplasm.collector.collectors})"></div>
<th:block th:if="${!#strings.isEmpty(model.germplasm.acquisitionDate) && model.germplasm.collector.accessionCreationDate == null}">
<div th:replace="fragments/row::text-row(label='Acquisition / Creation date', text=${model.germplasm.acquisitionDate})"></div>
</th:block>
<th:block th:if="${!#strings.isEmpty(model.germplasm.acquisitionDate) && model.germplasm.collector.accessionCreationDate == null}">
<div th:replace="fragments/row::text-row(label='Acquisition / Creation date', text=${model.germplasm.acquisitionDate})"></div>
</th:block>
<th:block th:if="${model.germplasm.collector.institute != null && !#strings.isEmpty(model.germplasm.collector.institute.instituteName)}">
<template id="collector-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.collector.institute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institution', content=~{::#collecting-institution})">
<button id="collecting-institution"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.collector.institute.instituteName}"
data-bs-element="#collector-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
class="btn btn-link p-0"
th:text="${model.germplasm.collector.institute.instituteName}"></button>
</div>
</th:block>
<th:block th:if="${model.germplasm.collector.institute != null && !#strings.isEmpty(model.germplasm.collector.institute.instituteName)}">
<template id="collector-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.collector.institute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institution', content=~{::#collecting-institution})">
<a id="collecting-institution"
role="button"
tabindex="0"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.collector.institute.instituteName}"
data-bs-element="#collector-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
th:text="${model.germplasm.collector.institute.instituteName}"></a>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.collector.accessionNumber})"></div>
</th:block>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.collector.accessionNumber})"></div>
</div>
</div>
<th:block th:if="${model.breeding}">
<div class="f-card" th:if="${model.breeding}">
<h2>Breeder</h2>
<th:block th:if="${model.germplasm.breeder.institute != null && !#strings.isEmpty(model.germplasm.breeder.institute.instituteName)}">
<template id="breeder-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.breeder.institute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institute', content=~{::#breeding-institution})">
<button id="breeding-institution"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.breeder.institute.instituteName}"
data-bs-element="#breeder-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
class="btn btn-link p-0"
th:text="${model.germplasm.breeder.institute.instituteName}"></button>
</div>
</th:block>
<div class="f-card-body">
<th:block th:if="${model.germplasm.breeder.institute != null && !#strings.isEmpty(model.germplasm.breeder.institute.instituteName)}">
<template id="breeder-institute-popover">
<div th:replace="fragments/institute::institute(institute=${model.germplasm.breeder.institute})"></div>
</template>
<div th:replace="fragments/row::row(label='Institute', content=~{::#breeding-institution})">
<a id="breeding-institution"
role="button"
tabindex="0"
data-bs-toggle="popover"
th:data-bs-title="${model.germplasm.breeder.institute.instituteName}"
data-bs-element="#breeder-institute-popover"
data-bs-container="body"
data-bs-trigger="focus"
th:text="${model.germplasm.breeder.institute.instituteName}"></a>
</div>
</th:block>
<div th:replace="fragments/row::text-row(label='Accession creation year', text=${model.germplasm.breeder.accessionCreationDate})"></div>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.breeder.accessionNumber})"></div>
<div th:replace="fragments/row::text-row(label='Catalog registration year', text=${model.germplasm.breeder.registrationYear})"></div>
<div th:replace="fragments/row::text-row(label='Catalog deregistration year', text=${model.germplasm.breeder.deregistrationYear})"></div>
</th:block>
<div th:replace="fragments/row::text-row(label='Accession creation year', text=${model.germplasm.breeder.accessionCreationDate})"></div>
<div th:replace="fragments/row::text-row(label='Accession number', text=${model.germplasm.breeder.accessionNumber})"></div>
<div th:replace="fragments/row::text-row(label='Catalog registration year', text=${model.germplasm.breeder.registrationYear})"></div>
<div th:replace="fragments/row::text-row(label='Catalog deregistration year', text=${model.germplasm.breeder.deregistrationYear})"></div>
</div>
</div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.donors)}">
<div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.donors)}">
<h2>Donors</h2>
<div class="table-responsive scroll-table table-card-body">
<div class="card">
<table class="table table-sm table-striped">
<div class="f-card-body">
<div class="scroll-table-container">
<table class="table table-sm table-striped table-sticky table-responsive-sm">
<thead>
<tr>
<th scope="col">Institute name</th>
......@@ -255,13 +270,14 @@
<template th:id="${'donor-institute-popover-' + donorIterStat.index}">
<div th:replace="fragments/institute::institute(institute=${row.donorInstitute})"></div>
</template>
<button data-bs-toggle="popover"
th:data-bs-title="${row.donorInstitute.instituteName}"
th:data-bs-element="${'#donor-institute-popover-' + donorIterStat.index}"
data-bs-container="body"
data-bs-trigger="focus"
class="btn btn-link p-0"
th:text="${row.donorInstitute.instituteName}"></button>
<a role="button"
tabindex="0"
data-bs-toggle="popover"
th:data-bs-title="${row.donorInstitute.instituteName}"
th:data-bs-element="${'#donor-institute-popover-' + donorIterStat.index}"
data-bs-container="body"
data-bs-trigger="focus"
th:text="${row.donorInstitute.instituteName}"></a>
</td>
<td th:text="${row.donorInstituteCode}"></td>
<td th:text="${row.donationDate}"></td>
......@@ -272,13 +288,13 @@
</table>
</div>
</div>
</th:block>
</div>
<th:block th:unless="${#lists.isEmpty(model.germplasm.distributors)}">
<h2>Donors</h2>
<div class="table-responsive scroll-table table-card-body">
<div class="card">
<table class="table table-sm table-striped">
<div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.distributors)}">
<h2>Distributors</h2>
<div class="f-card-body">
<div class="scroll-table-container">
<table class="table table-sm table-striped table-sticky table-responsive-sm">
<thead>
<tr>
<th scope="col">Institute</th>
......@@ -292,13 +308,13 @@
<template th:id="${'distributor-institute-popover-' + distributorIterStat.index}">
<div th:replace="fragments/institute::institute(institute=${row.institute})"></div>
</template>
<button data-bs-toggle="popover"
th:data-bs-title="${row.institute.instituteName}"
th:data-bs-element="${'#distributor-institute-popover-' + distributorIterStat.index}"
data-bs-container="body"
data-bs-trigger="focus"
class="btn btn-link p-0"
th:text="${row.institute.instituteName}"></button>
<a role="button"
tabindex="0"
th:data-bs-title="${row.institute.instituteName}"
th:data-bs-element="${'#distributor-institute-popover-' + distributorIterStat.index}"
data-bs-container="body"
data-bs-trigger="focus"
th:text="${row.institute.instituteName}"></a>
</td>
<td th:text="${row.accessionNumber}"></td>
<td th:text="${row.distributionStatus}"></td>
......@@ -307,112 +323,120 @@
</table>
</div>
</div>
</th:block>
</div>
<th:block th:unless="${#lists.isEmpty(model.attributes)}">
<div class="f-card" th:unless="${#lists.isEmpty(model.attributes)}">
<h2>Evaluation Data</h2>
<th:block th:each="descriptor : ${model.attributes}">
<div th:replace="fragments/row::text-row(label=${descriptor.attributeName}, text=${descriptor.value})"></div>
</th:block>
</th:block>
<div class="f-card-body">
<th:block th:each="descriptor : ${model.attributes}">
<div th:replace="fragments/row::text-row(label=${descriptor.attributeName}, text=${descriptor.value})"></div>
</th:block>
</div>
</div>
<th:block th:if="${model.genealogyPresent}">
<div class="f-card" th:if="${model.genealogyPresent}">
<h2>Genealogy</h2>
<div class="f-card-body">
<th:block th:if="${model.pedigree != null}">
<div th:replace="fragments/row::text-row(label='Crossing plan', text=${model.pedigree.crossingPlan})"></div>
<div th:replace="fragments/row::text-row(label='Crossing year', text=${model.pedigree.crossingYear})"></div>
<div th:replace="fragments/row::text-row(label='Family code', text=${model.pedigree.familyCode})"></div>
<th:block th:unless="${#strings.isEmpty(model.pedigree.parent1Name)}">
<div th:replace="fragments/row::row(label='Parent accessions', content=~{::#parent-accessions})">
<div id="parent-accessions">
<th:block th:if="${model.pedigree.parent1DbId}">
<div th:replace="fragments/row::row(label=${model.pedigree.parent1Type}, content=~{::#parent1-link})">
<a id="parent1-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent1DbId})}" th:text="${model.pedigree.parent1Name}"></a>
</div>
</th:block>
<th:block th:if="${model.pedigree != null}">
<div th:replace="fragments/row::text-row(label='Crossing plan', text=${model.pedigree.crossingPlan})"></div>
<div th:replace="fragments/row::text-row(label='Crossing year', text=${model.pedigree.crossingYear})"></div>