Skip to content

Commit

Permalink
Improve style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Popovkov57
Popovkov57 committed Oct 4, 2022
1 parent 2e9cc64 commit 6c8f625
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 53 deletions.
4 changes: 2 additions & 2 deletions src/app/model/rest.datasource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export class RestDataSource {
auth_token: string;

constructor(private http: HttpClient) {
//this.baseUrl = `${PROTOCOL}://${location.hostname}:${PORT}/`
this.baseUrl = "/api/"
this.baseUrl = `${PROTOCOL}://${location.hostname}:${PORT}/`
//this.baseUrl = "/api/"
}

getProducts(): Observable<Product[]> {
Expand Down
17 changes: 5 additions & 12 deletions src/app/store/cartSummary.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
<div class="float-end">
<small>
Your cart:
<span *ngIf="cart.itemCount > 0">
{{ cart.itemCount }} item(s)
{{ cart.cartPrice | currency: "USD":"symbol":"2.2-2"}}
</span>
<span *ngIf="cart.itemCount == 0">
(empty)
</span>
</small>
<button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0" routerLink="/cart">
<a routerLink="/cart" style="color: white;padding-right: 10px;">
<i class="fa fa-shopping-cart"></i>
</button>
</a>
<a routerLink="/admin" style="color: white;padding-right: 10px;">
<i class="fa fa-user"></i>
</a>
</div>
22 changes: 22 additions & 0 deletions src/app/store/store.component.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.categoriesButton {
color: #5B588C;
border-color: #5B588C;
}
.categoriesButton:hover {
color: white;
background-color: #5B588C;
border-color: #5B588C;
}
.categoriesButton.active {
color: white;
background-color: #5B588C !important;
border-color: #5B588C;
}
.categoriesButton:focus {
color: white;
background-color: #5B588C;
border-color: #5B588C;
}
.productTitle {
color: #2a215ed1;
}
70 changes: 34 additions & 36 deletions src/app/store/store.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,53 @@
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<a class="navbar-brand">SPORTS STORE</a>
<nav class="navbar fixed-top bg-light" style="background-color: #6768AA !important;">
<div class="container-fluid">
<a class="navbar-brand text-white">Sports Store</a>
<cart-summary></cart-summary>
</div>
</div>
</nav>
</div>
<div class="container-fluid" style="padding-top: 60px;">
<div class="row">
<div class="col-3 p-2">
<div class="col-2 p-2" style="margin-top: 4px;">
<div class="d-grid gap-2">
<button class="btn btn-block btn-outline-primary" (click)="changeCategory()">
Home
<button class="btn btn-block btn-outline-primary categoriesButton" (click)="changeCategory()">
All
</button>
<button *ngFor="let category of categories" [class.active]="category == selectedCategory" class="btn btn-outline-primary btn-block" (click)="changeCategory(category)">
<button *ngFor="let category of categories" [class.active]="category == selectedCategory" class="btn btn-outline-primary btn-block categoriesButton" (click)="changeCategory(category)">
{{category}}
</button>
<button class="btn btn-block btn-danger m-t-3" routerLink="/admin">
Admin
</button>
</div>
</div>
<div class="col-9 p-2">
<div *ngFor="let product of products" class="card m-1 p-1 bg-light">
<h4>
{{product.name}}
<span class="badge rounded-pill text-bg-primary float-end">
{{ product.price | currency: "USD":"symbol":"2.2-2"}}
</span>
</h4>
<div class="card-text bg-white p-1">
{{product.description}}
<button class="btn btn-success btn-sm float-end" (click)="addProductToCart(product)">
Add to cart
</button>
</div>
</div>
<div class="form-inline float-start mr-1">
<select class="form-control" [value]="productsPerPage" (change)="changePageSize($event.target.value)">
<option value="3">3 per Page</option>
<option value="4">4 per Page</option>
<option value="6">6 per Page</option>
<option value="8">8 per Page</option>
</select>
<div class="col-10 p-2">
<div class="row">
<div class="card m-1" style="width: 18rem;" *ngFor="let product of products">
<div class="card-body">
<h5 class="card-title productTitle" style="display: inline-block;">{{product.name}}</h5>
<span class="badge rounded-pill float-end" style="background-color: #CCBD99 !important;">
{{ product.price | currency: "USD":"symbol":"2.2-2"}}
</span>
<p class="card-text">{{product.description}}</p>
<button class="btn btn-sm float-end text-white" style="background-color: #9E87CF !important;" (click)="addProductToCart(product)">
Add to cart
</button>
</div>
</div>
</div>
<div class="btn-group float-end">
<select class="form-control" style="width: auto; display:inline;margin-top: 10px;margin-right: 10px;" [value]="productsPerPage" (change)="changePageSize($event.target.value)">
<option value="3">3 per Page</option>
<option value="4">4 per Page</option>
<option value="6">6 per Page</option>
<option value="8">8 per Page</option>
</select>

<div class="btn-group" style="margin-bottom: 5px;">
<button *ngFor="let page of pageNumbers"
(click)="changePage(page)"
class="btn btn-outline-primary"
class="btn btn-outline categoriesButton"
[class.active]="page == selectedPage">
{{page}}
</button>
</div>
</div>
</div>
</div>
</div>
3 changes: 2 additions & 1 deletion src/app/store/store.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { Router } from "@angular/router";

@Component({
selector: "store",
templateUrl: "store.component.html"
templateUrl: "store.component.html",
styleUrls: ["store.component.css"]
})

export class StoreComponent {
Expand Down
7 changes: 5 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
</head>
<body class="m-2">
<app>SportStore will go here</app>
<body>

<app></app>

<noscript>Please enable JavaScript to continue using this application.</noscript>

</body>
</html>

0 comments on commit 6c8f625

Please sign in to comment.