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

initial task solution #4563

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

initial task solution #4563

wants to merge 2 commits into from

Conversation

MichaelK-jpg
Copy link

  • [ 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 ❗️

In need some tips on how to make this better. This is close but not perfect and two tests still come as failed.

mateacademy-ai-mentor
mateacademy-ai-mentor suggested changes Oct 24, 2024
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Thank you for your hard work on this! 😊 There are a few critical issues that need to be addressed before we can approve the pull request. The missing units for 'background-size' and 'background-position' properties could affect the rendering of your design, and it's important to ensure the 'font-weight' matches the available font files to maintain consistency. Please make these adjustments, and feel free to reach out if you need any help! Keep up the great work! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

src/blocks/big-search.css Outdated
border: none;
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 19;
Copy link

Choose a reason for hiding this comment

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

The 'background-size' property is missing a unit. It should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/big-search.css Outdated
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 19;
background-position: 26 24;
Copy link

Choose a reason for hiding this comment

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

The 'background-position' property is missing units. Both values should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/big-search.css Outdated
background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 19;
Copy link

Choose a reason for hiding this comment

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

The 'background-size' property is missing a unit. It should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/big-search.css Outdated
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 19;
background-position: 26 24;
Copy link

Choose a reason for hiding this comment

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

The 'background-position' property is missing units. Both values should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/small-search.css
border: none;
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11;
Copy link

Choose a reason for hiding this comment

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

The 'background-size' property is missing a unit. It should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/small-search.css Outdated
box-shadow: 0 3px 8px 0 #3d4e6133;
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11;
Copy link

Choose a reason for hiding this comment

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

The 'background-size' property is missing a unit. It should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/small-search.css Outdated
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11;
background-position: 13 14;
Copy link

Choose a reason for hiding this comment

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

The 'background-position' property is missing units. Both values should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/small-search.css Outdated
border-radius: 3px;
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11;
Copy link

Choose a reason for hiding this comment

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

The 'background-size' property is missing a unit. It should be specified in a valid CSS unit like 'px', 'em', etc.

src/blocks/small-search.css Outdated
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11;
background-position: 13 14;
Copy link

Choose a reason for hiding this comment

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

The 'background-position' property is missing units. Both values should be specified in a valid CSS unit like 'px', 'em', etc.

src/style.css Outdated
font-family: Avenir;
src: url(./fonts/Avenir-Book.ttf), url(./fonts/Avenir-Heavy.ttf),
url(./fonts/Avenir.ttc);
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-weight' property is set to 300, but it's unclear if this matches the actual weights available in the 'Avenir-Book.ttf', 'Avenir-Heavy.ttf', and 'Avenir.ttc' files. Verify that the specified weight is supported by these font files.

mateacademy-ai-mentor
mateacademy-ai-mentor approved these changes Oct 24, 2024
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Great job on implementing the search bars and styling! 🎉 While your code meets the basic requirements, there are a few areas for improvement:

  • HTML Structure: Consider adding <label> elements for the input fields to enhance accessibility. Also, ensure that there are empty lines between multiline sibling blocks for better readability.
  • CSS Optimization: There are redundant styles in the hover and focus states for both .big-search__input and .small-search__input. Simplifying these can make your CSS cleaner. Additionally, ensure that background-size and background-position properties have the correct units to avoid rendering issues.
  • Font Loading: Specify the format for each font URL in the @font-face rule to ensure compatibility across browsers.
  • Styling Adjustments: The font-weight for the small search bar should be set to 300, and ensure there's a 20px gap between the search bars.

These adjustments will not only improve your code quality but also enhance user experience. Keep up the good work and continue learning from these insights! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

src/blocks/big-search.css
Comment on lines +25 to +26
background: #fff;
border: 1px solid #e1e7ed;
Copy link

Choose a reason for hiding this comment

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

The hover state for .main__big-search repeats the same background and border styles as the default state. Consider removing these redundant styles to simplify the CSS.

src/blocks/big-search.css
Comment on lines +41 to +44
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 19px;
background-position: 26px 24px;
Copy link

Choose a reason for hiding this comment

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

The focus state for .big-search__input repeats the background image properties that are already defined in the default state. Consider removing these redundant styles to simplify the CSS.

src/blocks/small-search.css
Comment on lines +10 to +11
background-size: 11;
background-position: 13 14;
Copy link

Choose a reason for hiding this comment

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

The background-size and background-position properties are missing units (e.g., 'px'). Ensure that these values have the correct units to avoid potential rendering issues.

src/blocks/small-search.css
Comment on lines +26 to +27
background: #fff;
border: 1px solid #e1e7ed;
Copy link

Choose a reason for hiding this comment

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

The hover state for .small-search__input repeats the same background and border styles as the default state. Consider removing these redundant styles to simplify the CSS.

src/blocks/small-search.css
Comment on lines +41 to +44
background-image: url(../images/Search.svg);
background-repeat: no-repeat;
background-size: 11px;
background-position: 13px 14px;
Copy link

Choose a reason for hiding this comment

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

The focus state for .small-search__input repeats the background image properties that are already defined in the default state. Consider removing these redundant styles to simplify the CSS.

src/index.html
Comment on lines +21 to +24
<form
data-qa="big"
class="main__big-search"
>
Copy link

Choose a reason for hiding this comment

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

Consider adding a <label> element for the input field in the form with class main__big-search. This will improve accessibility by providing a text label for screen readers.

src/index.html
Comment on lines +33 to +36
<form
data-qa="small"
class="main__small-search"
>
Copy link

Choose a reason for hiding this comment

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

Consider adding a <label> element for the input field in the form with class main__small-search. This will improve accessibility by providing a text label for screen readers.

src/style.css
Comment on lines +15 to +16
src: url(./fonts/Avenir-Book.ttf), url(./fonts/Avenir-Heavy.ttf),
url(./fonts/Avenir.ttc);
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 specify the format for each font URL to ensure proper loading across different browsers. Consider adding format descriptors like format('truetype') or format('opentype').

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mateacademy-ai-mentor mateacademy-ai-mentor mateacademy-ai-mentor approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@MichaelK-jpg @mateacademy-ai-mentor