Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 293a053

Browse files
committed
Changed productModel
Change product model Made product list with CSS grid
1 parent 4188fe4 commit 293a053

File tree

8 files changed

+92
-59
lines changed

8 files changed

+92
-59
lines changed

‎src/app/app.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="toolbar" role="banner">
2-
<span class="name">FaunaDB Webshop</span>
2+
<h1 class="name">FaunaDB Webshop</h1>
3+
<button [routerLink]="['/']" mat-flat-button>Home</button>
34
</div>
45

56
<div class="content" role="main">
6-
<h1>Products</h1>
77
<router-outlet></router-outlet>
88
</div>

‎src/app/app.component.scss

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,31 +33,31 @@ p {
3333
top: 0;
3434
left: 0;
3535
right: 0;
36-
height: 60px;
36+
height: 120px;
3737
display: flex;
38+
flex-direction: column;
3839
align-items: center;
3940
justify-content: center;
40-
background-color: #1976d2;
41-
color: white;
41+
background-color: #b1d8ff;
42+
color: #267fd8;
4243
font-weight: 600;
43-
}
44-
45-
.toolbar img {
46-
margin: 0 16px;
47-
}
48-
49-
.toolbar #twitter-logo {
50-
height: 40px;
51-
margin: 0 16px;
52-
}
44+
padding: 0 1rem;
45+
h1 {
46+
font-size: 2rem;
47+
}
48+
h1,
49+
button {
50+
margin: 0.5rem;
51+
}
5352

54-
.toolbar #twitter-logo:hover {
55-
opacity: 0.8;
53+
button {
54+
background-color: #267fd8;
55+
}
5656
}
5757

5858
.content {
5959
display: flex;
60-
margin: 82px auto 32px;
60+
margin: 160px auto 32px;
6161
padding: 0 16px;
6262
max-width: 960px;
6363
flex-direction: column;
@@ -67,7 +67,7 @@ p {
6767
a,
6868
a:visited,
6969
a:hover {
70-
color: #1976d2;
70+
color: #000;
7171
text-decoration: none;
7272
}
7373

‎src/app/app.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { NgModule } from '@angular/core'
44
import { AppRoutingModule } from './app-routing.module'
55
import { AppComponent } from './app.component'
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
7+
import { MatButtonModule } from '@angular/material/button'
78

89
import { HttpClientModule } from '@angular/common/http'
910
import { ProductListComponent } from './products/components/product-list/product-list.component'
1011
import { MatGridListModule } from '@angular/material/grid-list'
1112
import { ProductItemComponent } from './products/components/product-item/product-item.component'
1213
@NgModule({
1314
declarations: [AppComponent, ProductListComponent, ProductItemComponent, ProductItemComponent],
14-
imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatGridListModule],
15+
imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatGridListModule,MatButtonModule],
1516
providers: [],
1617
bootstrap: [AppComponent],
1718
})
Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
<mat-grid-listcols="2" rowHeight="400px" gutterSize="1rem">
1+
<divclass="products__container">
22
<ng-container *ngFor="let product of products">
3-
<mat-grid-tile>
4-
<mat-grid-tile-header class="product__header">
5-
<strong class="product__title">{{ product.name }}</strong>
6-
<em class="product__price">{{ product.price | currency: 'EUR' }}</em>
7-
</mat-grid-tile-header>
3+
<section class="product__item">
84
<img *ngIf="product.image" class="product__image" [src]="product.image" alt="" />
9-
<mat-grid-tile-footer>
10-
<p class="product__description">{{ product.description }}</p>
11-
</mat-grid-tile-footer>
12-
</mat-grid-tile>
5+
<a [routerLink]="['/product/' + product.id]">
6+
<header class="product__header">
7+
<strong class="product__title">{{ product.name }}</strong>
8+
<em class="product__price">{{ product.price | currency: 'EUR' }}</em>
9+
</header>
10+
<footer>
11+
<p class="product__description">{{ product.description }}</p>
12+
</footer>
13+
</a>
14+
</section>
1315
</ng-container>
14-
</mat-grid-list>
16+
</div>
Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,39 @@
1-
mat-grid-list {
2-
width: 1024px;
1+
:host {
2+
width: 100%;
33
}
4-
.mat-grid-tile .mat-grid-tile-header >,
5-
.mat-grid-tile .mat-grid-tile-footer > {
6-
.product {
7-
&__title {
8-
font-size: 2rem;
9-
}
10-
&__description {
11-
font-size: 1.3rem;
12-
}
13-
&__price {
14-
margin-left: auto;
15-
font-size: 1.6rem;
16-
}
4+
5+
$productSize: 400px;
6+
7+
.products__container {
8+
display: grid;
9+
grid-template-columns: repeat(2, 1fr);
10+
grid-auto-rows: $productSize;
11+
}
12+
.product {
13+
&__item {
14+
position: relative;
15+
overflow: hidden;
16+
}
17+
&__title {
18+
font-size: 2rem;
19+
}
20+
&__header,
21+
&__footer {
22+
height: 100px;
23+
background-color: rgba(0, 0, 0, 0.5);
24+
}
25+
&__description {
26+
font-size: 1.3rem;
27+
}
28+
&__price {
29+
margin-left: auto;
30+
font-size: 1.6rem;
31+
}
32+
&__image {
33+
height: $productSize;
34+
width: 100%;
35+
object-fit: cover;
36+
position: absolute;
37+
z-index: -1;
1738
}
1839
}

‎src/app/products/components/product-list/product-list.component.ts

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,30 @@ export class ProductListComponent implements OnInit {
1313
constructor(private product: ProductService) {}
1414

1515
ngOnInit(): void {
16-
this.product.getProducts().then((products) => {
17-
console.log('products: ', products)
18-
const cleanedData = products.map((productItem) => {
19-
const tempProduct = { ...productItem.data }
16+
this.product.getProducts().then((products: Product[]) => {
17+
const cleanedData = products.map((productItem: Product) => {
18+
const tempProduct = { ...productItem }
2019

21-
switch (tempProduct.name) {
20+
switch (tempProduct.data.name) {
2221
case 'Pizza':
23-
tempProduct.image =
22+
tempProduct.data.image =
2423
'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
2524
break
2625
case 'Beef Cheek':
27-
tempProduct.image =
26+
tempProduct.data.image =
2827
'https://images.unsplash.com/photo-1588168333986-5078d3ae3976?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
2928
break
3029

3130
case 'Cup':
32-
tempProduct.image =
31+
tempProduct.data.image =
3332
'https://images.unsplash.com/photo-1577937927133-66ef06acdf18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80'
3433
break
3534

3635
default:
3736
break
3837
}
3938

40-
return new ProductData(tempProduct)
39+
return new Product(tempProduct).data
4140
})
4241
this.products = cleanedData
4342
})

‎src/app/products/models/product.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ export class Product {
44
data: ProductData = null
55

66
constructor(data) {
7+
console.log('ref: ', data.ref['@ref'].id)
78
this.ref = data.ref
89
this.ts = data.ts
9-
this.data = data.data
10+
this.data = newProductData(data.ref['@ref'].id,data.data)
1011
}
1112
}
1213

@@ -19,8 +20,11 @@ export class ProductData {
1920
backorderLimit: number = 0
2021
backordered = false
2122
image?: string = ''
23+
id: string = ''
2224

23-
constructor(data) {
25+
constructor(id, data) {
26+
console.log('id: ', typeof id)
27+
this.id = id
2428
this.name = data.name
2529
this.description = data.description
2630
this.price = data.price

‎src/styles.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
/* You can add global styles to this file, and also import other style files */
22

3-
html, body { height: 100%; }
4-
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
3+
html,
4+
body {
5+
height: 100%;
6+
}
7+
body {
8+
margin: 0;
9+
font-family: Roboto, 'Helvetica Neue', sans-serif;
10+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /