From 0047d78e4ad35383393035569c262b6e52348728 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Sat, 21 Dec 2024 21:38:56 +0200 Subject: [PATCH 1/2] add calendar --- .github/workflows/test.yml-template | 29 ++++++++++++ README.md | 4 +- package-lock.json | 16 ++++--- package.json | 2 +- src/index.html | 36 ++++++++++++++- src/styles/index.scss | 3 -- src/styles/main.scss | 70 +++++++++++++++++++++++++++++ 7 files changed, 145 insertions(+), 15 deletions(-) create mode 100644 .github/workflows/test.yml-template delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /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/README.md b/README.md index 37cba2aad..31ac58293 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,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 `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_calendar/) -- [TEST REPORT LINK](https://.github.io/layout_calendar/report/html_report/) +- [DEMO LINK](https://ValentynaD.github.io/layout_calendar/) +- [TEST REPORT LINK](https://ValentynaD.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. diff --git a/package-lock.json b/package-lock.json index 08a8b9f22..5fc96b27d 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", @@ -1212,10 +1212,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", @@ -9804,10 +9805,11 @@ } }, "node_modules/prettier": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", - "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/package.json b/package.json index 8ba3c0562..5691b66ca 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/src/index.html b/src/index.html index c10199d38..07f4b1f49 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f1..000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 000000000..c3cceabf7 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,70 @@ +$day-size: 98px; +$border-width: 1px; +$gap: 1px; +$padding: 10px; +$columns: 7; +$animation-duration: 0.5s; +$font-size: 30px; + +.calendar { + display: flex; + flex-wrap: wrap; + width: calc(#{$columns} * (#{$day-size} + #{$gap}) + 2 * #{$padding} + 3px); + height: auto; + padding: $padding; + justify-content: left; + align-items: center; + margin: 0 0 0 5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + &__day { + width: $day-size; + height: $day-size; + border: $border-width solid black; + background-color: #eee; + margin-top: $gap; + margin-right: $gap; + position: relative; + display: flex; + justify-content: center; + align-items: center; + cursor: default; + transition: all $animation-duration ease; + + @for $i from 1 through 31 { + &:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, sans-serif; + font-size: $font-size; + position: absolute; + } + } + + &:hover { + background-color: #ffbfcb; + transform: translateY(-20px); + cursor: pointer; + } + } + + @each $day, $index in (mon: 0, tue: 1, wed: 2, thu: 3, fri: 4, sat: 5, sun: 6) + { + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($day-size + $gap) * $index + $index * 2; + } + } + } + + // Month length modifiers + @for $i from 28 through 31 { + &--month-length-#{$i} { + .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } + } + } +} From c7f15500560cf85ad7409886e748cb295cc33ffd Mon Sep 17 00:00:00 2001 From: Valentyna Date: Sat, 21 Dec 2024 21:40:52 +0200 Subject: [PATCH 2/2] add calendar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 31ac58293..cfc7306ea 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ![reference image](reference.png). -## Checklist +## Checklistg ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: