[WIP]change in Search bar on focus

[raashika03]

Checklist

• I indicated which issue (if any) is closed with this PR using closing keywords
• I only changed lines related to my PR (no bulk reformating)
• I indicated the source and check the license if I re-use code, or I did not re-use code
• I made my best to solve only one issue in this PR, or explain why multi had to be solved at once.

Issue

resolve #102 was working for this issue but then found few more improvements which could've been done, so covered all those in this PR. Later on, I can remove them if not needed.

Details

Four changes in this PR:

1. Changed the position of search-icon from right to left, as when search icon is on the right side it gives a wrong impression to the user that it's clickable.
2. Activated the cancel button which is there in browser like chrome, IE but has been disabled because of bootstrap import.
   There's no cancel button in mozilla-firefox by default. It can be included dynamically. Didn't cover for mozilla yet, didn't feel the requirement. For others I thought if it's there by default then it should be active.
3. provided a transition effect to the search bar, so that it can acquire less space on the header when not in use. And expanded it more for focused state for full desktop size(which is used mostly) for better visualisation.
4. Changed the position of Dark-theme button.
   Almost all of these changes are related to each other and smaller, so covered them in the same PR.

Search-bar.mp4

@bryan-brancotte @matuskalas @hmenager please review!

[bryan-brancotte]

Hi,
You kind of try to fix two issue in one PR: #102 as stated, but also the location of the theme button (I now created an issue for it: #159). Please do one PR per issue/functionality

[raashika03]

Done @bryan-brancotte
Now could you review for search bar only.
sorry for the inconvenience, I thought these are interconnected a bit so covered them in the same PR.
Sorry again. :(

[bryan-brancotte]

Hi,

I havn't understood why such refactoring, what we have for now is fine isn't it ? Adding such expanding effect might look nice to some people, but other don't (:raising_hand_man:). In addition with such effect there is always a risk of unexpected side effect, and a long time used at fixing it. Here is one of the current side effect.

So, In a new PR, changing type="text" to type="search" yes, it is sound, but the rest I vote no, sorry.

[raashika03]

1. Changed the position of search-icon from right to left, as when search icon is on the right side it gives a wrong impression to the user that it's clickable.
2. Activated the cancel button which is there in browser like chrome, IE but has been disabled because of bootstrap import.
   There's no cancel button in mozilla-firefox by default. It can be included dynamically. Didn't cover for mozilla yet, didn't feel the requirement. For others I thought if it's there by default then it should be active.

So, I can go with these changes right? @bryan-brancotte in other PR

but the rest I vote no, sorry.

HAHA still thank you. May be you're right cause that transition is quite frequent which might not look good. I thought to increase the search bar size for better focus on the autocomplete, But your point is valid, I agree.
PS- that transition effect became so fast because of removal of theme button 😅

[raashika03]

I'll see some other elegant approach for #102 to restrict the change in visual window. thank you :)

[bryan-brancotte]

I would rather not use it as https://developer.mozilla.org/fr/docs/Web/CSS/::-webkit-search-cancel-button and also we have to move the glass, I rather stay with standard web stuf when we can.

[raashika03]

Ok then we can set that cancel button dynamically only, because bootstrap doesn't renders that to be displayed by default. But I guess cancel button is not so useful so, I should leave this.
I looked for many approaches then still bootstrap hasn't fixed it. So should I leave this or create dynamically using JS.

[raashika03]

See this discussion bootstrap hides it purposely.

[bryan-brancotte]

Indeed I wasn't aware of that. So if even Bootstrap says we should not have cancel button, we should not have it.

As a conclusion no css changes, not html changes ? Just close this PR ?

[bryan-brancotte]

Indeed I wasn't aware of that. So if even Bootstrap says we should not have cancel button, we should not have it.

As a conclusion no css changes, not html changes ? Just close this PR ?

[raashika03]

Changed the position of search-icon from right to left, as when search icon is on the right side it gives a wrong impression to the user that it's clickable.

? If you think this is logical. else I'll close my self :)
style="font-family: FontAwesome, Arial;"

placeholder=" Search for concepts here, enter at least two letters"

[bryan-brancotte]

(...) when search icon is on the right side it gives a wrong impression to the user that it's clickable.

I agree with you, but at the moment user enters a second letter the autocomplete is triggered and user knows that search have already been done

[raashika03]

Oki then I'm closing it, thank you for the discussion :) @bryan-brancotte