WorldDrknss/Sky.Net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling Products Page

Browse Source
This commit is contained in:
cshowalter 2022-05-16 22:02:02 -07:00
parent d7ee64fff3
commit 0d6f68095d
4 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/app/core/section-header/section-header.component.html
View File

@ -1,12 +1,14 @@
<section class="py-5" style="margin-top: 105px; background-color:#f5f5f5;"> <ng-container *ngIf="(breadcrumb$ | async) as breadcrumbs">
<div class="container"> <section *ngIf="breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label !== 'Home'" class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
<div class="row d-flex align-item-center"> <div class="container">
<div class="col-9"> <div class="row d-flex align-item-center">
<h1>Title Goes Here</h1> <div class="col-9">
</div> <h1>{{breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label | titlecase}}</h1>
<div class="col-3"> </div>
<xng-breadcrumb></xng-breadcrumb> <div class="col-3">
<xng-breadcrumb></xng-breadcrumb>
</div>
</div> </div>
</div> </div>
</div> </section>
</section> </ng-container>

4
client/src/app/core/section-header/section-header.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BreadcrumbService } from 'xng-breadcrumb'; import { BreadcrumbService } from 'xng-breadcrumb';
@Component({ @Component({
@ -7,11 +8,12 @@ import { BreadcrumbService } from 'xng-breadcrumb';
styleUrls: ['./section-header.component.scss'] styleUrls: ['./section-header.component.scss']
}) })
export class SectionHeaderComponent implements OnInit { export class SectionHeaderComponent implements OnInit {
breadcrumb$: Observable<any[]>;
constructor(private bcService: BreadcrumbService) { } constructor(private bcService: BreadcrumbService) { }
ngOnInit(): void { ngOnInit(): void {
//this.bcService.breadcrumbs$. this.breadcrumb$ = this.bcService.breadcrumbs$;
} }
} }

8
client/src/app/shop/product-item/product-item.component.html
View File

@ -1,13 +1,13 @@
<div class="card h-100 shadow-sm"> <div class="card h-100 shadow-sm">
<img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light"> <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
<div class="d-flex align-items-center justify-content-center hover-overlay">
<button type="button" class="btn btn-sm btn-primary fa fa-shopping-cart me-2"></button>
<button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-primary">View</button>
</div>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<a routerLink="/shop/{{product.id}}"> <a routerLink="/shop/{{product.id}}">
<h6 class="text-uppercase">{{product.name}}</h6> <h6 class="text-uppercase">{{product.name}}</h6>
</a> </a>
<span class="mb-2">{{product.price | currency}}</span> <span class="mb-2">{{product.price | currency}}</span>
<div class="btn-group mt-auto">
<button type="button" class="btn btn-sm btn-outline-secondary fa fa-shopping-cart me-2"></button>
<button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div> </div>
</div> </div>

4
client/src/app/shop/product-item/product-item.component.scss
View File

@ -0,0 +1,4 @@
.btn {
width: 30%;
height: 40px;
}