search-bar ver 1.0.0 #4409
Open
search-bar ver 1.0.0 #4409
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Farrelzum
commented
Aug 3, 2024
Farrelzum
commented
- DEMO LINK
- TEST REPORT LINK
natalia-klonowska
suggested changes
Aug 4, 2024
src/style.css
Outdated
| } | ||
|
|
||
| .search-bar_big { | ||
| height: 68px; |
There was a problem hiding this comment.
total height should be 70px so you need to include border (box-sizing: border-box) and change style to 70px
same for small search
src/style.css
Outdated
Comment on lines
51
to
59
| .search-bar_big__form:focus { | ||
| margin-top: 25px; | ||
| max-height: 22px; | ||
|
|
||
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); | ||
| background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
|
|
||
| font-weight: bold; | ||
| } |
There was a problem hiding this comment.
on focus:
- there shouldn't be any border
- when you start typing the entire input moves down slightly
- input should be the size of search bar because now you add e.g background gradient only for this small fragment
src/index.html
Outdated
| /> | ||
| <form class="search"> | ||
| <div | ||
| class="search search-bar_big" |
There was a problem hiding this comment.
you don't need divs inside forms (remember to move data-qa to form)
src/index.html
Outdated
| > | ||
| <input | ||
| type="text" | ||
| class="search-bar_big__form" |
src/style.css
Outdated
Comment on lines
61
to
64
| .search-bar_big__form:placeholder-shown { | ||
| max-height: 22px; | ||
| margin-top: 21px; | ||
| } |
There was a problem hiding this comment.
try to center it so it works regardless of search bar height
src/style.css
Outdated
Comment on lines
70
to
73
| input.search-bar_big__form { | ||
| font-weight: 500; | ||
| margin-bottom: 2px; | ||
| } |
Zibi95
suggested changes
Aug 16, 2024
src/style.css
Outdated
| position: relative; | ||
| } | ||
|
|
||
| .search_big { |
There was a problem hiding this comment.
That's supposed to be modifier - .search--big
Comment on lines
+16
to
+18
| display: flex; | ||
| position: relative; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
You also use those styles in .search__small. You can move it to the .search selector. Keep your code DRY
src/style.css
Outdated
Comment on lines
69
to
71
| .search__small:hover { | ||
| box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); | ||
| } |
Comment on lines
+26
to
+31
| background-image: url('./images/Search.svg'); | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| content: ''; | ||
| position: absolute; |
src/style.css
Outdated
Comment on lines
38
to
51
| .search__input_big { | ||
| padding-left: 62px; | ||
| height: 100%; | ||
| width: 100%; | ||
| line-height: 21px; | ||
| outline: none; | ||
| box-sizing: border-box; | ||
| border: 1px solid rgba(225, 231, 237, 1); | ||
| border-radius: 4px; | ||
| box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); | ||
|
|
||
| font-family: Avenir, sans-serif; | ||
| font-size: 16px; | ||
| } |
There was a problem hiding this comment.
You can also create element .search__input and then use modifier ...--big and ..--small. This way you can remove repeated code.
Zibi95
approved these changes
Aug 19, 2024
Comment on lines
+65
to
+70
| .search__input_big:focus { | ||
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); | ||
| background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
|
|
||
| font-weight: bold; | ||
| } |
Comment on lines
+84
to
+89
| .search__input_small:focus { | ||
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); | ||
| background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
|
|
||
| font-weight: bold; | ||
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.