From a5738dae050d28622becd2e2624351f531fbbe9c Mon Sep 17 00:00:00 2001 From: "artur.manuilenko" Date: Mon, 23 Dec 2024 17:41:44 +0200 Subject: [PATCH 1/5] Update product card layout and styles; upgrade @mate-academy/scripts to 1.9.12 --- .github/workflows/test.yml-template | 29 ++++++++++ package-lock.json | 9 ++-- package.json | 2 +- readme.md | 4 +- src/index.html | 53 +++++++++++++++++- src/styles/card.scss | 83 +++++++++++++++++++++++++++++ src/styles/index.scss | 8 ++- src/styles/stars.scss | 16 ++++++ src/styles/variables.scss | 3 ++ 9 files changed, 198 insertions(+), 9 deletions(-) create mode 100644 .github/workflows/test.yml-template create mode 100644 src/styles/card.scss create mode 100644 src/styles/stars.scss create mode 100644 src/styles/variables.scss diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/package-lock.json b/package-lock.json index 373f5d0040..1890861f0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", @@ -1230,10 +1230,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 4b42d42f7b..cc5756264b 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", diff --git a/readme.md b/readme.md index b1f43ed970..add1c3b162 100644 --- a/readme.md +++ b/readme.md @@ -23,8 +23,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_product-cards/) -- [TEST REPORT LINK](https://.github.io/layout_product-cards/report/html_report/) +- [DEMO LINK](https://manuilenkoart.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://manuilenkoart.github.io/layout_product-cards/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 43745cc17f..abb3c5d72a 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,63 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + + -

Product cards

+
+ desktop +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +

Product code: 195434

+ +
+
+ + + + + +
+ +

Reviews: 5

+
+ +
+

Price:

+

$2,199

+
+ + +
diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000000..5340aaa9d1 --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,83 @@ +.card { + box-sizing: border-box; + border: 1px solid #f3f3f3; + width: 200px; + padding: 32px 16px 16px; + font-family: Roboto, sans-serif; + + &__image { + width: 160px; + height: 134px; + display: block; + margin: auto auto 40px; + } + + &__title { + color: $color-main; + margin-bottom: 4px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + } + + &__code { + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $color-secondary; + margin-bottom: 16px; + } + + &__review { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + } + + &__count { + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $color-main; + } + + &__price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + } + + &__description { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $color-secondary; + } + + &__value { + font-size: 16px; + font-weight: 700; + line-height: 18px; + color: $color-main; + } + + &__button { + width: 100%; + text-transform: uppercase; + background-color: $blue-accent; + color: #fff; + border-radius: 5px; + padding: 12px 0; + border: 1px solid $blue-accent; + font-size: 14px; + font-weight: 700; + + &:hover { + color: $blue-accent; + background-color: #fff; + + cursor: pointer; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..325b38daa5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,9 @@ -body { +@import './variables'; +@import './stars'; +@import './card'; + +body, +h2, +p { margin: 0; } diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..f3e48928ad --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,16 @@ +.stars { + display: flex; + + &__star { + background-image: url('../images/star.svg'); + background-repeat: no-repeat; + background-position: 50%; + margin-right: 4px; + width: 16px; + height: 16px; + + &--active { + background-image: url('../images/star-active.svg'); + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..405672d67c --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,3 @@ +$color-main: #060b35; +$color-secondary: #616070; +$blue-accent: #00acdc; From 4d94ecbbea34ea07612d9817289d9d85cc02785c Mon Sep 17 00:00:00 2001 From: "artur.manuilenko" Date: Mon, 23 Dec 2024 17:50:02 +0200 Subject: [PATCH 2/5] Refactor styles: import variables in card.scss and remove from index.scss --- readme.md | 10 +++++----- src/styles/card.scss | 2 ++ src/styles/index.scss | 1 - 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index add1c3b162..62f0789667 100644 --- a/readme.md +++ b/readme.md @@ -28,8 +28,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. -- [ ] there 2 BEM blocks `card` and `stars` each in their own file -- [ ] SCSS Nesting is used for `elements`, `modifiers` and `pseudo-classes` -- [ ] SCSS Variables are used for main values and placed in a **separate file** -- [ ] all `stars--N` modifiers work as expected (Highlight first `N` stars) -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] there 2 BEM blocks `card` and `stars` each in their own file +- [x] SCSS Nesting is used for `elements`, `modifiers` and `pseudo-classes` +- [x] SCSS Variables are used for main values and placed in a **separate file** +- [x] all `stars--N` modifiers work as expected (Highlight first `N` stars) +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/styles/card.scss b/src/styles/card.scss index 5340aaa9d1..2e1554c9c5 100644 --- a/src/styles/card.scss +++ b/src/styles/card.scss @@ -1,3 +1,5 @@ +@import './variables'; + .card { box-sizing: border-box; border: 1px solid #f3f3f3; diff --git a/src/styles/index.scss b/src/styles/index.scss index 325b38daa5..c24dcf08c3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,3 @@ -@import './variables'; @import './stars'; @import './card'; From f142e267307fde1b6d7a81d213df040744e0406c Mon Sep 17 00:00:00 2001 From: "artur.manuilenko" Date: Mon, 23 Dec 2024 17:54:18 +0200 Subject: [PATCH 3/5] Update build command and change stylesheet link in index.html --- package.json | 2 +- src/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cc5756264b..b36a7e24b7 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,css,scss}'", "lint": "npm run format && mate-scripts lint", "test:only": "mate-scripts test", - "build": "mate-scripts build", + "build": "parcel build --public-url=/dist/", "deploy": "mate-scripts deploy", "update": "mate-scripts update", "postinstall": "npm run update", diff --git a/src/index.html b/src/index.html index abb3c5d72a..dbb90917bd 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,7 @@ /> From c249afb20131182929c2187bee8bec5004664fd7 Mon Sep 17 00:00:00 2001 From: "artur.manuilenko" Date: Mon, 23 Dec 2024 18:40:11 +0200 Subject: [PATCH 4/5] Add development script and update stylesheet link in index.html; refactor star rating styles --- package.json | 1 + src/index.html | 12 ++++++------ src/styles/stars.scss | 4 +++- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index b36a7e24b7..89bb276262 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", + "dev": "parcel ./src/index.html --open", "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,css,scss}'", "lint": "npm run format && mate-scripts lint", "test:only": "mate-scripts test", diff --git a/src/index.html b/src/index.html index dbb90917bd..63cddaf9c5 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,7 @@ /> @@ -42,11 +42,11 @@

Product code: 195434

-
- - - - +
+ + + +
diff --git a/src/styles/stars.scss b/src/styles/stars.scss index f3e48928ad..b0a84f20d5 100644 --- a/src/styles/stars.scss +++ b/src/styles/stars.scss @@ -8,8 +8,10 @@ margin-right: 4px; width: 16px; height: 16px; + } - &--active { + @for $activeStar from 1 through 4 { + &__star:nth-child(-n + #{$activeStar}) { background-image: url('../images/star-active.svg'); } } From f060350435cdda2583849b100e929da8d92c72b8 Mon Sep 17 00:00:00 2001 From: "artur.manuilenko" Date: Mon, 23 Dec 2024 19:01:09 +0200 Subject: [PATCH 5/5] Update build and development scripts in package.json --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 89bb276262..cc5756264b 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,10 @@ "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", - "dev": "parcel ./src/index.html --open", "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,css,scss}'", "lint": "npm run format && mate-scripts lint", "test:only": "mate-scripts test", - "build": "parcel build --public-url=/dist/", + "build": "mate-scripts build", "deploy": "mate-scripts deploy", "update": "mate-scripts update", "postinstall": "npm run update",