loyout_product_card_reviev #4816
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,154 @@ | ||
| @import './variables'; | ||
|
|
||
| // Міксин для центрованих елементів | ||
| @mixin flex-center($width, $height) { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: $width; | ||
| height: $height; | ||
| } | ||
|
Comment on lines
+4
to
+10
There was a problem hiding this comment. Consider using more descriptive mixin names. The name |
||
|
|
||
| @mixin star-position { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-left: 4px; | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| // Міксин для стилю тексту | ||
| @mixin text-style($font-size, $font-weight, $color) { | ||
| font-size: $font-size; | ||
| font-weight: $font-weight; | ||
| color: $color; | ||
| } | ||
|
|
||
| html { | ||
| font-family: $font-family; | ||
| } | ||
|
Comment on lines
+27
to
+29
There was a problem hiding this comment. According to the Code Style Rules, the base font size should be set in the |
||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .card { | ||
| display: flex; | ||
| width: $card-width; | ||
| height: $card-height; | ||
|
|
||
| &__content { | ||
|
There was a problem hiding this comment. Avoid setting the same width and height for an element and its BEM element. If |
||
| width: $card-width; | ||
| height: $card-height; | ||
| border-radius: 5px; | ||
| } | ||
|
Comment on lines
+39
to
+48
There was a problem hiding this comment. The |
||
|
|
||
| &__image { | ||
| @include flex-center(160px, 134px); | ||
|
|
||
| background-image: url(../images/imac.jpeg); | ||
| margin-left: 19px; | ||
| margin-top: 32px; | ||
| } | ||
|
There was a problem hiding this comment. The
Comment on lines
+50
to
+56
There was a problem hiding this comment. The |
||
|
|
||
| &__title { | ||
| margin-top: 40px; | ||
| margin-left: $left-margin; | ||
| height: 36px; | ||
| width: 166px; | ||
|
|
||
| &-text { | ||
| @include text-style($text-size, 500, $text-color); | ||
|
|
||
| line-height: 18px; | ||
| } | ||
|
Comment on lines
+58
to
+68
There was a problem hiding this comment. The |
||
| } | ||
|
|
||
| &__code { | ||
| width: 98px; | ||
| height: 14px; | ||
| margin-top: 4px; | ||
| margin-left: $left-margin; | ||
| line-height: 14px; | ||
|
|
||
| &-text { | ||
| font-size: 10px; | ||
| font-weight: 400; | ||
| color: $subtext-color; | ||
| } | ||
|
Comment on lines
+71
to
+82
There was a problem hiding this comment. The |
||
| } | ||
|
|
||
| &__rating { | ||
| @include flex-center(166px, 16px); | ||
|
|
||
| margin-left: 17px; | ||
| margin-top: 16px; | ||
|
|
||
| // Цикл для стилізації зірок (діти класу &__rating) | ||
| .rating-star { | ||
| background-image: url(../images/star.svg); // Зображення за замовчуванням для всіх зірок | ||
|
|
||
| // Цикл для стилізації активних зірок | ||
| @for $i from 1 through $stars-count { | ||
| &:nth-child(#{$i}) { | ||
| @if $i <= $active-stars { | ||
| background-image: url(../images/star-active.svg); // Заповнена зірка для активних | ||
| } | ||
|
|
||
| @include star-position; // Позиціонування зірки | ||
| } | ||
| } | ||
|
Comment on lines
+96
to
+104
There was a problem hiding this comment. The |
||
| } | ||
| } | ||
|
|
||
| &-text { | ||
| font-size: 10px; | ||
| line-height: 14px; | ||
| text-align: right; | ||
| margin-left: auto; | ||
| color: $text-color; | ||
| } | ||
| } | ||
|
|
||
| &__price { | ||
| @include flex-center(166px, 16px); | ||
|
|
||
| margin-top: 24px; | ||
| margin-left: $left-margin; | ||
|
|
||
| &-text { | ||
| @include text-style($text-size, 400, $subtext-color); | ||
| } | ||
|
|
||
| &-value { | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| margin-left: auto; | ||
| color: $text-color; | ||
| } | ||
|
Comment on lines
+117
to
+132
There was a problem hiding this comment. The |
||
| } | ||
|
|
||
| &__buy { | ||
| @include flex-center(166px, 40px); | ||
|
|
||
| margin-top: 16px; | ||
| margin-left: $left-margin; | ||
| background-color: $button-color; | ||
| border: 1px solid $button-color; | ||
| border-radius: $border-radius; | ||
|
|
||
| &-text { | ||
| @include text-style($buy-button-font-size, $buy-button-font-weight, white); | ||
|
|
||
| text-transform: uppercase; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| &:hover { | ||
| background-color: white; | ||
| } | ||
|
Comment on lines
+135
to
+153
There was a problem hiding this comment. The |
||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
<!DOCTYPE html>declaration should be in lowercase to adhere to the HTML5 specification and maintain consistency with the code style guide.