style/fix: api detail page style - same height for cards with different number of policies, headings, language / fixed navigation routes link highlighting
MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<div>{{ api.api.description }}</div>
</div>
+ <h2 class="primary mt-rem-3">{{'API_DETAILS.EXTENDED_DESCRIPTION' | translate}}</h2>
+
<!-- Template for MD-Reader -->
<ng-template #mdTemplate>
<div class="box" id="long-description-tile" data-simplebar>
<!-- Template for Key Features -->
<ng-template #featuresTemplate>
<div id="key-features" *ngIf="features.length > 0">
- <h1 class="primary">Key Features</h1>
+ <h2 class="primary">{{'API_DETAILS.KEY_FEATURES' | translate}}</h2>
<div>
<mat-list>
<mat-list-item *ngFor="let feature of features">

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
@@ -56,7 +56,7 @@ mat-grid-list {
.md-and-features{
display: grid;
- grid-column-gap: 40px;
+ grid-column-gap: 16px;
grid-template-columns: 3.6fr 1fr;
}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
@@ -13,11 +13,9 @@ export class MarketplaceApiDescriptionComponent implements OnInit {
@Input() isLatest!: boolean;
@Input() apiImgUrl!: string;
- // TODO get features from backend
- features: string[] = [];
- public markDownText = this.translator.instant(
- 'API_DETAILS.NO_EXT_DESCRIPTION'
- );
+ // TODO get features from backend as soon as the endpoint is created
+ features = [];
+ public markDownText = this.translator.instant('API_DETAILS.NO_EXT_DESCRIPTION');
constructor(private translator: TranslateService,
public configService: ConfigService) {

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.scss
src/app/components/marketplace-api-details/marketplace-api-details.component.scss
@@ -9,7 +9,3 @@ p {
.right{
float: right;
}
-
-.plan-card{
- width: 25vw;
-}

MODIFY
src/app/components/navigation/navigation.component.html
src/app/components/navigation/navigation.component.html
<div class="row">
<div class="navigation-links" *ngFor="let link of navigation.links; let last = last">
- <a [href]="link.link" [target]="link.openInNewTab ? '_blank' : '_self'"><span>{{ link.name }}</span></a>
+ <a *ngIf="!link.useRouter; else noRouterLink" [href]="link.link"
+ [target]="link.openInNewTab ? '_blank' : '_self'">
+ <span>{{ link.name }}</span>
+ </a>
+
+ <ng-template #noRouterLink>
+ <a [routerLink]="link.link"
+ routerLinkActive="primary">
+ <span>{{link.name}}</span>
+ </a>
+ </ng-template>
+
<span *ngIf="!last" class="navigation-separator">{{navigation.separator}}</span>
</div>
</div>

MODIFY
src/app/components/navigation/navigation.component.ts
src/app/components/navigation/navigation.component.ts
-import { Component, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { ConfigService } from '../../services/config/config.service';
+import { Component } from '@angular/core';
import { INavigation } from '../../interfaces/IConfig';
import { NavigationService } from '../../services/navigation/navigation.service';

MODIFY
src/app/components/plan-card-list/plan-card-list.component.html
src/app/components/plan-card-list/plan-card-list.component.html
<ng-container *ngIf="plans.length > 0">
- <h2 class="primary mt-rem-3">Plans</h2>
+ <h2 class="primary mt-rem-3">{{'API_DETAILS.PLANS' | translate}}</h2>
</ng-container>
<div id="plan-grid">
<ng-container *ngFor="let plan of plans">
- <mat-card class="plan-card">
- <mat-card-header class="card-header">
- <mat-card-title class="card-header-content mb-rem-1">{{ plan.planName }}</mat-card-title>
- <mat-card-subtitle class="card-header-content">{{ plan.planDescription }}</mat-card-subtitle>
- </mat-card-header>
- <mat-card-content [ngSwitch]="plan.planId + ':' + plan.version">
+ <div class="plan-card mat-elevation-z2">
+ <div class="card-header">
+ <div class="card-header-title primary text-big1">{{ plan.planName }}</div>
+ <div class="card-header-content">{{ plan.planDescription }}</div>
+ </div>
+ <div class="card-content" [ngSwitch]="plan.planId + ':' + plan.version">
<mat-list>
<ng-container *ngIf="apiPolicies.length > 0">
<mat-list-item *ngFor="let policy of apiPolicies">
<span class="right">{{ policy.shortDescription }}</span>
</p>
</mat-list-item>
- <mat-divider></mat-divider>
</ng-container>
</ng-container>
</mat-list>
- </mat-card-content>
- <mat-card-actions id="plan-card-actions">
- <button id="sign-up-button" mat-raised-button color="primary" (click)="onSignUp(plan)">
+ </div>
+ <div class="plan-card-actions">
+ <div>
+ <mat-divider></mat-divider>
+ <button class="sign-up-button" mat-raised-button color="primary" (click)="onSignUp(plan)">
SIGN UP
</button>
- </mat-card-actions>
- </mat-card>
+ </div>
+ </div>
+ </div>
</ng-container>
</div>

MODIFY
src/app/components/plan-card-list/plan-card-list.component.scss
src/app/components/plan-card-list/plan-card-list.component.scss
#plan-grid {
- margin-right: 2%;
display: grid;
justify-content: center;
- align-items: stretch;
grid-template-columns: repeat(auto-fit, 360px);
- grid-column-gap: 2rem;
+ grid-column-gap: 32px;
grid-row-gap: 32px;
}
}
}
-mat-card-actions {
- text-align: center;
- margin-bottom: unset;
-}
-
p {
width: 100%;
}
@@ -34,17 +27,25 @@ p {
}
.plan-card{
- border: 1px solid rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
}
.card-header {
- justify-content: center;
+ text-align: center;
+}
+
+.card-header-title {
+ margin: 0.8rem 0 0.4rem 0;
+ font-weight: 500;
}
-.card-header-content {
+.plan-card-actions{
+ margin-top: auto;
text-align: center;
}
-#sign-up-button {
- width: 50%;
+.sign-up-button{
+ margin-top: 0.6rem;
+ margin-bottom: 0.6rem;
}

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
@@ -41,6 +41,7 @@ export interface ILink {
name: string;
link: string;
openInNewTab: boolean;
+ useRouter?: boolean;
}
export interface IAuthProvider {

MODIFY
src/app/services/navigation/navigation.service.ts
src/app/services/navigation/navigation.service.ts
@@ -14,20 +14,22 @@ export class NavigationService {
name: this.translator.instant('MPLACE.TITLE'),
link: 'marketplace',
openInNewTab: false,
+ useRouter: true
},
{
name: this.translator.instant('APPS.TITLE'),
link: 'applications',
openInNewTab: false,
- },
+ useRouter: true
+ }
// To-Do
// Show account link again once the account page is implemented correctly
// {
// name: this.translator.instant('ACCOUNT.TITLE'),
// link: 'account',
// openInNewTab: false,
- // },
-
+ // useRouter: true
+ // }
];
navigationChanged: EventEmitter<INavigation> =
@@ -46,6 +48,7 @@ export class NavigationService {
name: this.translator.instant('COMMON.HOME'),
link: 'home',
openInNewTab: false,
+ useRouter: true
});
}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"UNREGISTER_BTN": "Unregister"
},
"API_DETAILS": {
+ "PLANS": "Plans",
+ "KEY_FEATURES": "Key Features",
+ "EXTENDED_DESCRIPTION": "Extended Description",
"NO_EXT_DESCRIPTION": "No further description has been stored for this API"
},
"TERMS": {

style/fix: api detail page style - same height for cards with different number of policies, headings, language / fixed navigation routes link highlighting