Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Develop #4482

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Develop #4482

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3a81e8
add task solution
iirk1 Sep 20, 2024
e84f1ae
add task solution
iirk1 Sep 20, 2024
bcdec0b
add task solution
iirk1 Sep 23, 2024
9793f1c
add task solution
iirk1 Sep 23, 2024
75c31b2
add task solution
iirk1 Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion .linthtmlrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 5 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ ___

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://<your_account>.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.

Expand Down
3 changes: 3 additions & 0 deletions src/images/search-small.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 16 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,22 @@
/>
</head>
<body>
<input
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
<div class="search-box search-box--big">
<input
class="search-txt search-txt--big"
type="text"
data-qa="big"
placeholder="Try “Los Angeles“"
Comment on lines +21 to +25
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep your attributes correctly formatted. The <input> tag starting on line 21 should have each attribute on a new line with proper indentation.

/>
Comment on lines +20 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty lines between multiline sibling blocks of HTML to simplify reading.

Comment on lines +20 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep your attributes correctly formatted. Since the input element on lines 21-26 has more than 2 attributes, each attribute should start on a new line with proper indentation.

Comment on lines +20 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line between the closing </div> on line 27 and the opening <div> on line 29.

</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty lines between multiline sibling blocks of HTML. There should be an empty line between the div elements on lines 20-27 and 29-36.


<input
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<div class="search-box search-box--small">
<input
class="search-txt search-txt--small"
type="text"
data-qa="small"
placeholder="Try “Los Angeles“"
Comment on lines +30 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep your attributes correctly formatted. The <input> tag starting on line 30 should have each attribute on a new line with proper indentation.

/>
Comment on lines +29 to +35
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep your attributes correctly formatted. The input element on lines 30-35 should have each attribute on a new line with the correct indentation.

</div>
</body>
</html>
91 changes: 90 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,90 @@
/* add styles here */
body {
font-family: ' Avenir ', sans-serif;
font-weight: 300;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The font-family declaration should include a fallback font. It's a good practice to have a generic font family specified in case the primary font fails to load. For example: font-family: 'Avenir', Arial, sans-serif;.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are extra spaces inside the quotes of the font-family name 'Avenir'. It should be written without leading or trailing spaces as font-family: 'Avenir', sans-serif;.

}

input {
all: unset;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid #e1e7ed;
}
Comment on lines +6 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't fix container size (if there is no such a requirement). In this case, setting both width: 100%; and height: 100%; on the input element might lead to unexpected behavior if the parent's size is not defined. It's usually better to control the size of an input with padding and possibly max-width or max-height.


@font-face {
font-family: ' Avenir ';
src: url('./fonts/Avenir-Book.ttf') format('truetype');
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The @font-face rule should also include a font-weight property to specify the weight of the font being defined. This helps in properly selecting the right font when different weights are used in the CSS.

.search-box {
position: relative;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The selector '.search-box' is styling a class name directly. According to the checklist, you should avoid using tag names for styling (except 'html' and 'body'). It's recommended to use classes for styling elements.

margin: 20px 0;
box-shadow: 0 1px 8px 0 #3d4e611a;
border-radius: 4px;
}
Comment on lines +21 to +25
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .search-box class should not fix the size of the container. Instead, it should allow the content to dictate the size. Make sure there is no requirement for a fixed size before applying this change.


Comment on lines +21 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be consistent with your margins (Add only top or bottom, but not both). Here, you've added a margin with margin: 20px 0; which is fine, but ensure that the rest of the elements follow the same convention of either top or bottom margin for consistency and to avoid margin collapse issues.

.search-box--big {
height: 70px;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that there is no requirement for a fixed size for .search-box--big. If the content can dictate the size, avoid setting a fixed height.


.search-box--small {
height: 42px;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that there is no requirement for a fixed size for .search-box--small. If the content can dictate the size, avoid setting a fixed height.


.search-box--big::before {
position: absolute;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image URL in the background-image property should be enclosed in single or double quotes for consistency and to ensure compatibility across different browsers.

content: '';
background-image: url('./images/Search.svg');
background-repeat: no-repeat;
top: 25px;
left: 26px;
width: 19px;
height: 19px;
}

.search-box--small::before {
position: absolute;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image URL in the background-image property should be enclosed in single or double quotes for consistency and to ensure compatibility across different browsers.

content: '';
background-image: url('./images/search-small.svg');
background-repeat: no-repeat;
top: 15px;
left: 13px;
width: 11px;
height: 11px;
}

.search-txt {
border-radius: 4px;
color: #3d4e61;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The '.search-txt' class is applying a border-radius, which is not needed here since this class is used for text elements and not for any box/container elements.

}

.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);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applying a text-shadow with a large spread on focus can be visually straining for users. Consider a more subtle effect or remove it if it's not necessary for the design.

box-shadow: 0 4px 4px 0 #00000040;
}
Loading