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

add solution #3933

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

add solution #3933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1e27aa8
add solution
rwlp Jan 4, 2024
04cead5
add task solution again
rwlp Jan 29, 2024
947fd53
add task solution 3
rwlp Jan 29, 2024
b4ee571
add task solution
rwlp Jan 29, 2024
ecb68f6
add task solution with better BEM and colors applied
rwlp Jan 30, 2024
8b694ed
correct issues
rwlp Feb 22, 2024
e6dfe53
add corrections
rwlp Feb 27, 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
12 changes: 6 additions & 6 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ ___

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

- [ ] Icon implemented using background-image CSS property
- [ ] Inputs are written inside of 'form' tag with correctly passed attributes
- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
- [ ] Code follows all the [Code Style Rules ❗️](./checklist.md)
- [x] Icon implemented using background-image CSS property
- [x] Inputs are written inside of 'form' tag with correctly passed attributes
- [x] All `Typical Mistakes` from `BEM` lesson theory are checked.
- [x] Code follows all the [Code Style Rules ❗️](./checklist.md)
58 changes: 52 additions & 6 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,61 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Search bar airbnb</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Search bar airbnb</h1>

<body class="page">
<div class="container">
<!-- #region formbig-->
<form
action="post"
class="form"
Copy link

Choose a reason for hiding this comment

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

Missing BEM parent block:

Class should be "container__form form".

Copy link
Author

Choose a reason for hiding this comment

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

I that case I consider form as a block.
Initially I don't see the needed to made mix. Can you explain better if is always necessary mix in nested blocks, and I kind beg to you if possible show the documentation that suport you response.

data-qa="big"
>
<button
id="button-search-big"
class="search-button search-button--size--big form__search-button--big"
type="submit"
name="buttom search"
>
</button>

<input
id="input-search"
class="input-search input-search--size--big form__search-input--big"
data-qa="keypress"
type="text"
placeholder="Try &quot;Los Angeles&quot;"
>
Copy link

Choose a reason for hiding this comment

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

Missing closing tag:

I believe you forgot to add the closing tag to this input.

<input
          id="input-search"
          class="input-search input-search--size-big form__search-input-big"
          data-qa="keypress"
          type="text"
          placeholder="Try &quot;Los Angeles&quot;"
>
</input>

</input>
</form>
<!-- #endregion formsmall -->

<form
action="post"
class="form"
Copy link

Choose a reason for hiding this comment

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

Missing Block parent:

Same naming as before, should contain parent block class here also: class="container__form form"

data-qa="small"
>
<button
id="button-search-small"
class="search-button search-button--size--small form__search-button--small"
type="submit"
name="buttom search"
>
</button>

<input
id="small-search"
class="input-search input-search--size--small form__search-input--small"
type="text"
placeholder="Try &quot;Los Angeles&quot;"
>
Copy link

Choose a reason for hiding this comment

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

Missing closing tag:

Same error as above

</input>
</form>
<!-- #endregion formbig-->
</div>
</body>
</html>
139 changes: 138 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,138 @@
/* add styles here */
/* #region fonts */
@font-face {
font-family: Avenir;
src: url("fonts/Avenir-Book.ttf");
}

/* #endregion fonts */

/* #region normalize */
* {
margin: 0;
padding: 0;
}

/* #endregion normalize */

/* #region page */
.page {
font-style: Avenir;
font-weight: 300;
padding: 20px 8px 0;
}

/* #endregion page */

/* #region container (Is used as a DOM element) */
.container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
padding: 0;
}

/* #endregion container */

/* #region form */
.form {
width: 100%;
display: flex;
align-items: center;
position: relative;
}

.form__search-button--big {
position: absolute;
top: 25px;
left: 26px;
}

.form__search-button--small {
position: absolute;
top: 15px;
left: 13px;
}

/* #endregion form */

/* #region icon-search */
.search-button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
background-image: url(images/Search.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 1;
}

.search-button--size--big {
width: 19px;
height: 19px;
}

.search-button--size-small {
width: 11px;
height: 11px;
}

/* #endregion icon-search */

/* #region input-search */
.input-search {
width: 100%;
border: 1px solid #E1E7ED;
border-radius: 3px;
box-shadow: 0 1px 8px #3D4E611A;
box-sizing: border-box;
font-family: Avenir, sans-serif;
}

.input-search:hover {
box-shadow: 0 3px 8px #3D4E6133;
}

.input-search:focus {
background: linear-gradient(180deg, #fff 0%, #F6F6F7 100%);
border: 1px solid #E1E7ED;
letter-spacing: 0;
text-align: left;
}

.input-search--size--big {
height: 70px;
text-indent: 62px;
font-size: 16px;
}

.input-search--size--big::placeholder {
font-weight: 300;
color: #3D4E61;
}

.input-search--size--big:focus {
color: #3D4E61;
text-shadow: 0 4px 4px #00000040;
}

.input-search--size--small {
height: 42px;
padding-left: 33px;
font-size: 14px;
font-weight: 400;
line-height: 19px;
}

.input-search--size--small::placeholder {
font-weight: 300;
color:#3D4E61;
}
Comment on lines +111 to +132
Copy link

Choose a reason for hiding this comment

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

The styles for input-search--size--big::placeholder and input-search--size--small::placeholder are the same, which means with either modifier the input-seach block will have the same style; since input-search is always used with one of these modifiers maybe you should consider not making this style belonging to the modifier but to the actual input-search; that is:

.input-search::placeholder {
  font-weight: 300;
  color: #3D4E61;
}


.input-search--size-small:focus {
font-weight: 900;
}

/* #endregion input-search */