From c9752d3bc6f14e0b3827c3e6da9f0a8e17484b38 Mon Sep 17 00:00:00 2001 From: Anhelina Liubyntsova Date: Tue, 24 Sep 2024 16:22:39 +0300 Subject: [PATCH 1/5] add task solution --- readme.md | 4 +-- src/index.html | 32 +++++++++++++------ src/style.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 106 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index b635aa290b..523f5ba3ea 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://RareHelix.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://RareHelix.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/index.html b/src/index.html index abe507e10c..703418828b 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,28 @@ /> - +
+
+
+ +
+
- + +
diff --git a/src/style.css b/src/style.css index a63fa10d43..6515a8727d 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,82 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + font-weight: 300; + src: url('./fonts/Avenir-Book.ttf') format('truetype'); +} + +@font-face { + font-family: Avenir; + font-weight: 600; + src: url('./fonts/Avenir-Heavy.ttf') format('truetype'); +} + +body { + margin: 0; + font-family: Avenir, sans-serif; +} + +.search-container { + display: flex; + flex-direction: column; + align-items: stretch; + padding: 20px; +} + +.search-input { + width: 95%; + padding-left: 40px; + border: 1px solid #e1e7ed; + border-radius: 4px; + font-weight: 300; + transition: border-color 0.3s; + box-shadow: 0 0 7 rgb(205, 205, 205); + font-family: inherit; + position: relative; +} + +.big { + margin-top: 20px; + height: 70px; + font-size: 16px; +} + +.small { + margin-top: 20px; + height: 42px; + font-size: 14px; + box-shadow: 0 0 7 rgb(217, 216, 216); +} + +.search-input:hover { + border-color: #e1e7ed; + box-shadow: 0 3px 5px rgb(153, 153, 153); +} + +.search-input:focus { + background: + linear-gradient(#ffff, #f6f6f7), + url(../src/images/Search.svg) no-repeat 30px; + color: #3d4e61; + font-weight: 600; + font-family: inherit; + outline: none; +} + +.icon::before { + /* background: url(../src/images/Search.svg) no-repeat; */ + content: url(../src/images/Search.svg); + position: absolute; + top: 100px; +} + +.big:focus { + text-shadow: 0 3px 3px #bbbec2; +} + +.small:hover { + box-shadow: 0 3px 5px rgb(206, 206, 206); +} + +.small:focus { + box-shadow: none; +} From b8980c6c2bff0648d5e20bc87aadc2336f2ef78f Mon Sep 17 00:00:00 2001 From: Anhelina Liubyntsova Date: Wed, 25 Sep 2024 17:41:01 +0300 Subject: [PATCH 2/5] add task solution --- src/index.html | 26 ++++++++++++++++++-------- src/style.css | 50 +++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/index.html b/src/index.html index 703418828b..ba2d140eb2 100644 --- a/src/index.html +++ b/src/index.html @@ -17,28 +17,38 @@ /> -
+
- +
+
+ +
+
diff --git a/src/style.css b/src/style.css index 6515a8727d..2af7eb3140 100644 --- a/src/style.css +++ b/src/style.css @@ -12,28 +12,36 @@ body { margin: 0; - font-family: Avenir, sans-serif; + font-family: Avenir, Arial, sans-serif; } -.search-container { +.search__container { display: flex; flex-direction: column; align-items: stretch; - padding: 20px; } -.search-input { +.search__input { + color: #3D4E61; width: 95%; - padding-left: 40px; + padding-left: 45px; border: 1px solid #e1e7ed; border-radius: 4px; font-weight: 300; transition: border-color 0.3s; - box-shadow: 0 0 7 rgb(205, 205, 205); + box-shadow: 0 0 7px rgb(232, 230, 230); font-family: inherit; position: relative; + margin-left: 10px; + margin-right: 10px; } +.search__input::placeholder { + color: #3d4e61; +} + + + .big { margin-top: 20px; height: 70px; @@ -44,15 +52,16 @@ body { margin-top: 20px; height: 42px; font-size: 14px; - box-shadow: 0 0 7 rgb(217, 216, 216); + box-shadow: 0 0 7px rgb(229, 228, 228); + text-shadow: 0 3px 4px #bbbec2; } -.search-input:hover { +.search__input:hover { border-color: #e1e7ed; box-shadow: 0 3px 5px rgb(153, 153, 153); } -.search-input:focus { +.search__input:focus { background: linear-gradient(#ffff, #f6f6f7), url(../src/images/Search.svg) no-repeat 30px; @@ -64,9 +73,26 @@ body { .icon::before { /* background: url(../src/images/Search.svg) no-repeat; */ - content: url(../src/images/Search.svg); + content: url(/src/images/Search.svg); + position: absolute; + top: 55px; + z-index: 10; + transform: translateY(-50%); + left: 25px; + height: 19px; + width: 19px; +} + +.icon-small::before { + content: url(/src/images/Search.svg); position: absolute; - top: 100px; + top: 135px; + z-index: 10; + transform: translateY(-50%); + left: 25px; + height: 11px; + width: 11px; + background-size: 11px; } .big:focus { @@ -75,8 +101,10 @@ body { .small:hover { box-shadow: 0 3px 5px rgb(206, 206, 206); + text-shadow: none; } .small:focus { box-shadow: none; + text-shadow: none; } From 9124af69cd2ec3f3110062fc63a17109a8aeb36c Mon Sep 17 00:00:00 2001 From: Anhelina Liubyntsova Date: Wed, 25 Sep 2024 18:30:02 +0300 Subject: [PATCH 3/5] 123 --- .github/workflows/test.yml-template | 29 ++++++++++++++ backstop_data/engine_scripts/cookies.json | 14 ------- .../puppet/clickAndHoverHelper.js | 39 ------------------- .../engine_scripts/puppet/loadCookies.js | 29 -------------- .../engine_scripts/puppet/onBefore.js | 3 -- .../engine_scripts/puppet/onReady.js | 6 --- package-lock.json | 8 ++-- package.json | 3 +- 8 files changed, 34 insertions(+), 97 deletions(-) create mode 100644 .github/workflows/test.yml-template delete mode 100644 backstop_data/engine_scripts/cookies.json delete mode 100644 backstop_data/engine_scripts/puppet/clickAndHoverHelper.js delete mode 100644 backstop_data/engine_scripts/puppet/loadCookies.js delete mode 100644 backstop_data/engine_scripts/puppet/onBefore.js delete mode 100644 backstop_data/engine_scripts/puppet/onReady.js 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/backstop_data/engine_scripts/cookies.json b/backstop_data/engine_scripts/cookies.json deleted file mode 100644 index b59400d7e6..0000000000 --- a/backstop_data/engine_scripts/cookies.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - { - "domain": ".www.yourdomain.com", - "path": "/", - "name": "yourCookieName", - "value": "yourCookieValue", - "expirationDate": 1798790400, - "hostOnly": false, - "httpOnly": false, - "secure": false, - "session": false, - "sameSite": "no_restriction" - } -] diff --git a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js b/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js deleted file mode 100644 index 6c1e1b8841..0000000000 --- a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js +++ /dev/null @@ -1,39 +0,0 @@ -module.exports = async (page, scenario) => { - var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector; - var clickSelector = scenario.clickSelectors || scenario.clickSelector; - var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector; - var scrollToSelector = scenario.scrollToSelector; - var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int] - - if (keyPressSelector) { - for (const keyPressSelectorItem of [].concat(keyPressSelector)) { - await page.waitForSelector(keyPressSelectorItem.selector); - await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress); - } - } - - if (hoverSelector) { - for (const hoverSelectorIndex of [].concat(hoverSelector)) { - await page.waitForSelector(hoverSelectorIndex); - await page.hover(hoverSelectorIndex); - } - } - - if (clickSelector) { - for (const clickSelectorIndex of [].concat(clickSelector)) { - await page.waitForSelector(clickSelectorIndex); - await page.click(clickSelectorIndex); - } - } - - if (postInteractionWait) { - await new Promise(resolve => setTimeout(resolve, postInteractionWait)); - } - - if (scrollToSelector) { - await page.waitForSelector(scrollToSelector); - await page.evaluate(scrollToSelector => { - document.querySelector(scrollToSelector).scrollIntoView(); - }, scrollToSelector); - } -}; diff --git a/backstop_data/engine_scripts/puppet/loadCookies.js b/backstop_data/engine_scripts/puppet/loadCookies.js deleted file mode 100644 index db848a7cc7..0000000000 --- a/backstop_data/engine_scripts/puppet/loadCookies.js +++ /dev/null @@ -1,29 +0,0 @@ -var fs = require('fs'); - -module.exports = async (page, scenario) => { - var cookies = []; - var cookiePath = scenario.cookiePath; - - // READ COOKIES FROM FILE IF EXISTS - if (fs.existsSync(cookiePath)) { - cookies = JSON.parse(fs.readFileSync(cookiePath)); - } - - // MUNGE COOKIE DOMAIN - cookies = cookies.map(cookie => { - cookie.url = 'https://' + cookie.domain; - delete cookie.domain; - return cookie; - }); - - // SET COOKIES - const setCookies = async () => { - return Promise.all( - cookies.map(async (cookie) => { - await page.setCookie(cookie); - }) - ); - }; - await setCookies(); - console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2)); -}; diff --git a/backstop_data/engine_scripts/puppet/onBefore.js b/backstop_data/engine_scripts/puppet/onBefore.js deleted file mode 100644 index a1c374c371..0000000000 --- a/backstop_data/engine_scripts/puppet/onBefore.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = async (page, scenario, vp) => { - await require('./loadCookies')(page, scenario); -}; diff --git a/backstop_data/engine_scripts/puppet/onReady.js b/backstop_data/engine_scripts/puppet/onReady.js deleted file mode 100644 index 517c0e41b6..0000000000 --- a/backstop_data/engine_scripts/puppet/onReady.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = async (page, scenario, vp) => { - console.log('SCENARIO > ' + scenario.label); - await require('./clickAndHoverHelper')(page, scenario); - - // add more ready handlers here... -}; diff --git a/package-lock.json b/package-lock.json index dd9fc11d8c..14bccab866 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,9 +1211,9 @@ "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, "dependencies": { "@octokit/rest": "^17.11.2", 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", From e5b868be01d9f5e8241855de86b7c248e5355878 Mon Sep 17 00:00:00 2001 From: Anhelina Liubyntsova Date: Wed, 25 Sep 2024 18:55:51 +0300 Subject: [PATCH 4/5] 124 --- src/style.css | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/style.css b/src/style.css index 2af7eb3140..237001e179 100644 --- a/src/style.css +++ b/src/style.css @@ -22,7 +22,7 @@ body { } .search__input { - color: #3D4E61; + color: #3d4e61; width: 95%; padding-left: 45px; border: 1px solid #e1e7ed; @@ -40,8 +40,6 @@ body { color: #3d4e61; } - - .big { margin-top: 20px; height: 70px; @@ -84,15 +82,16 @@ body { } .icon-small::before { - content: url(/src/images/Search.svg); + content: ''; + z-index: 10; + background-size: 11px; + width: 11px; + height: 11px; position: absolute; top: 135px; - z-index: 10; - transform: translateY(-50%); left: 25px; - height: 11px; - width: 11px; - background-size: 11px; + transform: translateY(-50%); + background-image: url(/src/images/Search.svg); } .big:focus { From 2624615c6a6a52bccc62b90c8aef69ee30bd3d42 Mon Sep 17 00:00:00 2001 From: Anhelina Liubyntsova Date: Mon, 30 Sep 2024 19:48:31 +0300 Subject: [PATCH 5/5] change margin --- src/index.html | 6 +++--- src/style.css | 30 ++++++++++++++++++------------ 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/index.html b/src/index.html index ba2d140eb2..db7548ed26 100644 --- a/src/index.html +++ b/src/index.html @@ -24,11 +24,11 @@ class="search-bar" data-qa="big" > -
+
@@ -44,7 +44,7 @@
diff --git a/src/style.css b/src/style.css index 237001e179..db5bf7f0f2 100644 --- a/src/style.css +++ b/src/style.css @@ -10,8 +10,12 @@ src: url('./fonts/Avenir-Heavy.ttf') format('truetype'); } +* { + box-sizing: border-box; +} + body { - margin: 0; + margin-top: 0; font-family: Avenir, Arial, sans-serif; } @@ -19,12 +23,12 @@ body { display: flex; flex-direction: column; align-items: stretch; + width: 100%; } .search__input { color: #3d4e61; - width: 95%; - padding-left: 45px; + width: 100%; border: 1px solid #e1e7ed; border-radius: 4px; font-weight: 300; @@ -32,8 +36,6 @@ body { box-shadow: 0 0 7px rgb(232, 230, 230); font-family: inherit; position: relative; - margin-left: 10px; - margin-right: 10px; } .search__input::placeholder { @@ -41,17 +43,16 @@ body { } .big { - margin-top: 20px; height: 70px; font-size: 16px; + padding-left: 62px; } .small { - margin-top: 20px; height: 42px; font-size: 14px; box-shadow: 0 0 7px rgb(229, 228, 228); - text-shadow: 0 3px 4px #bbbec2; + padding-left: 33px; } .search__input:hover { @@ -69,11 +70,16 @@ body { outline: none; } -.icon::before { +form { + position: relative; + margin-top: 20px; +} + +.icon-big::before { /* background: url(../src/images/Search.svg) no-repeat; */ content: url(/src/images/Search.svg); position: absolute; - top: 55px; + top: 35px; z-index: 10; transform: translateY(-50%); left: 25px; @@ -88,8 +94,8 @@ body { width: 11px; height: 11px; position: absolute; - top: 135px; - left: 25px; + top: 20px; + left: 13px; transform: translateY(-50%); background-image: url(/src/images/Search.svg); }