Fix search-icon when typing

[Subhajit009iitr]

This PR fixes the Search-icon disappearance issue when typing something in the search bar. Earlier the magnifying glass symbol was kept within the placeholder of the input form, so whenever something was typed the Search-icon would disappear too along with the placeholder comments Search this site. I have fixed that in this PR and now the magnifying glass Search-icon stays in place at the left-most side of the search bar.
This is in the context of the issue #44416.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: Subhajit009iitr / name: Subhajit Biswas (bee507b, 07d0c15, b955608, 3f3bda2, 38fee27)

[k8s-ci-robot]

Welcome @Subhajit009iitr!

It looks like this is your first PR to kubernetes/website 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/website has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	38fee27
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/658c3e00ad32ea0008669866
😎 Deploy Preview	https://deploy-preview-44527--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Gauravpadam]

/area web-development

[Gauravpadam]

Thanks @Subhajit009iitr

I've seen the approach and I have a few suggestions to make:

• Try to use an fa search (fontawesome search) icon instead of a background png; CSS would then change accordingly
• The internal CSS is OK; Even better if you can accomodate it into assets/custom.scss

[Subhajit009iitr]

Thanks @Subhajit009iitr

I've seen the approach and I have a few suggestions to make:

• Try to use an fa search (fontawesome search) icon instead of a background png; CSS would then change accordingly
• The internal CSS is OK; Even better if you can accomodate it into assets/custom.scss

OK I will make the changes today.

[Subhajit009iitr]

@Gauravpadam I have updated the code using the fa search icon
The code still has internal CSS which won't cause any functionality problems for now, If you allow I would like to work on it by opening another issue, to isolate the CSS part as it may require changing other files.

[sftim]

Why add this element?

[Subhajit009iitr]

It was initially there in the code, I thought it may have some CSS properties attached to it

[Gauravpadam]

Thanks

Please see my inline feedback for some further improvements on the approach

[Subhajit009iitr]

@Gauravpadam I updated all the changes as per your latest feedback. Please review it once

[Gauravpadam]

Thanks, I'll be happy to lgtm if either:

• As per your suggestion in #44527(comment), You make the css external in a new PR and keep this only for html changes
• You add a new commit migrating the internal css to /assets/custom.scss, i.e. our external css assets

[Subhajit009iitr]

Thanks, I'll be happy to lgtm if either:

• As per your suggestion in #44527(comment), You make the css external in a new PR and keep this only for html changes
• You add a new commit migrating the internal css to /assets/custom.scss, i.e. our external css assets

I have moved the CSS component to /assets/_custom.scss as you instructed.

[Gauravpadam]

/lgtm

Thanks for the PR @Subhajit009iitr!

[k8s-ci-robot]

LGTM label has been added.

Git tree hash: 2de852f72799d384d946081b1f9baff637c00f7b

[Gauravpadam]

Some more web development issues that could be worked on - only if you'd want to.

[Subhajit009iitr]

Some more web development issues that could be worked on - only if you'd want to.

Ya I would Love to! I will look into them. Thanks

[divya-mohan0209]

Hello @Subhajit009iitr : Please could you add an appropriate description of the changes you've made in this PR and why you think these changes are necessary? This would help approvers understand your POV.

Explicit hold on the PR till the description is added.
/hold

[Subhajit009iitr]

Hello @Subhajit009iitr : Please could you add an appropriate description of the changes you've made in this PR and why you think these changes are necessary? This would help approvers understand your POV.

Explicit hold on the PR till the description is added. /hold

I have updated the description as instructed here
#44527 (comment)

[Subhajit009iitr]

@divya-mohan0209 Is the description fine?

[divya-mohan0209]

Thank you @Subhajit009iitr for getting to this so promptly!
/unhold
/approve

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: divya-mohan0209

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [divya-mohan0209]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment