save

mate-academy · Nov 14, 2024 · 4dfe1ea · 4dfe1ea
1 parent 9bad47d
commit 4dfe1ea
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 21 deletions.
diff --git a/.github/workflows/test.yml-template 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/README.md b/README.md
@@ -20,6 +20,7 @@ Display a calendar in the middle of the screen (both horizontally and vertically
   - Set 31 days by default
 
 On hovering over a cell:
+
 - cursor should become pointer
 - The hovered cell has to become pink (use `#FFBFCB`)
 - Move the hovered cell up by `20px` (use `transform`)
@@ -33,13 +34,13 @@ On hovering over a cell:
 
 ❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_calendar/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_calendar/report/html_report/)
+- [DEMO LINK](https://andrewsiemakin.github.io/layout_calendar/)
+- [TEST REPORT LINK](https://andrewsiemakin.github.io/layout_calendar/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
 - [ ] Changing 'month-lengh' and 'start-day' modifier in the code element
-reflects in changing calendar layout
-- [ ] Each day has no modifiers, only class (eg. calendar__day)
+      reflects in changing calendar layout
+- [ ] Each day has no modifiers, only class (eg. calendar\_\_day)
 - [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
 - [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
diff --git a/package-lock.json b/package-lock.json
diff --git 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/src/index.html b/src/index.html
@@ -14,8 +14,7 @@
   </head>
 
   <body>
-    <h1>Calendar</h1>
-    <div class="calendar calendar--start-sun calendar--month-31">
+    <div class="calendar calendar--start-day-sun calendar--month-length-31">
       <div class="calendar__day calendar__day--first-day"></div>
       <div class="calendar__day"></div>
       <div class="calendar__day"></div>

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -9,45 +9,56 @@ $day-bg: #eee;
 $hover-bg: #ffbfcb;
 $font-size: 30px;
 $font-color: #000;
+$days: (
+  sun: 0,
+  mon: 1,
+  tue: 2,
+  wed: 3,
+  thu: 4,
+  fri: 5,
+  sat: 6,
+);
 
 .calendar {
   display: flex;
   flex-wrap: wrap;
-  width: calc((#{$day-size} + #{$day-gap} * 2) * 7);
-  border: $border-size solid #000 ;
-  padding: 10px;
+  width: 706px;
   margin: auto;
+  padding: 10px;
+  gap: 1px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  @each $day, $offset in (sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6) {
-    &--start-#{$day} .calendar__day:first-child {
+  @each $day,
+    $offset in (sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6)
+  {
+    &--start-day-#{$day} .calendar__day:first-child {
       margin-left: calc((6 - #{$offset}) * (#{$day-size} + #{$day-gap}));
     }
   }
-
 
   @for $i from 28 through 31 {
-    &--month-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {
+    &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {
       display: none;
     }
   }
 
   &__day {
+    cursor: pointer;
+    color: $font-color;
+    box-sizing: border-box;
+    background-color: $day-bg;
     width: $day-size;
     height: $day-size;
-    background-color: $day-bg;
     border: solid $border-size #000;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
     font-family: Arial, sans-serif;
     font-size: $font-size;
-    color: $font-color;
     transition:
       background-color 0.5s,
       transform 0.5s;