wip: marketplace stepper
MODIFY
src/app/app-routing.module.ts
src/app/app-routing.module.ts
@@ -2,13 +2,15 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from "./components/home/home.component";
import {MarketplaceApiDetailsComponent} from "./components/marketplace-api-details/marketplace-api-details.component";
+import {MarketplaceSignupStepperComponent} from "./components/marketplace-signup-stepper/marketplace-signup-stepper.component";
import {MarketplaceComponent} from "./components/marketplace/marketplace.component";
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'marketplace', component: MarketplaceComponent},
- {path: 'api-details/:id', component: MarketplaceApiDetailsComponent}
+ {path: 'api-details/:id', component: MarketplaceApiDetailsComponent},
+ {path: 'api-signup', component: MarketplaceSignupStepperComponent}
];
@NgModule({

MODIFY
src/app/app.component.html
src/app/app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
</div>
-
<app-footer></app-footer>

MODIFY
src/app/components/api-card/api-card.component.html
src/app/components/api-card/api-card.component.html
<mat-card class="api-card" style="display: flex; flex-direction: column;">
<mat-card-header class="api-card-header">
+<!-- TODO fix warning, maybe use sass for this-->
<div mat-card-avatar class="api-card-icon" style="background-image: url({{api.icon}})"></div>
<mat-card-title class="api-card-title">{{api.title}}</mat-card-title>
</mat-card-header>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
</div>
</mat-grid-tile>
<mat-grid-tile colspan="1" class="grid-content">
+ <mat-divider [vertical]="true"></mat-divider>
<div class="box">
<h1>Key Features</h1>
<mat-list>
<span>{{feature}}</span>
</mat-list-item>
</mat-list>
+ <button mat-raised-button id="docs-button">API Docs</button>
</div>
</mat-grid-tile>
</mat-grid-list>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.sass
src/app/components/marketplace-api-description/marketplace-api-description.component.sass
.box
width: 100%
height: 100%
+
+mat-divider
+ height: 80%
+ margin-left: 2em
+ margin-right: 2em
+
+#docs-button
+ margin-top: 4em

MODIFY
src/app/components/plan-card/plan-card.component.html
src/app/components/plan-card/plan-card.component.html
</mat-list>
</mat-card-content>
<mat-card-actions>
- <button mat-raised-button>SIGN UP</button>
+ <button mat-raised-button [routerLink]="['/api-signup']">SIGN UP</button>
</mat-card-actions>
</mat-card>

wip: marketplace stepper