Landing tabs: Add border-left and radius-left, reduce gutter between sections and align section content with Tab name.

This commit is contained in:
Konstantinos Triantafyllou 2023-07-06 16:29:17 +03:00
parent 76cb586ebd
commit 201792b0e3
5 changed files with 39 additions and 39 deletions

View File

@ -688,7 +688,7 @@
</ng-template>
<ng-template #projects_content>
<div id="projects" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="projects" class="landing-section">
<search-tab [fetch]="fetchProjects" resultType="project"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects"
@ -698,7 +698,7 @@
</ng-template>
<ng-template #dataproviders_content>
<div id="datasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="datasources" class="landing-section">
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
@ -708,7 +708,7 @@
</ng-template>
<ng-template #publications_content>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="publications" class="landing-section">
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -718,7 +718,7 @@
</ng-template>
<ng-template #datasets_content>
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="datasets" class="landing-section">
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -728,7 +728,7 @@
</ng-template>
<ng-template #software_content>
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="software" class="landing-section">
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -738,7 +738,7 @@
</ng-template>
<ng-template #other_content>
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="other" class="landing-section">
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -748,7 +748,7 @@
</ng-template>
<ng-template #relatedDatasources_content>
<div id="relatedDatasources" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="relatedDatasources" class="landing-section">
<relatedDatasourcesTab
[dataproviderId]="datasourceId"
[results]="dataProviderInfo.relatedDatasources"
@ -762,7 +762,7 @@
</ng-template>
<ng-template #statistics_content>
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="statistics" class="landing-section">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
@ -779,7 +779,7 @@
</ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="metrics" class="landing-section">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove">
<a href="#">Overview</a>

View File

@ -207,13 +207,13 @@
</div>
<!-- Tabs content section -->
<div id="landing-sections" class="uk-text-small">
<div id="projects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div id="projects" class="landing-section landing-section-height-auto">
<projectsInModal [fetchProjects]="fetchProjects"
[organizationId]="organizationId" [properties]=properties [prevPath]="prevPath">
</projectsInModal>
</div>
<div *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0"
id="dataProviders" class="landing-section uk-padding uk-padding-remove-horizontal">
id="dataProviders" class="landing-section">
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
@ -221,7 +221,7 @@
</search-tab>
</div>
<div *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0"
id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
id="publications" class="landing-section">
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -229,7 +229,7 @@
</search-tab>
</div>
<div *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0"
id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
id="datasets" class="landing-section">
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -237,7 +237,7 @@
</search-tab>
</div>
<div *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0"
id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
id="software" class="landing-section">
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -245,7 +245,7 @@
</search-tab>
</div>
<div *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0"
id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
id="other" class="landing-section">
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -532,13 +532,13 @@
</fs-modal>
<fs-modal *ngIf="isMobile" #fsModal classTitle="uk-tile-default uk-border-bottom">
<div *ngIf="activeTab == 'projects'" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div *ngIf="activeTab == 'projects'" class="landing-section landing-section-height-auto">
<projectsInModal [fetchProjects]="fetchProjects"
[organizationId]="organizationId" [properties]=properties [prevPath]="prevPath">
</projectsInModal>
</div>
<div *ngIf="activeTab == 'dataProviders' && fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0"
class="landing-section uk-padding uk-padding-remove-horizontal">
class="landing-section">
<search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
[params]="getParamsForSearchLink()"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
@ -546,7 +546,7 @@
</search-tab>
</div>
<div *ngIf="activeTab == 'publications' && fetchPublications && fetchPublications.searchUtils.totalResults > 0"
class="landing-section uk-padding uk-padding-remove-horizontal">
class="landing-section">
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -554,7 +554,7 @@
</search-tab>
</div>
<div *ngIf="activeTab == 'datasets' && fetchDatasets && fetchDatasets.searchUtils.totalResults > 0"
class="landing-section uk-padding uk-padding-remove-horizontal">
class="landing-section">
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -562,7 +562,7 @@
</search-tab>
</div>
<div *ngIf="activeTab == 'software' && fetchSoftware && fetchSoftware.searchUtils.totalResults > 0"
class="landing-section uk-padding uk-padding-remove-horizontal">
class="landing-section">
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -570,7 +570,7 @@
</search-tab>
</div>
<div *ngIf="activeTab == 'other' && fetchOrps && fetchOrps.searchUtils.totalResults > 0"
class="landing-section uk-padding uk-padding-remove-horizontal">
class="landing-section">
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"

View File

@ -740,7 +740,7 @@
</ng-template>
<ng-template #publications_content>
<div id="publications" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="publications" class="landing-section">
<search-tab [fetch]="fetchPublications" resultType="publication"
[params]="getParamsForSearchLink('publications')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -750,7 +750,7 @@
</ng-template>
<ng-template #datasets_content>
<div id="datasets" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="datasets" class="landing-section">
<search-tab [fetch]="fetchDatasets" resultType="dataset"
[params]="getParamsForSearchLink('datasets')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -760,7 +760,7 @@
</ng-template>
<ng-template #software_content>
<div id="software" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="software" class="landing-section">
<search-tab [fetch]="fetchSoftware" resultType="software"
[params]="getParamsForSearchLink('software')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -770,7 +770,7 @@
</ng-template>
<ng-template #other_content>
<div id="other" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="other" class="landing-section">
<search-tab [fetch]="fetchOrps" resultType="other"
[params]="getParamsForSearchLink('other')"
[searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
@ -780,7 +780,7 @@
</ng-template>
<ng-template #dmps_content>
<div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="dmps" class="landing-section">
<search-tab [fetch]="fetchDmps" customTitle="Data Management Plans"
[properties]="properties" resultType="DMPs" [prevPath]="prevPath">
<div class="uk-margin-medium-top uk-margin-bottom uk-width-1-1 uk-flex uk-flex-center uk-flex-middle">
@ -801,7 +801,7 @@
</ng-template>
<ng-template #statistics_content>
<div id="statistics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="statistics" class="landing-section">
<div class="uk-text-meta uk-text-large uk-text-uppercase uk-margin-medium-bottom">Statistics</div>
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
@ -843,7 +843,7 @@
</ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="metrics" class="landing-section">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove">
<a href="#">Overview</a>

View File

@ -313,17 +313,17 @@
<ng-container *ngTemplateOutlet="references_content"></ng-container>
</ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div id="all_related" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="all_related" class="landing-section">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="bioentities" class="landing-section">
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL">
<div id="enermaps" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="enermaps" class="landing-section">
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
</div>
</ng-container>
@ -699,14 +699,14 @@
<fs-modal #relatedResearchFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.relatedResults?.length > 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="landing-section">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</fs-modal>
<fs-modal #bioentitiesFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<div class="landing-section">
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
</div>
</fs-modal>
@ -733,7 +733,7 @@
</fs-modal>
<fs-modal #enermapsToolFsModal classTitle="uk-tile-default uk-border-bottom">
<div *ngIf="enermapsId && properties.enermapsURL" class="landing-section uk-padding uk-padding-remove-horizontal">
<div *ngIf="enermapsId && properties.enermapsURL" class="landing-section">
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
</div>
</fs-modal>
@ -856,7 +856,7 @@
</ng-template>
<ng-template #summary_content>
<div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div id="summary" class="landing-section landing-section-height-auto">
<div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available
@ -909,7 +909,7 @@
</ng-template>
<ng-template #subjects_content>
<div id="subjects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<div id="subjects" class="landing-section landing-section-height-auto">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects"
@ -923,7 +923,7 @@
</ng-template>
<ng-template #references_content>
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="references" class="landing-section">
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
[page]="referencesPage" [pageSize]="pageSize"
[totalResults]="resultLandingInfo.references.length">
@ -1028,7 +1028,7 @@
</ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<div id="metrics" class="landing-section">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li class="uk-padding-remove">
<a href="#">Overview</a>

View File

@ -51,7 +51,7 @@ import {TabComponent} from './tab.component';
<ng-container *ngFor="let tab of tabs.toArray(); let i=index">
<ng-container *ngIf="tab.customClass">
<div class="uk-width-small">
<ul class="uk-tab uk-height-1-1">
<ul class="uk-tab uk-height-1-1" [class.uk-flex-right]="tab.tabId == 'statistics'">
<li [ngClass]="tab.customClass" (click)="selectTab(tab)" [class.uk-active]="tab.active" >
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<!--<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"