home link, header button, grid gap, theming (themes to assets)
MODIFY
.eslintrc.json
.eslintrc.json
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:prettier/recommended"
],
- "rules": {}
+ "rules": {
+ "@typescript-eslint/no-unsafe-assignment": "off"
+ }
},
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
{

MODIFY
angular.json
angular.json
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss",
- "src/themes/default.scss",
+ "src/assets/themes/default.scss",
"node_modules/swagger-ui-dist/swagger-ui.css",
"node_modules/simplebar/dist/simplebar.css"
],

MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
type="search"
[placeholder]="'MPLACE.SEARCH' | translate"
class="search-input"
- value="{{this.searchTerm}}"
+ value="{{searchTerm}}"
(input)="OnInput($event)"
/>
</mat-form-field>

MODIFY
src/app/components/api-card-list/api-card-list.component.scss
src/app/components/api-card-list/api-card-list.component.scss
margin-top: 2%;
margin-bottom: 2%;
display: grid;
- justify-content: space-around;
+ justify-content: center;
align-items: end;
grid-template-columns: repeat(auto-fit, 370px);
- grid-column-gap: 16px;
+ grid-column-gap: 32px;
grid-row-gap: 32px;
}

MODIFY
src/app/components/footer/footer.component.ts
src/app/components/footer/footer.component.ts
import { Component, OnInit } from '@angular/core';
-import { ConfigService } from '../../services/config/config.service';
import { IFooter, ILink } from '../../interfaces/IConfig';
import { FooterService } from '../../services/footer/footer.service';

MODIFY
src/app/components/header/header.component.scss
src/app/components/header/header.component.scss
#hero-btn {
position: absolute;
- bottom: 10%;
- left: 3%;
+ top: 10%;
+ right: 3%;
}
.hero-large {

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
@@ -24,6 +24,7 @@ export interface IHero {
export interface INavigation {
links: ILink[];
separator: string;
+ showHomeLink: boolean;
}
export interface IFooter {

MODIFY
src/app/services/config/config.service.ts
src/app/services/config/config.service.ts
@@ -13,12 +13,12 @@ import { HttpClient } from '@angular/common/http';
providedIn: 'root',
})
export class ConfigService {
- config: any | IConfig;
+ config!: IConfig;
constructor(private http: HttpClient) {}
- async readAndEvaluateConfig(): Promise<any> {
- this.config = await this.http.get('assets/config.json').toPromise();
+ async readAndEvaluateConfig(): Promise<IConfig> {
+ this.config = <IConfig> await this.http.get('assets/config.json').toPromise();
try {
JSON.stringify(this.config);
@@ -61,7 +61,11 @@ export class ConfigService {
return { ...this.config.terms };
}
- setConfig(config: any) {
+ getShowHomeLink(): boolean {
+ return this.config.navigation.showHomeLink;
+ }
+
+ setConfig(config: IConfig) {
this.config = config;
}
}

MODIFY
src/app/services/navigation/navigation.service.ts
src/app/services/navigation/navigation.service.ts
@@ -41,6 +41,14 @@ export class NavigationService {
}
private initLinks(): INavigation {
+ if (this.configService.getShowHomeLink()) {
+ this.links.unshift({
+ name: this.translator.instant('COMMON.HOME'),
+ link: 'home',
+ openInNewTab: false,
+ });
+ }
+
const navigationConfig = this.configService.getNavigation();
navigationConfig.links = this.links.concat(navigationConfig.links);

MODIFY
src/assets/config.json
src/assets/config.json
"overlayColor": "rgba(200, 200, 200, 0.4)"
},
"navigation": {
+ "showHomeLink": true,
"links": [
{
"name": "External Puppy Link",

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"APPLICATION": "Application",
"NO_DATA_FOUND": "No data found",
"CONFIRM": "Confirm",
- "SIGNUP": "Signup"
+ "SIGNUP": "Signup",
+ "HOME": "Home"
},
"HOME": {
"TITLE": "KoolBank Api Developer Portal",

RENAME
src/themes/custom.scss
src/assets/themes/custom.scss
-@import '~@angular/material/theming';
+@import '../../../node_modules/@angular/material/theming';
@include mat-core();
:root {

RENAME
src/themes/default.scss
src/assets/themes/default.scss
-@import '~@angular/material/theming';
+@import '../../../node_modules/@angular/material/theming';
@include mat-core();
$primary-palette: mat-palette($mat-indigo);

MODIFY
src/styles.scss
src/styles.scss
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
-@import './themes/custom';
+@import 'assets/themes/default';
@include mat-core();
/***** THEMING *****/

home link, header button, grid gap, theming (themes to assets)