Skip to content

Commit

Permalink
Refactor products page and route
Browse files Browse the repository at this point in the history
  • Loading branch information
@belsman
belsman committed Jan 19, 2024
1 parent fe3adc3 commit 7ed0ea5
Show file tree
Hide file tree
Showing 27 changed files with 370 additions and 760 deletions.
94 changes: 48 additions & 46 deletions src/app/features/products/components/product-card/product-card.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,49 @@
<vcl-panel panel-card class="product-card" (click)="onProductClicked()">
<vcl-panel-title
class="row justify-content-between align-items-center m-0 p-2"
>
<vcl-label class="badge">
<!-- {{ product.additionalLabel }} -->
Product.additionalLabel
</vcl-label>
<button vcl-square-button class="circular favorite">
<vcl-icon icon="fas:heart"></vcl-icon>
</button>
</vcl-panel-title>
<div class="position-relative">
<picture class="image-wrapper">
<source
class="image"
*ngFor="let media of responsiveImagesConfiguration"
[media]="
'(max-width: ' +
media.max +
'px) and (min-width: ' +
media.min +
'px)'
"
[srcset]="product.images[selectedColor].url"
[type]="'image/' + media.format"
/>
<img
class="product-card__image"
alt="product image"
[src]="product.images[selectedColor].url"
/>
</picture>
<!-- <div class="product-card__quick-shop p-3">quick shop</div> -->
<div class="row justify-between product-header">
<div class="row additional-label">
<div class="text">
{{ product.product.physical.variants.length }} Varaints
</div>
<div class="rounded-right"></div>
</div>
<vcl-panel-footer class="p-2 product-card__footer">
<vcl-label class="product-card__title">{{ product.name }}</vcl-label>
<vcl-label class="product-card__price">{{
product.price.salePrice | currency: currency
}}</vcl-label>
<!-- <app-product-color-picker
[colors]="product.colors"
(mouseOver)="onMouseEnter($event)"
(mouseOut)="onMouseLeave($event)"
></app-product-color-picker> -->
</vcl-panel-footer>
</vcl-panel>
<i class="fas fa-heart like"></i>
</div>
<picture class="image-wrapper">
<!-- <source
class="image"
*ngFor="let media of responsiveImagesConfiguration"
[media]="
'(max-width: ' +
media.max +
'px) and (min-width: ' +
media.min +
'px)'
"
[srcset]="product.product.physical.variants[0].images[0].url"
[type]="'image/' + media.format"
/> -->
<img
class="image"
alt="product image"
[src]="product.product.physical.variants[0].images[0].url"
/>
</picture>
<div
class="row center justify-center spinner-wrapper"
*ngIf="!product.product.physical.variants[0].images[0].url"
>
<i class="fas fa-spinner spinner"></i>
</div>
<!-- <div class="row justify-center colors">
<div
class="row color-wrapper"
*ngFor="let color of product.colors"
[class.color-selected]="color === product.selectedColor"
(click)="product.selectedColor = color"
>
<div class="color" [style.background-color]="color"></div>
</div>
</div> -->
<div class="title">{{ product.product.name }}</div>
<!-- <div class="row justify-center price">
{{ product.price | currency : currency }}
</div> -->
153 changes: 120 additions & 33 deletions src/app/features/products/components/product-card/product-card.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,132 @@
.product-card {
width: 100%;
cursor: pointer;
box-shadow: 0.3em 0.5em 0.5em rgba($color: #000000, $alpha: 0.13);
:host(.product) {
background-color: white;
width: calc(33.333333% - 30px);
@media (max-width: 1100px) {
width: calc(50% - 30px);
}
@media (max-width: 700px) {
width: calc(100% - 30px);
}
margin-left: 10px;
margin-bottom: 10px;
display: grid;
padding: 10px;

&__title {
display: block;
text-align: center;
text-overflow: ellipsis;
letter-spacing: 1px;
padding-bottom: 0.5em;
&:hover {
box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
}

&__price {
display: block;
text-align: center;
font-weight: 700;
padding-bottom: 0.5em;
.product-header {
.additional-label {
margin-left: -10px;
max-height: 0px;
margin-top: 4px;

.text {
text-transform: uppercase;
font-family: Univers, sans-serif;
font-weight: 300;
font-size: 12px;
background-color: rgba(238, 238, 238, 0.7);
padding: 3px 0 1px 10px;
}

.rounded-right {
background-color: red;
border: 1px solid transparent;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
width: 21px;
background-color: rgba(238, 238, 238, 0.7);
}
}

.like {
font-size: 18px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
cursor: pointer;
border: 1px solid #dddddd;
border-radius: 50%;
width: 31px;
height: 31px;
text-indent: -1px;
line-height: 31px;
margin-left: auto;

&:hover,
&.liked {
-webkit-text-fill-color: black;
}
}
}

&__image {
min-height: 100%;
max-width: 100%;
.image-wrapper {
margin-top: 10px;
cursor: pointer;
width: 100%;
padding-top: 150%;
position: relative;

.image {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
}

&__quick-shop {
background-color: black;
color: white;
text-transform: uppercase;
text-decoration: none;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
transform: translateY(110%);
width: 100%;
transition: transform 0.2s;
.spinner-wrapper {
min-height: 446px;
.spinner {
font-size: 40px;
}
}

&:hover &__quick-shop {
transform: translateY(0);
.colors {
margin-top: 5px;
max-height: 26px;

.color-wrapper {
margin: 2px;
cursor: pointer;

.color {
width: 21px;
height: 21px;
background-color: white;
border: 1px solid rgb(153, 153, 153);
border-radius: 50%;
}

padding: 2px;
border: 1px solid white;
border-radius: 50%;

&.color-selected,
&:hover {
border: 1px solid rgb(153, 153, 153);
}
}
}

.title {
font-family: Univers, sans-serif;
font-size: 14px;
font-weight: 300;
padding: 12px;
}

.price {
font-family: Univers, sans-serif;
font-size: 12px;
font-weight: bold;
display: inline-block;

&::first-letter {
padding-right: 7px;
}
}
}
46 changes: 7 additions & 39 deletions src/app/features/products/components/product-card/product-card.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
import { ProductService } from '../../services/product.service';
import { Component, HostBinding, Input } from '@angular/core';
import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';

@Component({
selector: 'app-product-card',
templateUrl: './product-card.component.html',
styleUrls: ['./product-card.component.scss'],
})
export class ProductCardComponent implements OnInit {
@Input() product!: IoRestorecommerceProductPhysicalVariant;
export class ProductCardComponent {
@HostBinding('class') classes = 'column align-centered product';
@Input() product!: IoRestorecommerceProductProduct;

currency: string;
currency = '€';
selectedColor: number;

responsiveImagesConfiguration = [
Expand All @@ -27,36 +26,5 @@ export class ProductCardComponent implements OnInit {
{ width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpeg' },
];

constructor(private router: Router, private productService: ProductService) {}

onProductClicked() {
// this.router.navigateByUrl(this.product.urls['self']);
}

ngOnInit(): void {
this.selectedColor = 0;
}

onMouseEnter($event: string) {
this.onHoverColorPicker($event);
}

onMouseLeave($event: string) {
this.onHoverColorPicker($event);
}

private onHoverColorPicker(colorHovered: string) {
// if (this.product.selectedColor === colorHovered) {
// return;
// }
// if (!this.product.colors.find((color) => color === colorHovered)) {
// this.selectedColor = this.product.selectedColor;
// } else {
// this.selectedColor = colorHovered;
// }
}

onLikeProduct() {
// this.product.like = !this.product.like;
}
// (click)="onProductClicked(product.id)"
}
1 change: 0 additions & 1 deletion src/app/features/products/components/product-gallery/product-gallery.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
Component,
OnInit,
Input,
OnChanges,
SimpleChanges,
Expand Down
49 changes: 49 additions & 0 deletions ...app/features/products/components/product-variant-card/product-variant-card.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<div class="row justify-between product-header">
<div class="row additional-label">
<div class="text">{{ product.name }}</div>
<div class="rounded-right"></div>
</div>
<i class="fas fa-heart like"></i>
</div>
<picture class="image-wrapper">
<!-- <source
class="image"
*ngFor="let media of responsiveImagesConfiguration"
[media]="
'(max-width: ' +
media.max +
'px) and (min-width: ' +
media.min +
'px)'
"
[srcset]="
'./assets/products_responsive/product' +
(i + 1) +
media.suffix +
'.' +
media.format
"
[type]="'image/' + media.format"
/> -->
<img class="image" alt="product image" [src]="product.images[0].url" />
</picture>
<div
class="row center justify-center spinner-wrapper"
*ngIf="!product.images[0].url"
>
<i class="fas fa-spinner spinner"></i>
</div>
<!-- <div class="row justify-center colors">
<div
class="row color-wrapper"
*ngFor="let color of product.colors"
[class.color-selected]="color === product.selectedColor"
(click)="product.selectedColor = color"
>
<div class="color" [style.background-color]="color"></div>
</div>
</div> -->
<div class="title">{{ product.name }}</div>
<div class="row justify-center price">
{{ product.price.salePrice | currency : currency }}
</div>
2 changes: 1 addition & 1 deletion ...-variants/product-variants.component.scss → ...-card/product-variant-card.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.product {
:host(.product) {
background-color: white;
width: calc(33.333333% - 30px);
@media (max-width: 1100px) {
Expand Down
Loading

0 comments on commit 7ed0ea5

Please sign in to comment.