-
Notifications
You must be signed in to change notification settings - Fork 4k
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.
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
Add search-bar #4505
base: master
Are you sure you want to change the base?
Add search-bar #4505
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,20 +13,32 @@ | |
<title>Document</title> | ||
<link | ||
rel="stylesheet" | ||
href="style.css" | ||
href="./styles/style.css" | ||
/> | ||
</head> | ||
<body> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
|
||
<input | ||
type="text" | ||
data-qa="hover" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<form | ||
action="#" | ||
data-qa="big" | ||
class="search-bar search-bar--big" | ||
> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
class="search-bar__input" | ||
/> | ||
</form> | ||
<form | ||
action="#" | ||
data-qa="small" | ||
class="search-bar search-bar--small" | ||
> | ||
<input | ||
type="text" | ||
placeholder="Try “Los Angeles“" | ||
class="search-bar__input" | ||
/> | ||
Comment on lines
+37
to
+41
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as the previous comment, the attributes of this input element should be formatted correctly, with each attribute starting on a new line and proper indentation. |
||
</form> | ||
</body> | ||
</html> |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
@font-face { | ||
font-family: Avenir; | ||
src: url(../../fonts/Avenir.ttc); | ||
font-weight: 400; | ||
Comment on lines
+2
to
+4
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remember to use fallback fonts - alternative font-family in case the main one doesn't work. You can specify a list of comma-separated fonts to be used, ending with a generic font family, in case none of the specified fonts are available. For example: |
||
} | ||
|
||
@font-face { | ||
font-family: Avenir; | ||
src: url(../../fonts/Avenir-Book.ttf); | ||
font-weight: 300; | ||
} | ||
|
||
@font-face { | ||
font-family: Avenir; | ||
src: url(../../fonts/Avenir-Heavy.ttf); | ||
font-weight: 900; | ||
} | ||
|
||
html { | ||
box-sizing: border-box; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.search-bar--big { | ||
height: 70px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid fixing the height of elements if there is no specific requirement for it. This can lead to content overflow or unexpected layout issues when the content changes or scales. Let the content dictate the size of its container. |
||
background-position: 25px 24px; | ||
background-size: 19px; | ||
} | ||
|
||
.search-bar--big .search-bar__input { | ||
height: 22px; | ||
margin-left: 62px; | ||
line-height: 25px; | ||
} | ||
|
||
.search-bar--big .search-bar__input::placeholder { | ||
font-size: 16px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
.search-bar--small { | ||
height: 42px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid fixing the height of elements if there is no specific requirement for it. Let the content size dictate the container's size to prevent overflow or accidental scrollbars. |
||
background-position: 13px 15px; | ||
background-size: 11px; | ||
} | ||
|
||
.search-bar--small .search-bar__input { | ||
height: 20px; | ||
margin-left: 33px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Be consistent with your margins to avoid potential margin collapse. Prefer to add margin on one side (either top or bottom) rather than on both sides. |
||
} | ||
|
||
.search-bar--small .search-bar__input::placeholder { | ||
font-size: 14px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.search-bar { | ||
display: flex; | ||
align-items: center; | ||
border: 1px solid rgb(225, 231, 237); | ||
border-radius: 4px; | ||
box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); | ||
margin-top: 20px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Be consistent with your margins. It's better to add only top or bottom margins to avoid potential margin collapse issues. If the design allows it, consider using only |
||
background-image: url(../../images/Search.svg); | ||
background-repeat: no-repeat; | ||
box-sizing: border-box; | ||
} | ||
|
||
.search-bar:hover { | ||
box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
.search-bar__input { | ||
width: 100%; | ||
padding: 0; | ||
border: 0; | ||
|
||
font-family: Avenir, Arial, 'Helvetica Neue', Helvetica, sans-serif; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remember to use fallback fonts - alternative font-family in case the main one doesn't work. This ensures that if the primary font fails to load for some reason, the browser has alternative fonts to fall back on. For example, you could specify a generic font family as a fallback: |
||
font-weight: 900; | ||
|
||
color: rgb(61, 78, 97); | ||
text-shadow: 0 4px 2.8px rgba(0, 0, 0, 0.25); | ||
} | ||
|
||
.search-bar__input::placeholder { | ||
font-weight: 300; | ||
color: rgb(61, 78, 97); | ||
text-shadow: none; | ||
} | ||
|
||
.search-bar__input:focus { | ||
outline: none; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
@import './blocks/page.css'; | ||
@import './blocks/search-bar.css'; | ||
@import './blocks/search-bar__input.css'; | ||
@import './blocks/search-bar--big.css'; | ||
@import './blocks/search-bar--small.css'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The attributes of the input element should each start on a new line with 2-space indentation relative to the tag, as there are more than two attributes. The tag’s closing bracket should be on the same level as the opening one. This will improve readability as per the checklist guidelines.