Skip to content

Commit

Permalink
Update style and navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Popovkov57
Popovkov57 committed Oct 5, 2022
1 parent 644cf7f commit a6c7923
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 106 deletions.
42 changes: 21 additions & 21 deletions src/app/admin/admin.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<a class="navbar-brand">SPORTS STORE Admin</a>
</div>
</div>
<div class="row mt-2">
<div class="col-3">
<div class="d-grid gap-2">
<button class="btn btn-outline-info btn-block"
routerLink="/admin/main/products" routerLinkActive="active">
Products
</button>
<button class="btn btn-outline-info btn-block"
routerLink="/admin/main/orders" routerLinkActive="active">
Orders
</button>
<button class="btn btn-outline-danger btn-block"
(click)="logout()">
Logout
</button>
<nav class="navbar fixed-top bg-light" style="background-color: #6768AA !important;">
<div class="container-fluid">
<a class="navbar-brand text-white" routerLink="/store">Sports Store</a>
<div class="float-end">
<a routerLink="/cart" style="color: white;padding-right: 15px;">
<i class="fa fa-sign-out" aria-hidden="true" (click)="logout()"></i>
</a>
</div>
</div>
<div class="col-9">
</nav>
</div>

<div class="container-fluid" style="padding-top: 60px;">
<div class="row mt-2">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" routerLink="/admin/main/products" routerLinkActive="active" aria-current="page" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/main/orders" routerLinkActive="active">Orders</a>
</li>
</ul>
<div>
<router-outlet></router-outlet>
</div>
</div>
Expand Down
50 changes: 31 additions & 19 deletions src/app/admin/auth.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
<div class="bg-info p-2 text-center">
<h3>SPORTS STORE Authentication</h3>
</div>
<div class="bg-danger mt-2 p-2 text-center text-white" *ngIf="errorMessage != null">
{{ errorMessage }}
</div>
<div class="p-2">
<form novalidate #form="ngForm" (ngSubmit)="authenticate(form)">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="username" [(ngModel)]="username" required />
<div class="container-fluid">
<nav class="navbar fixed-top bg-light" style="background-color: #6768AA !important;">
<div class="container-fluid">
<a class="navbar-brand text-white" routerLink="/store">Sports Store</a>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" name="password" [(ngModel)]="password" required />
</div>
<div class="text-center">
<button class="btn btn-secondary m-1" routerLink="/">Go back></button>
<button class="btn btn-primary m-1" type="submit">Log in</button>
</nav>
</div>

<div class="container-fluid" style="padding-top: 60px;">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<div class="bg-danger mt-2 p-2 text-center text-white" *ngIf="errorMessage != null">
{{ errorMessage }}
</div>
<div class="p-2">
<form novalidate #form="ngForm" (ngSubmit)="authenticate(form)">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="username" [(ngModel)]="username" required />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" name="password" [(ngModel)]="password" required />
</div>
<div class="text-center" style="margin-top: 20px;">
<button class="btn btn-secondary m-1" routerLink="/">Go back</button>
<button class="btn btn-primary m-1" style="background-color: #5B588C;" type="submit">Log in</button>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
14 changes: 8 additions & 6 deletions src/app/store/cartDetail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<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" routerLink="/store">Sports Store</a>
</div>
</div>
</nav>
</div>
<div class="container-fluid" style="padding-top: 60px;">
<div class="row">
<div class="col mt-2">
<h2 class="text-center">Your Cart</h2>
Expand Down Expand Up @@ -57,8 +59,8 @@ <h2 class="text-center">Your Cart</h2>
</div>
<div class="row">
<div class="col">
<div class="text-center">
<button class="btn btn-primary m-1" routerLink="/store">
<div class="float-end">
<button class="btn btn outline m-1 text-white" routerLink="/store" style="background-color: #5B588C;">
Continue Shopping
</button>
<button class="btn btn-secondary m-1" routerLink="/checkout" [disabled]="cart.lines.length == 0 && connected">
Expand Down
4 changes: 2 additions & 2 deletions src/app/store/cartSummary.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="float-end">
<a routerLink="/cart" style="color: white;padding-right: 10px;">
<a routerLink="/cart" style="color: white;padding-right: 15px;">
<i class="fa fa-shopping-cart"></i>
</a>
<a routerLink="/admin" style="color: white;padding-right: 10px;">
<a routerLink="/admin" style="color: white;padding-right: 15px;">
<i class="fa fa-user"></i>
</a>
</div>
123 changes: 65 additions & 58 deletions src/app/store/checkout.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,70 @@
<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" routerLink="/store">Sports Store</a>
</div>
</div>
</div>

<div *ngIf="orderSent" class="m-2 text-center">
<h2>Thanks!</h2>
<p>Thanks for placing your order.</p>
<p>We'll ship your goods as soon as possible.</p>
<button class="btn btn-primary" routerLink="/store">Return to Store</button>
</nav>
</div>

<form *ngIf="!orderSent" #form="ngForm" novalidate (ngSubmit)="submitOrder(form)" class="m-2">
<div class="form-group">
<label>Name</label>
<input class="form-control" #name="ngModel" name="name" [(ngModel)]="order.name" required/>
<span *ngIf="submitted && name.invalid" class="text-danger">
Please enter your name
</span>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" #address="ngModel" name="address" [(ngModel)]="order.address" required/>
<span *ngIf="submitted && address.invalid" class="text-danger">
Please enter your address
</span>
</div>
<div class="form-group">
<label>City</label>
<input class="form-control" #city="ngModel" name="city" [(ngModel)]="order.city" required/>
<span *ngIf="submitted && city.invalid" class="text-danger">
Please enter your city
</span>
</div>
<div class="form-group">
<label>State</label>
<input class="form-control" #state="ngModel" name="state" [(ngModel)]="order.state" required/>
<span *ngIf="submitted && state.invalid" class="text-danger">
Please enter your state
</span>
</div>
<div class="form-group">
<label>Zip/Postal</label>
<input class="form-control" #zip="ngModel" name="zip" [(ngModel)]="order.zip" required/>
<span *ngIf="submitted && zip.invalid" class="text-danger">
Please enter your zip/postal code
</span>
</div>
<div class="form-group">
<label>Country</label>
<input class="form-control" #country="ngModel" name="country" [(ngModel)]="order.country" required/>
<span *ngIf="submitted && country.invalid" class="text-danger">
Please enter your country
</span>
</div>
<div class="text-center">
<button class="btn btn-secondary m-1" routerLink="/cart">Back</button>
<button class="btn btn-primary m-1" type="submit">Complete Order</button>
<div class="container-fluid" style="padding-top: 60px;">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div *ngIf="orderSent" class="m-2 text-center">
<h2>Thanks!</h2>
<p>Thanks for placing your order.</p>
<p>We'll ship your goods as soon as possible.</p>
<button class="btn btn-primary" style="background-color: #6768AA;" routerLink="/store">Return to Store</button>
</div>

<form *ngIf="!orderSent" #form="ngForm" novalidate (ngSubmit)="submitOrder(form)" class="m-2">
<div class="form-group">
<label>Name</label>
<input class="form-control" #name="ngModel" name="name" [(ngModel)]="order.name" required/>
<span *ngIf="submitted && name.invalid" class="text-danger">
Please enter your name
</span>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" #address="ngModel" name="address" [(ngModel)]="order.address" required/>
<span *ngIf="submitted && address.invalid" class="text-danger">
Please enter your address
</span>
</div>
<div class="form-group">
<label>City</label>
<input class="form-control" #city="ngModel" name="city" [(ngModel)]="order.city" required/>
<span *ngIf="submitted && city.invalid" class="text-danger">
Please enter your city
</span>
</div>
<div class="form-group">
<label>State</label>
<input class="form-control" #state="ngModel" name="state" [(ngModel)]="order.state" required/>
<span *ngIf="submitted && state.invalid" class="text-danger">
Please enter your state
</span>
</div>
<div class="form-group">
<label>Zip/Postal</label>
<input class="form-control" #zip="ngModel" name="zip" [(ngModel)]="order.zip" required/>
<span *ngIf="submitted && zip.invalid" class="text-danger">
Please enter your zip/postal code
</span>
</div>
<div class="form-group">
<label>Country</label>
<input class="form-control" #country="ngModel" name="country" [(ngModel)]="order.country" required/>
<span *ngIf="submitted && country.invalid" class="text-danger">
Please enter your country
</span>
</div>
<div class="float-end mt-2">
<button class="btn btn-secondary m-1" routerLink="/cart">Back</button>
<button class="btn btn-primary m-1" style="background-color: #6768AA;" type="submit">Complete Order</button>
</div>
</form>
</div>
</div>
</form>
</div>

0 comments on commit a6c7923

Please sign in to comment.