Merge pull request #9 from Popovkov57/development

Improve style
Popovkov57 · Oct 4, 2022 · 495577b · 495577b
2 parents 17d2995 + 6c8f625
commit 495577b
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 53 deletions.
diff --git a/src/app/model/rest.datasource.ts b/src/app/model/rest.datasource.ts
@@ -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[]> {

diff --git a/src/app/store/cartSummary.component.html b/src/app/store/cartSummary.component.html
@@ -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>
diff --git a/src/app/store/store.component.css b/src/app/store/store.component.css
@@ -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;
+}
diff --git a/src/app/store/store.component.html b/src/app/store/store.component.html
@@ -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>
diff --git a/src/app/store/store.component.ts b/src/app/store/store.component.ts
@@ -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 {

diff --git a/src/index.html b/src/index.html
@@ -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>