From b3a81e8fc840688c80a26f6726be9c19ecd9e9e0 Mon Sep 17 00:00:00 2001 From: Iryna Kogut Date: Fri, 20 Sep 2024 21:27:29 +0300 Subject: [PATCH 1/5] add task solution --- .github/workflows/test.yml-template | 29 +++++++++ .linthtmlrc.json | 2 +- package-lock.json | 9 +-- package.json | 3 +- readme.md | 4 +- src/images/search-small.svg | 3 + src/index.html | 26 +++++--- src/style.css | 95 ++++++++++++++++++++++++++++- 8 files changed, 151 insertions(+), 20 deletions(-) create mode 100644 .github/workflows/test.yml-template create mode 100644 src/images/search-small.svg 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/.linthtmlrc.json b/.linthtmlrc.json index 477c99b1b9..674b33ed1d 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -9,7 +9,7 @@ ], "attr-name-ignore-regex": "viewBox", "attr-no-dup": true, - "attr-quote-style": "double", + "attr-quote-style": "quoted", "attr-req-value": true, "class-no-dup": true, "doctype-first": true, diff --git a/package-lock.json b/package-lock.json index dd9fc11d8c..97e964c879 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", "backstopjs": "6.3.23", "jest": "^29.7.0", @@ -1211,10 +1211,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 e3be26f95e..3e67df15d4 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,12 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@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", "backstopjs": "6.3.23", "jest": "^29.7.0", diff --git a/readme.md b/readme.md index b635aa290b..11ddb55368 100644 --- a/readme.md +++ b/readme.md @@ -25,8 +25,8 @@ ___ ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_search-bar-airbnb/) -- [TEST REPORT LINK](https://.github.io/layout_search-bar-airbnb/report/html_report/) +- [DEMO LINK](https://iirk1.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://iirk1.github.io/layout_search-bar-airbnb/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/images/search-small.svg b/src/images/search-small.svg new file mode 100644 index 0000000000..47fc3c9964 --- /dev/null +++ b/src/images/search-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index abe507e10c..f4ab22938a 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,22 @@ /> - +
+ +
- +
+ +
diff --git a/src/style.css b/src/style.css index a63fa10d43..2bb08a02f7 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,94 @@ -/* add styles here */ +body { + margin: 0; + padding: 0; + font-family: ' Avenir ', sans-serif; + font-weight: 300; +} + +input { + all: unset; +} + +@font-face { + font-family: ' Avenir '; + src: url('./fonts/Avenir-Book.ttf') format('truetype'); +} + +.search-box { + position: relative; + box-shadow: 0 1px 8px 0 #3d4e611a; + margin: 20px 25px; + border: 1px solid #e1e7ed; + border-radius: 4px; +} + +.search-box--big { + height: 68px; +} + +.search-box--small { + height: 40px; +} + +.search-box--big::before { + position: absolute; + content: ''; + background-image: url('./images/Search.svg'); + background-repeat: no-repeat; + top: 25px; + left: 26px; + width: 100%; + height: 100%; +} + +.search-box--small::before { + position: absolute; + content: ''; + background-image: url('./images/search-small.svg'); + background-repeat: no-repeat; + top: 15px; + left: 13px; + width: 100%; + height: 100%; +} + +.search-txt { + border: none; + background: none; + outline: none; + padding: 0; + height: 100%; + width: 100%; + color: #3d4e61; +} + +.search-txt--big { + padding-left: 62px; + font-size: 16px; + line-height: 21.86px; +} + +.search-txt--small { + padding-left: 33px; + font-weight: 400; + font-size: 14px; + line-height: 19.12px; +} + +.search-box:hover { + box-shadow: 0 4px 4px 0 #00000040; +} + +input::placeholder { + color: #3d4e61; +} + +input:focus::placeholder { + opacity: 0; +} + +.search-txt:focus { + font-weight: 900; + text-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 4px 0 #00000040; +} From e84f1ae2ce28e96b0647f2ff2cf82acff53f9ad8 Mon Sep 17 00:00:00 2001 From: Iryna Kogut Date: Fri, 20 Sep 2024 21:33:21 +0300 Subject: [PATCH 2/5] add task solution --- src/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/style.css b/src/style.css index 2bb08a02f7..7af78da526 100644 --- a/src/style.css +++ b/src/style.css @@ -37,8 +37,8 @@ input { background-repeat: no-repeat; top: 25px; left: 26px; - width: 100%; - height: 100%; + width: 19px; + height: 19px; } .search-box--small::before { @@ -48,8 +48,8 @@ input { background-repeat: no-repeat; top: 15px; left: 13px; - width: 100%; - height: 100%; + width: 11px; + height: 11px; } .search-txt { From bcdec0be91140f751d25674f43de028c0fbee8bd Mon Sep 17 00:00:00 2001 From: Iryna Kogut Date: Mon, 23 Sep 2024 13:06:23 +0300 Subject: [PATCH 3/5] add task solution --- src/index.html | 4 ++-- src/style.css | 20 ++++++++------------ 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/index.html b/src/index.html index f4ab22938a..ade4a0c5b0 100644 --- a/src/index.html +++ b/src/index.html @@ -21,7 +21,7 @@ @@ -30,7 +30,7 @@ diff --git a/src/style.css b/src/style.css index 7af78da526..7a301e4f78 100644 --- a/src/style.css +++ b/src/style.css @@ -1,12 +1,14 @@ body { - margin: 0; - padding: 0; font-family: ' Avenir ', sans-serif; font-weight: 300; } input { all: unset; + width: 100%; + height: 100%; + box-sizing: border-box; + border: 1px solid #e1e7ed; } @font-face { @@ -16,18 +18,17 @@ input { .search-box { position: relative; + margin: 20px 0; box-shadow: 0 1px 8px 0 #3d4e611a; - margin: 20px 25px; - border: 1px solid #e1e7ed; border-radius: 4px; } .search-box--big { - height: 68px; + height: 70px; } .search-box--small { - height: 40px; + height: 42px; } .search-box--big::before { @@ -53,12 +54,7 @@ input { } .search-txt { - border: none; - background: none; - outline: none; - padding: 0; - height: 100%; - width: 100%; + border-radius: 4px; color: #3d4e61; } From 9793f1c36e575de72ab0f65480ef9fb9560fc0da Mon Sep 17 00:00:00 2001 From: Iryna Kogut Date: Mon, 23 Sep 2024 13:39:01 +0300 Subject: [PATCH 4/5] add task solution --- src/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/style.css b/src/style.css index 7a301e4f78..f38a777a60 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,5 @@ body { - font-family: ' Avenir ', sans-serif; - font-weight: 300; + font-family: ' Avenir', Arial, sans-serif; } input { @@ -12,8 +11,9 @@ input { } @font-face { - font-family: ' Avenir '; + font-family: ' Avenir', sans-serif; src: url('./fonts/Avenir-Book.ttf') format('truetype'); + font-weight: 300; } .search-box { From 75c31b20951bb68042f30f6ec5cd17e34da0fda7 Mon Sep 17 00:00:00 2001 From: Iryna Kogut Date: Mon, 23 Sep 2024 14:30:04 +0300 Subject: [PATCH 5/5] add task solution --- src/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index f38a777a60..e311f91742 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,6 @@ body { - font-family: ' Avenir', Arial, sans-serif; + /* stylelint-disable-next-line font-family-name-quotes */ + font-family: 'Avenir', Arial, sans-serif; } input { @@ -11,7 +12,8 @@ input { } @font-face { - font-family: ' Avenir', sans-serif; + /* stylelint-disable-next-line font-family-name-quotes */ + font-family: "Avenir" ; src: url('./fonts/Avenir-Book.ttf') format('truetype'); font-weight: 300; }