diff --git a/backend/src/main/resources/static/assets/images/logo.png b/backend/src/main/resources/static/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..86b3ab108693a19cca5a05c95faebd8573e23389 Binary files /dev/null and b/backend/src/main/resources/static/assets/images/logo.png differ diff --git a/backend/src/main/resources/templates/fragments/institute.html b/backend/src/main/resources/templates/fragments/institute.html index 7e60309571e11a94c9d725e7934817651e918da2..a79ff6cc547696db1bff202ab5ca8bb481602809 100644 --- a/backend/src/main/resources/templates/fragments/institute.html +++ b/backend/src/main/resources/templates/fragments/institute.html @@ -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> diff --git a/backend/src/main/resources/templates/fragments/map.html b/backend/src/main/resources/templates/fragments/map.html index 7fce9d1ec4155e167d3faf5572ee1c9968613750..35ebed333c5c5eaf55160f400e5ebde01313cf24 100644 --- a/backend/src/main/resources/templates/fragments/map.html +++ b/backend/src/main/resources/templates/fragments/map.html @@ -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"/> diff --git a/backend/src/main/resources/templates/fragments/row.html b/backend/src/main/resources/templates/fragments/row.html index e5eb9e7f78172597de3e88235ae796c77c9a08e4..8676b5906b77ae97d6e8c2ca826839450ce28842 100644 --- a/backend/src/main/resources/templates/fragments/row.html +++ b/backend/src/main/resources/templates/fragments/row.html @@ -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> diff --git a/backend/src/main/resources/templates/fragments/source.html b/backend/src/main/resources/templates/fragments/source.html index 795717ca8c2df1445dbf30999e6fbc8dc5b65a1a..b09638810885559be62d0c5448adecd617dbe2fb 100644 --- a/backend/src/main/resources/templates/fragments/source.html +++ b/backend/src/main/resources/templates/fragments/source.html @@ -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> diff --git a/backend/src/main/resources/templates/fragments/xrefs.html b/backend/src/main/resources/templates/fragments/xrefs.html index 508b8923a8944dbdf0760d4b58e49a80156bca84..c60310b69c5d852b7a636d9ab7392d0a52d2b553 100644 --- a/backend/src/main/resources/templates/fragments/xrefs.html +++ b/backend/src/main/resources/templates/fragments/xrefs.html @@ -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> diff --git a/backend/src/main/resources/templates/germplasm.html b/backend/src/main/resources/templates/germplasm.html index 15ccd615a62c962ec5047510bef07a4cdd6a2652..26c1a85bb55893c61dc237858e1f3a1a88f66be9 100644 --- a/backend/src/main/resources/templates/germplasm.html +++ b/backend/src/main/resources/templates/germplasm.html @@ -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> - <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.parent2DbId}"> + <div th:replace="fragments/row::row(label=${model.pedigree.parent2Type}, content=~{::#parent2-link})"> + <a id="parent2-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent2DbId})}" th:text="${model.pedigree.parent2Name}"></a> + </div> + </th:block> + </div> + </div> + </th:block> - <th:block th:if="${model.pedigree.parent2DbId}"> - <div th:replace="fragments/row::row(label=${model.pedigree.parent2Type}, content=~{::#parent2-link})"> - <a id="parent2-link" th:href="@{/germplasms/{germplasmId}(germplasmId=${model.pedigree.parent2DbId})}" th:text="${model.pedigree.parent2Name}"></a> - </div> - </th:block> + <th:block th:unless="${#lists.isEmpty(model.pedigree.siblings)}"> + <div th:replace="fragments/row::row(label='Sibling accessions', content=~{::#sibling-accessions})"> + <div id="sibling-accessions" class="content-overflow"> + <a th:each="sibling : ${model.pedigree.siblings}" + th:href="@{/germplasms/{germplasmId}(germplasmId=${sibling.germplasmDbId})}" + th:text="${sibling.defaultDisplayName}"></a> + </div> </div> - </div> + </th:block> </th:block> - <th:block th:unless="${#lists.isEmpty(model.pedigree.siblings)}"> - <div th:replace="fragments/row::row(label='Sibling accessions', content=~{::#sibling-accessions})"> - <div id="sibling-accessions" class="content-overflow"> - <a th:each="sibling : ${model.pedigree.siblings}" - th:href="@{/germplasms/{germplasmId}(germplasmId=${sibling.germplasmDbId})}" - th:text="${sibling.defaultDisplayName}"></a> + <th:block th:unless="${#lists.isEmpty(model.germplasm.children)}"> + <div th:replace="fragments/row::row(label='Descendants', content=~{::#descendants})"> + <div id="descendants" class="content-overflow content-overflow-big"> + <th:block th:each="child : ${model.germplasm.children}"> + <div th:replace="fragments/row::row(label=${#strings.isEmpty(child.secondParentName) ? ('children of ' + child.firstParentName) : ('children of ' + child.firstParentName + ' x ' + child.secondParentName) }, content=~{::.descendant-child})"> + <div class="descendant-child"> + <th:block th:each="sibling, siblingIterStat : ${child.sibblings}"> + <a th:href="@{/germplasms(pui=${sibling.pui})}" + th:text="${sibling.name}"></a><th:block th:unless="${siblingIterStat.last}">, </th:block> + </th:block> + </div> + </div> + </th:block> </div> </div> </th:block> - </th:block> - - <th:block th:unless="${#lists.isEmpty(model.germplasm.children)}"> - <div th:replace="fragments/row::row(label='Descendants', content=~{::#descendants})"> - <div id="descendants" class="content-overflow-big"> - <th:block th:each="child : ${model.germplasm.children}"> - <div th:replace="fragments/row::row(label=${#strings.isEmpty(child.secondParentName) ? ('children of ' + child.firstParentName) : ('children of ' + child.firstParentName + ' x ' + child.secondParentName) }, content=~{::.descendant-child})"> - <div class="descendant-child"> - <th:block th:each="sibling, siblingIterStat : ${child.sibblings}"> - <a th:href="@{/germplasms(pui=${sibling.pui})}" - th:text="${sibling.name}"></a><th:block th:unless="${siblingIterStat.last}">, </th:block> - </th:block> + </div> + </div> + + <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.population)}"> + <h2>Population</h2> + <div class="f-card-body"> + <th:block th:each="population : ${model.germplasm.population}"> + + <th:block th:if="${population.germplasmRef != null}"> + <th:block th:unless="${#strings.isEmpty(population.germplasmRef.pui)}"> + <div th:replace="fragments/row::row(label=${#faidare.collPopTitle(population)}, content=~{::.population-1})"> + <div class="population-1"> + <a th:if="${population.germplasmRef.pui != model.germplasm.germplasmPUI}" + th:href="@{/germplasms(pui=${population.germplasmRef.pui})}" + th:text="${population.germplasmRef.name}"></a> + <span th:if="${population.germplasmRef.pui == model.germplasm.germplasmPUI}" + th:text="${population.germplasmRef.name}"></span> + is composed by <span th:text="${population.germplasmCount}"></span> accession(s) + <!-- TODO there was a link pointing at a search here --> </div> </div> </th:block> - </div> - </div> - </th:block> - - </th:block> + </th:block> - <th:block th:unless="${#lists.isEmpty(model.germplasm.population)}"> - <h2>Population</h2> - <th:block th:each="population : ${model.germplasm.population}"> - - <th:block th:if="${population.germplasmRef != null}"> - <th:block th:unless="${#strings.isEmpty(population.germplasmRef.pui)}"> - <div th:replace="fragments/row::row(label=${#faidare.collPopTitle(population)}, content=~{::.population-1})"> - <div class="population-1"> - <a th:if="${population.germplasmRef.pui != model.germplasm.germplasmPUI}" - th:href="@{/germplasms(pui=${population.germplasmRef.pui})}" - th:text="${population.germplasmRef.name}"></a> - <span th:if="${population.germplasmRef.pui == model.germplasm.germplasmPUI}" - th:text="${population.germplasmRef.name}"></span> - is composed by <span th:text="${population.germplasmCount}"></span> accession(s) - <!-- TODO there was a link pointing at a search here --> - </div> - </div> + <th:block th:if="${population.germplasmRef == null}"> + <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(population)}, text=${population.germplasmCount + ' accession(s)'})"></div> + <!-- TODO there was a link pointing at a search here --> </th:block> </th:block> + </div> + </div> - <th:block th:if="${population.germplasmRef == null}"> - <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(population)}, text=${population.germplasmCount + ' accession(s)'})"></div> + <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.collection)}"> + <h2>Collection</h2> + <div class="f-card-body"> + <th:block th:each="collection : ${model.germplasm.collection}"> + <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(collection)}, text=${collection.germplasmCount + ' accession(s)'})"></div> <!-- TODO there was a link pointing at a search here --> </th:block> - </th:block> - </th:block> - - <th:block th:unless="${#lists.isEmpty(model.germplasm.collection)}"> - <h2>Collection</h2> - <th:block th:each="collection : ${model.germplasm.collection}"> - <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitle(collection)}, text=${collection.germplasmCount + ' accession(s)'})"></div> - <!-- TODO there was a link pointing at a search here --> - </th:block> - </th:block> + </div> + </div> - <th:block th:unless="${#lists.isEmpty(model.germplasm.panel)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.germplasm.panel)}"> <h2>Panel</h2> - <th:block th:each="panel : ${model.germplasm.panel}"> - <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitleWithoutUnderscores(panel)}, text=${panel.germplasmCount + ' accession(s)'})"></div> - <!-- TODO there was a link pointing at a search here --> - </th:block> - </th:block> + <div class="f-card-body"> + <th:block th:each="panel : ${model.germplasm.panel}"> + <div th:replace="fragments/row::text-row(label=${#faidare.collPopTitleWithoutUnderscores(panel)}, text=${panel.germplasmCount + ' accession(s)'})"></div> + <!-- TODO there was a link pointing at a search here --> + </th:block> + </div> + </div> <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div> </main> diff --git a/backend/src/main/resources/templates/layout/main.html b/backend/src/main/resources/templates/layout/main.html index 47bfcf0df3d82f2896d30a56c84c428c8d976ce0..22c36a5efb6dfe860a20b41f520ba826d160e96b 100644 --- a/backend/src/main/resources/templates/layout/main.html +++ b/backend/src/main/resources/templates/layout/main.html @@ -12,18 +12,17 @@ </head> <body> - <div class="container"> - <header> - Common header - </header> - + <nav class="navbar navbar-expand-lg navbar-light bg-light"> + <div class="container"> + <span class="navbar-brand py-0"> + <img th:src="@{/assets/images/logo.png}" style="height: 40px"/> + </span> + </div> + </nav> + <div class="container mt-3"> <div th:replace="${content}"> <p>Layout content</p> </div> - - <footer> - common footer - </footer> </div> <script type="text/javascript" th:src="@{/assets/script.js}"></script> <script type="text/javascript" th:replace="${script}"></script> diff --git a/backend/src/main/resources/templates/site.html b/backend/src/main/resources/templates/site.html index d859f4f29e5d6ec3a2f0803235d2922a286ee2bd..c3bd01b26333e960cd766f7ad3418605e2057483 100644 --- a/backend/src/main/resources/templates/site.html +++ b/backend/src/main/resources/templates/site.html @@ -15,48 +15,55 @@ <div th:replace="fragments/map::map"></div> - <th:block th:if="${model.site.uri != null && !model.site.uri.startsWith('urn:')}"> - <div th:replace="fragments/row::text-row(label='Permanent unique identifier', text=${model.site.uri})"></div> - </th:block> + <div class="f-card mt-4"> + <h2>Details</h2> + <div class="f-card-body"> + <th:block th:if="${model.site.uri != null && !model.site.uri.startsWith('urn:')}"> + <div th:replace="fragments/row::text-row(label='Permanent unique identifier', text=${model.site.uri})"></div> + </th:block> - <div th:replace="fragments/source::source(source=${model.source}, url=${model.site.url}, entityType='site')"></div> + <div th:replace="fragments/source::source(source=${model.source}, url=${model.site.url}, entityType='site')"></div> - <div th:replace="fragments/row::text-row(label='Abbreviation', text=${model.site.abbreviation})"></div> - <div th:replace="fragments/row::text-row(label='Type', text=${model.site.locationType})"></div> - <div th:replace="fragments/row::text-row(label='Status', text=${model.siteStatus})"></div> - <div th:replace="fragments/row::text-row(label='Institution/Landowner', text=${model.site.instituteName})"></div> - <div th:replace="fragments/row::text-row(label='Institution address', text=${model.site.instituteAddress})"></div> - <div th:replace="fragments/row::text-row(label='Coordinates precision', text=${model.coordinatesPrecision})"></div> - <th:block th:if="${model.site.latitude}"> - <div th:replace="fragments/row::text-row(label='Latitude', text=${#coordinates.formatLatitude(model.site.latitude)})"></div> - </th:block> - <th:block th:if="${model.site.longitude}"> - <div th:replace="fragments/row::text-row(label='Longitude', text=${#coordinates.formatLongitude(model.site.longitude)})"></div> - </th:block> - <div th:replace="fragments/row::text-row(label='Geographical location', text=${model.geographicalLocation})"></div> - <th:block th:if="${model.site.countryName != null && model.geographicalLocation == null}"> - <div th:replace="fragments/row::text-row(label='Country name', text=${model.site.countryName})"></div> - </th:block> + <div th:replace="fragments/row::text-row(label='Abbreviation', text=${model.site.abbreviation})"></div> + <div th:replace="fragments/row::text-row(label='Type', text=${model.site.locationType})"></div> + <div th:replace="fragments/row::text-row(label='Status', text=${model.siteStatus})"></div> + <div th:replace="fragments/row::text-row(label='Institution/Landowner', text=${model.site.instituteName})"></div> + <div th:replace="fragments/row::text-row(label='Institution address', text=${model.site.instituteAddress})"></div> + <div th:replace="fragments/row::text-row(label='Coordinates precision', text=${model.coordinatesPrecision})"></div> + <th:block th:if="${model.site.latitude}"> + <div th:replace="fragments/row::text-row(label='Latitude', text=${#coordinates.formatLatitude(model.site.latitude)})"></div> + </th:block> + <th:block th:if="${model.site.longitude}"> + <div th:replace="fragments/row::text-row(label='Longitude', text=${#coordinates.formatLongitude(model.site.longitude)})"></div> + </th:block> + <div th:replace="fragments/row::text-row(label='Geographical location', text=${model.geographicalLocation})"></div> + <th:block th:if="${model.site.countryName != null && model.geographicalLocation == null}"> + <div th:replace="fragments/row::text-row(label='Country name', text=${model.site.countryName})"></div> + </th:block> - <th:block th:if="${model.site.countryCode != null && model.geographicalLocation == null}"> - <div th:replace="fragments/row::text-row(label='Country code', text=${model.site.countryName})"></div> - </th:block> + <th:block th:if="${model.site.countryCode != null && model.geographicalLocation == null}"> + <div th:replace="fragments/row::text-row(label='Country code', text=${model.site.countryName})"></div> + </th:block> - <div th:replace="fragments/row::text-row(label='Altitude', text=${model.site.altitude})"></div> - <div th:replace="fragments/row::text-row(label='Slope', text=${model.slope})"></div> - <div th:replace="fragments/row::text-row(label='Exposure', text=${model.exposure})"></div> - <div th:replace="fragments/row::text-row(label='Topography', text=${model.topography})"></div> - <div th:replace="fragments/row::text-row(label='Environment type', text=${model.environmentType})"></div> - <div th:replace="fragments/row::text-row(label='Distance to city', text=${model.distanceToCity})"></div> - <div th:replace="fragments/row::text-row(label='Direction from city', text=${model.directionFromCity})"></div> - <div th:replace="fragments/row::text-row(label='Comment', text=${model.comment})"></div> + <div th:replace="fragments/row::text-row(label='Altitude', text=${model.site.altitude})"></div> + <div th:replace="fragments/row::text-row(label='Slope', text=${model.slope})"></div> + <div th:replace="fragments/row::text-row(label='Exposure', text=${model.exposure})"></div> + <div th:replace="fragments/row::text-row(label='Topography', text=${model.topography})"></div> + <div th:replace="fragments/row::text-row(label='Environment type', text=${model.environmentType})"></div> + <div th:replace="fragments/row::text-row(label='Distance to city', text=${model.distanceToCity})"></div> + <div th:replace="fragments/row::text-row(label='Direction from city', text=${model.directionFromCity})"></div> + <div th:replace="fragments/row::text-row(label='Comment', text=${model.comment})"></div> + </div> + </div> - <th:block th:unless="${#lists.isEmpty(model.additionalInfoProperties)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.additionalInfoProperties)}"> <h2>Additional info</h2> - <th:block th:each="prop : ${model.additionalInfoProperties}"> - <div th:replace="fragments/row::text-row(label=${prop.key}, text=${prop.value})"></div> - </th:block> - </th:block> + <div class="f-card-body"> + <th:block th:each="prop : ${model.additionalInfoProperties}"> + <div th:replace="fragments/row::text-row(label=${prop.key}, text=${prop.value})"></div> + </th:block> + </div> + </div> <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div> </main> diff --git a/backend/src/main/resources/templates/study.html b/backend/src/main/resources/templates/study.html index c2ee9a3ba0ec73b15de54a5861f15a288b4b174a..225b6cc8a6911b3c934157e91aab55b462e7a756 100644 --- a/backend/src/main/resources/templates/study.html +++ b/backend/src/main/resources/templates/study.html @@ -15,51 +15,53 @@ <div th:replace="fragments/map::map"></div> - <h2>Identification</h2> - - <div th:replace="fragments/row::text-row(label='Name', text=${model.study.studyName})"></div> - <div th:replace="fragments/row::text-row(label='Identifier', text=${model.study.studyDbId})"></div> - - <div th:replace="fragments/source::source(source=${model.source}, url=${model.study.url}, entityType='study')"></div> - - <div th:replace="fragments/row::text-row(label='Project name', text=${model.study.programName})"></div> - <div th:replace="fragments/row::text-row(label='Description', text=${model.study.studyDescription})"></div> - <th:block th:if="${model.study.active != null}"> - <div th:replace="fragments/row::text-row(label='Active', text=${model.study.active ? 'Yes' : 'No'})"></div> - </th:block> - - <th:block th:unless="${#lists.isEmpty(model.study.seasons)}"> - <div th:replace="fragments/row::text-row(label='Seasons', text=${#strings.listJoin(model.study.seasons, ',')})"></div> - </th:block> - <th:block th:if="${model.study.startDate != null && model.study.endDate != null}"> - <div th:replace="fragments/row::text-row(label='Date', text=${'From ' + #dates.format(model.study.startDate, 'yyyy-MM-dd') + ' to ' + #dates.format(model.study.endDate, 'yyyy-MM-dd') })"></div> - </th:block> - <th:block th:if="${model.study.startDate != null && model.study.endDate == null}"> - <div th:replace="fragments/row::text-row(label='Date', text=${'Started on ' + #dates.format(model.study.startDate, 'yyyy-MM-dd')})"></div> - </th:block> - - <th:block th:if="${model.study.locationDbId}"> - <div th:replace="fragments/row::row(label='Location name', content=~{::#location})"> - <a id="location" th:href="@{/sites/{siteId}(siteId=${model.study.locationDbId})}" th:text="${model.study.locationName}"></a> + <div class="f-card mt-4"> + <h2>Identification</h2> + <div class="f-card-body"> + <div th:replace="fragments/row::text-row(label='Name', text=${model.study.studyName})"></div> + <div th:replace="fragments/row::text-row(label='Identifier', text=${model.study.studyDbId})"></div> + + <div th:replace="fragments/source::source(source=${model.source}, url=${model.study.url}, entityType='study')"></div> + + <div th:replace="fragments/row::text-row(label='Project name', text=${model.study.programName})"></div> + <div th:replace="fragments/row::text-row(label='Description', text=${model.study.studyDescription})"></div> + <th:block th:if="${model.study.active != null}"> + <div th:replace="fragments/row::text-row(label='Active', text=${model.study.active ? 'Yes' : 'No'})"></div> + </th:block> + + <th:block th:unless="${#lists.isEmpty(model.study.seasons)}"> + <div th:replace="fragments/row::text-row(label='Seasons', text=${#strings.listJoin(model.study.seasons, ',')})"></div> + </th:block> + <th:block th:if="${model.study.startDate != null && model.study.endDate != null}"> + <div th:replace="fragments/row::text-row(label='Date', text=${'From ' + #dates.format(model.study.startDate, 'yyyy-MM-dd') + ' to ' + #dates.format(model.study.endDate, 'yyyy-MM-dd') })"></div> + </th:block> + <th:block th:if="${model.study.startDate != null && model.study.endDate == null}"> + <div th:replace="fragments/row::text-row(label='Date', text=${'Started on ' + #dates.format(model.study.startDate, 'yyyy-MM-dd')})"></div> + </th:block> + + <th:block th:if="${model.study.locationDbId}"> + <div th:replace="fragments/row::row(label='Location name', content=~{::#location})"> + <a id="location" th:href="@{/sites/{siteId}(siteId=${model.study.locationDbId})}" th:text="${model.study.locationName}"></a> + </div> + </th:block> + + <th:block th:unless="${#lists.isEmpty(model.study.dataLinks)}"> + <div th:replace="fragments/row::row(label='Data files', content=~{::#data-files})"> + <ul id="data-files" class="list-unstyled"> + <li th:each="dataLink : ${model.study.dataLinks}"> + <a target="_blank" th:href="${dataLink.url}" th:text="${dataLink.name}"></a> + </li> + </ul> + </div> + </th:block> </div> - </th:block> - - <th:block th:unless="${#lists.isEmpty(model.study.dataLinks)}"> - <div th:replace="fragments/row::row(label='Data files', content=~{::#data-files})"> - <ul id="data-files" class="list-unstyled"> - <li th:each="dataLink : ${model.study.dataLinks}"> - <a target="_blank" th:href="${dataLink.url}" th:text="${dataLink.name}"></a> - </li> - </ul> - </div> - </th:block> + </div> - <th:block th:unles="${#lists.isEmpty(model.germplasms)}"> + <div class="f-card" th:unles="${#lists.isEmpty(model.germplasms)}"> <h2>Genotype</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 scroll-table-container-big"> + <table class="table table-sm table-striped table-sticky table-responsive-sm"> <thead> <tr> <th scope="col">Accession number</th> @@ -79,13 +81,13 @@ </table> </div> </div> - </th:block> + </div> - <th:block th:unless="${#lists.isEmpty(model.variables)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.variables)}"> <h2>Variables</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">Variable ID</th> @@ -110,13 +112,13 @@ </table> </div> </div> - </th:block> + </div> - <th:block th:unless="${#lists.isEmpty(model.trials)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.trials)}"> <h2>Data Set</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> @@ -144,13 +146,13 @@ </table> </div> </div> - </th:block> + </div> - <th:block th:unless="${#lists.isEmpty(model.study.contacts)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.study.contacts)}"> <h2>Contact</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">Role</th> @@ -170,23 +172,23 @@ </table> </div> </div> - </th:block> + </div> - <th:block th:unless="${#lists.isEmpty(model.additionalInfoProperties)}"> + <div class="f-card" th:unless="${#lists.isEmpty(model.additionalInfoProperties)}"> <h2>Additional information</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"> <tbody> <tr th:each="row : ${model.additionalInfoProperties}"> - <td style="width: 50%;" th:text="${row.key}"></td> + <th class="label" style="width: 33.33%" th:text="${row.key}" scope="row"></th> <td th:text="${row.value}"></td> </tr> </tbody> </table> </div> </div> - </th:block> + </div> <div th:replace="fragments/xrefs::xrefs(crossReferences=${model.crossReferences})"></div> </main> diff --git a/web/src/style/style.scss b/web/src/style/style.scss index 4dd56d61bdc40bf1e309350b277e193b1380a115..42aa2bb3a883a5991772d6b9cbe4eddb0eb7d267 100644 --- a/web/src/style/style.scss +++ b/web/src/style/style.scss @@ -1,14 +1,53 @@ +$headings-color: #0f6191; +$border-color: #0f6e9f; +$link-color: #0f6fa1; +$link-decoration: none; +$link-hover-decoration: underline; +$enable-shadows: true; +$table-border-color: #dee2e6; +$table-group-separator-color: $table-border-color; + @import 'custom-bootstrap'; @import '~leaflet/dist/leaflet.css'; @import '~leaflet.markercluster/dist/MarkerCluster.css'; @import '~leaflet.markercluster/dist/MarkerCluster.Default.css'; -.label { - font-weight: 500; +a[role=button] { + color: $link-color !important; +} + +.f-row { + border-top: 1px solid $gray-300; + padding: 0.5rem 0; + .label { + font-weight: 700; + } +} + +.f-card { + border: 1px solid $border-color; + border-radius: 0.25rem; + margin: 0.5rem 0; + h2 { + font-size: $h4-font-size; + padding: 0.5rem 1rem; + background-image: repeating-linear-gradient(#0f96cd, #0f6191, #0f76a5); + color: $white; + } + .f-card-body { + padding: 0.25rem 1rem; + .f-row:first-of-type { + border-top: 0; + } + } } .popover { - max-width: min(80vw, 600px); + max-width: min(80vw, 500px); +} + +.popover-header { + font-weight: 700; } #map { @@ -19,3 +58,34 @@ height: 1.5rem; } +.content-overflow { + max-height: 200px; + overflow-y: auto; + overflow-x: hidden; + &.content-overflow-big { + max-height: 275px; + } +} + +.scroll-table-container { + max-height: 200px; + overflow-y: auto; + padding-top: 0; + &.scroll-table-container-big { + max-height: 500px; + } +} + +.table-sticky { + width: 100%; + thead th { + position: sticky; + position: -webkit-sticky; + top: 0; + background-color: white; + border-top-width: 0; + th { + padding-top: 0; + } + } +}