Created card component

Author: salfuve

src/app/app.module.ts

@@ -15,7 +15,7 @@ import { routedComponents, AppRoutingModule } from './app-routing.module';
 
 import { SharedModule } from './shared/shared.module';
 import { ImageViewComponent } from './image-view/image-view.component';
-import { CartComponent } from './cart/cart.component';
+import { CardComponent } from './card/card.component';
 
 const httpInterceptorProviders: Type<any>[] = [
   RequestInterceptor,
@@ -26,8 +26,8 @@ const httpInterceptorProviders: Type<any>[] = [
     AppComponent,
     routedComponents,
     ImageViewComponent,
-    CartComponent,
     DashboardComponent,
+    CardComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     AppRoutingModule,

src/app/card/card.component.html

@@ -0,0 +1,17 @@
+  <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
+    <div flex-gt-sm="column.columnSize" *ngFor="let column of images">
+      <md-card *ngFor="let image of column.column">
+        <img class="img" md-card-image (click)="clickedImage(image.url)" [class.biggerImg]="image.isclicked" [src]=image.url>
+        <md-card-actions>
+          <div layout="row" class="tc-grey-600">
+            <button md-icon-button mdTooltip="Like"><md-icon>favorite</md-icon></button>
+            <button md-icon-button mdTooltip="Comment"><md-icon>comment</md-icon></button>
+            <button md-icon-button mdTooltip="Add to cart" (click)="clickedAddToCart(image)">
+              <md-icon>add_shopping_cart</md-icon></button>
+            <span flex></span>
+            <button md-icon-button mdTooltip="Share"><md-icon>share</md-icon></button>
+          </div>
+        </md-card-actions>
+      </md-card>
+    </div>
+  </div>

src/app/card/card.component.scss

@@ -0,0 +1,19 @@
+.md-icon-ux {
+  width: 100px;
+}
+
+.icon {
+  font-size: 48px;
+}
+
+.chart-height {
+  height: 300px;
+}
+
+.img {
+  cursor: zoom-in;
+}
+
+.biggerImg {
+  padding: 1000px;
+}

src/app/cart/cart.component.spec.ts src/app/card/card.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CartComponent } from './cart.component';
+import { CardComponent } from './card.component';
 
-describe('CartComponent', () => {
-  let component: CartComponent;
-  let fixture: ComponentFixture<CartComponent>;
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CartComponent ]
+      declarations: [ CardComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CartComponent);
+    fixture = TestBed.createComponent(CardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/card/card.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/cart.service.ts

@@ -24,7 +24,6 @@ export class CartService {
       duration: duration,
       extraClasses: ['bgc-' + color + '-600'],
     });
-
     item = { name: image.name, url: image.url, count: image.count };
     let result: boolean = this.isRepeated(item, items);
     if (!(result)) {

src/app/cart/cart.component.html

@@ -17,12 +17,11 @@
             <h4 md-line>
               <span class="text-wrap">{{item.name}}</span>
               <span class="x-number">x{{item.count}}</span>
-              </h4>
+            </h4>
           </a>
-          <md-divider *ngIf="!last"></md-divider>
         </md-nav-list>
         <button md-button color="accent" td-menu-footer>
-        See All products
+        Close
       </button>
       </td-menu>
     </md-menu>

src/app/cart/cart.component.scss

@@ -27,6 +27,5 @@
 }
 
 .x-number {
-
  color: #EF6C00;
 }

src/app/cart/cart.component.ts

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}