Basic PAS Design
MODIFY
angular.json
angular.json
"styles": [
"src/styles.scss"
],
- "scripts": []
+ "scripts": [
+ "./node_modules/hammerjs/hammer.min.js"
+ ]
},
"configurations": {
"production": {

MODIFY
package-lock.json
package-lock.json
"tslib": "^1.9.0"
}
},
+ "@angular/cdk": {
+ "version": "8.1.3",
+ "resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/@angular/cdk/-/cdk-8.1.3.tgz",
+ "integrity": "sha512-+DOS6x05/nNdnoRmEi3bgQxKym34PeCRGD6dimdw0l7ZgM57qhlaBWo0dXB7QSyR9E44uVT91e4h8ye+/ne1DQ==",
+ "requires": {
+ "parse5": "^5.0.0",
+ "tslib": "^1.7.1"
+ },
+ "dependencies": {
+ "parse5": {
+ "version": "5.1.0",
+ "resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/parse5/-/parse5-5.1.0.tgz",
+ "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+ "optional": true
+ }
+ }
+ },
"@angular/cli": {
"version": "8.2.1",
"resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/@angular/cli/-/cli-8.2.1.tgz",
"integrity": "sha512-tQ44UDKXaeEZlYx5+8RT8gfTvIo1wWdH8iP+EVIv9zOoHV1rm+FkmkDCRVy7HnDMIhIrCZaQti6oCuT0u4+S8Q==",
"dev": true
},
+ "@angular/material": {
+ "version": "8.1.3",
+ "resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/@angular/material/-/material-8.1.3.tgz",
+ "integrity": "sha512-qZVWrJ/EO1y0lJCy7pe536RlYiih3p3fQzj7tgus7JdOpspyF+zBLzn8gNrdAFACXpVWwq2kLorieoR3BB47ZQ==",
+ "requires": {
+ "tslib": "^1.7.1"
+ }
+ },
"@angular/platform-browser": {
"version": "8.2.2",
"resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/@angular/platform-browser/-/platform-browser-8.2.2.tgz",
"integrity": "sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw==",
"dev": true
},
+ "hammerjs": {
+ "version": "2.0.8",
+ "resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/hammerjs/-/hammerjs-2.0.8.tgz",
+ "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+ },
"handle-thing": {
"version": "2.0.0",
"resolved": "https://gitlab.scheer-group.com:8080/repository/npm_group/handle-thing/-/handle-thing-2.0.0.tgz",

MODIFY
package.json
package.json
},
"private": true,
"dependencies": {
- "@angular/animations": "~8.2.0",
+ "@angular/animations": "^8.2.2",
+ "@angular/cdk": "^8.1.3",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
+ "@angular/material": "^8.1.3",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
+ "hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"

MODIFY
src/app/app.component.html
src/app/app.component.html
-<!--The content below is only a placeholder and can be replaced.-->
+
+<app-pas-header></app-pas-header>
+
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
- <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
- </li>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
- </li>
- <li>
- <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
- </li>
-</ul>
<router-outlet></router-outlet>

MODIFY
src/app/app.component.ts
src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
- title = 'apiman-dev-portal';
+ title = 'API-Mgmt Developer Portal';
}

MODIFY
src/app/app.module.ts
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { PasHeaderComponent } from './pas-header/pas-header.component';
+
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconModule } from '@angular/material/icon';
+
+
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ PasHeaderComponent
],
imports: [
BrowserModule,
- AppRoutingModule
+ AppRoutingModule,
+ BrowserAnimationsModule,
+ MatIconModule
],
providers: [],
bootstrap: [AppComponent]

ADD
src/app/pas-header/pas-header.component.html
+<nav>
+ <img class="logo" src="assets/ScheerPASLogo.svg">
+
+ <div class="rightMenu">
+ <mat-icon>desktop_windows</mat-icon> API Developer Portal
+ </div>
+</nav>
+
+
+

ADD
src/app/pas-header/pas-header.component.scss
+
+$navbar-bg-color: #c8c9cc;
+$navbar-color: #6a747f;
+
+:host {
+ background: $navbar-bg-color;
+ display: flex;
+
+ padding: 19px;
+ color: $navbar-color;
+}
+
+nav {
+ width: 100%;
+}
+
+.logo {
+ height: 20px;
+ width: 170px;
+}
+
+.rightMenu {
+ float:right;
+}

ADD
src/app/pas-header/pas-header.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasHeaderComponent } from './pas-header.component';
+
+describe('PasHeaderComponent', () => {
+ let component: PasHeaderComponent;
+ let fixture: ComponentFixture<PasHeaderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PasHeaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PasHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/pas-header/pas-header.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-pas-header',
+ templateUrl: './pas-header.component.html',
+ styleUrls: ['./pas-header.component.scss']
+})
+export class PasHeaderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}

ADD
src/assets/ScheerPASLogo.svg
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 20.43">
+ <title>Logo</title>
+ <g>
+ <path d="M118.15,22.65V42.41H116.8V22.65m1.35,0" transform="translate(0.17 -22.32)" style="fill: #1d1d1b"/>
+ <g>
+ <path d="M133.17,22.72c3.43,0,6.05,1.86,6.05,5.46s-2.62,5.31-6.05,5.31H128v8.92h-1.35V22.72M133.17,24H128v8.24h5.18c2.87,0,4.75-1.38,4.75-4.08S136,24,133.17,24Z" transform="translate(0.17 -22.32)" style="fill: #d13237"/>
+ <path d="M154.45,42.41l-2.47-6h-9.82l-2.47,6h-1.41l8.13-19.69h1.32l8.1,19.69ZM148,26.66c-.64-1.55-.9-2.31-.9-2.31s-.22.73-.87,2.28l-3.51,8.61h8.8Z" transform="translate(0.17 -22.32)" style="fill: #d13237"/>
+ <path d="M163.47,42.54A9.15,9.15,0,0,1,157,39.36l1-.87a7.84,7.84,0,0,0,5.51,2.81c2.7,0,5-1.51,5-4.24,0-5.38-10.89-3.41-10.89-9.74,0-3.34,2.93-5,6.16-5a7.52,7.52,0,0,1,5.49,2.3l-1,.9a6.2,6.2,0,0,0-4.53-2c-2.44,0-4.84,1.19-4.84,3.77,0,5.26,10.89,3.35,10.89,9.74C169.83,40.71,166.74,42.54,163.47,42.54Z" transform="translate(0.17 -22.32)" style="fill: #d13237"/>
+ </g>
+ <path d="M108.84,29.93c-1.12-1.48-2.22-2.35-4-2.35A3.61,3.61,0,0,0,102.07,29l.06-1.21H99V42.41h3.23c0-2.73,0-8,0-10.79a2.66,2.66,0,0,1,2.08-1.26,2.8,2.8,0,0,1,2.19,1.32Zm-19.66.37c1.49,0,2.53.93,2.89,2.81H86.2c.4-1.94,1.49-2.81,3-2.81m6.24,5.48V35c0-4.86-2.73-7.39-6.24-7.39s-6.32,2.67-6.32,7.59,2.84,7.44,6.52,7.44a6.8,6.8,0,0,0,5.5-2.72l-2.69-1.72a3.16,3.16,0,0,1-2.81,1.52c-1.83,0-3.32-1.43-3.35-3.93ZM73.9,30.3c1.49,0,2.53.93,2.89,2.81H70.92c.4-1.94,1.49-2.81,3-2.81m6.24,5.48V35c0-4.86-2.73-7.39-6.24-7.39s-6.32,2.67-6.32,7.59,2.84,7.44,6.52,7.44a6.8,6.8,0,0,0,5.5-2.72l-2.69-1.72a3.15,3.15,0,0,1-2.81,1.52c-1.83,0-3.32-1.43-3.34-3.93ZM64.27,42.41V33.9c0-3-.9-6.35-4.89-6.35A5.54,5.54,0,0,0,55.76,29V22.63H52.5V42.41h3.26V31.79a3.27,3.27,0,0,1,2.72-1.41c2.19,0,2.53,1.83,2.53,3.46v8.57ZM49.44,40.05l-2.33-1.83a3.18,3.18,0,0,1-2.78,1.46c-1.83,0-3.32-1.49-3.32-4.52s1.49-4.69,3.32-4.69a3.27,3.27,0,0,1,2.78,1.43L49.44,30a6.42,6.42,0,0,0-5.11-2.38c-3.49,0-6.52,2.66-6.52,7.58s3,7.44,6.52,7.44a6.32,6.32,0,0,0,5.11-2.47Zm-14.1-3.12c0-6.32-9.13-5.7-9.13-9.16,0-1.35.95-2.22,2.75-2.22a5,5,0,0,1,3.2,1.32l2.56-2.24A9.08,9.08,0,0,0,29,22.32c-3.85,0-6.46,2.28-6.46,5.56,0,6.16,9.24,5.48,9.24,9.13,0,1.44-1.15,2.56-3.09,2.56a5.93,5.93,0,0,1-4.21-2.14l-2.61,2.22a9.82,9.82,0,0,0,6.82,3.09c3.32,0,6.69-1.88,6.69-5.81" transform="translate(0.17 -22.32)" style="fill: #1d1d1b"/>
+ <g>
+ <polygon points="13.76 0.34 10.62 9.28 10.62 20.09 16.3 20.09 16.3 10.2 19.85 0.34 13.76 0.34" style="fill: #d03439"/>
+ <polygon points="0 0.34 3.55 10.2 3.55 20.09 9.23 20.09 9.23 9.28 6.1 0.34 0 0.34" style="fill: #d03439"/>
+ </g>
+ </g>
+</svg>

MODIFY
src/styles.scss
src/styles.scss
/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+
+body {
+ background: #F0F0F0;
+ font-family: Roboto, sans-serif;
+ margin: 0;
+ padding: 0;
+}

Basic PAS Design