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.

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

UI improvement of search box during transition on scrolling #205

Closed
avinashbharti97 opened this issue Mar 12, 2018 · 13 comments
Closed

UI improvement of search box during transition on scrolling #205

avinashbharti97 opened this issue Mar 12, 2018 · 13 comments

Comments

@avinashbharti97
Copy link
Contributor

As now on scrolling the page navigation-bar content size changes relatively from large to small but the search box remains same

search3

i think it will look better if the size of seach box also changes relatively something like this

search2

@kanishkarj
Copy link
Contributor

Hey Id like to work on this

@quozl
Copy link
Contributor

quozl commented Mar 13, 2018

@avinashbharti97. I don't think it would look better. Can you explain why you think it would look better?

@kanishkarj. Please don't. Wait for consensus. Working on issues without consensus would waste your time, and there are plenty of other things to do.

kanishkarj added a commit to kanishkarj/www-sugarlabs that referenced this issue Mar 13, 2018
Fluid resizing of search bar on scrolling.

Fixes sugarlabs#205

Reported-by:@avinashbharti97
@kanishkarj
Copy link
Contributor

Okay, sorry..

@avinashbharti97
Copy link
Contributor Author

@quozl
If every element of a container have nearly equal padding then it will look good.

after-search

But as now padding for sugarlabs logo changes but not for search bar.

before-serach

Also after the scroll search box element starts touching the outer nav container but for element differentiation there should be some padding between parent container and child element.

@quozl
Copy link
Contributor

quozl commented Mar 14, 2018

Good, thanks. I'll wait for others to assent.

@AnshulMalik
Copy link

I agree with @avinashbharti97 :)

@VatsalBatra
Copy link

i would like to work on this one, also i think instead of just decreasing the size of the search bar, changing the radius of the search bar in sync with transition of navbar would look better

from
screen shot 2018-03-25 at 4 54 48 am

to

screen shot 2018-03-25 at 4 47 34 am

@quozl
Copy link
Contributor

quozl commented Mar 26, 2018

Thanks. However, I'm looking for input from Sugar Labs members; on whether it will look better. This is a subjective issue.

@perriefidelis
Copy link
Member

perriefidelis commented Oct 24, 2018

@avinashbharti97 great idea! but if it becomes too small it wouldn't look too good. If it's possible to make the search bar as responsive(Just reduce the size on scrolling) as the other element on the nav bar, than that solves the problem better. @VatsalBatra changing the radius if the search bar will distort the uniformity of the site as other elements are in full rectangles.

@lakshya-dhariwal
Copy link

Now that the search bar is being mentioned I have noticed that the search icon looks unproportional to the search bar maybe we can also resize it according to the search bar's size

@quozl
Copy link
Contributor

quozl commented Jan 5, 2022

Probably best to look at this after upgrading to latest Bootstrap. #316

@nikkuAg
Copy link
Contributor

nikkuAg commented Jan 22, 2022

Hey,
Are you still planning to update the design of serach bar or in navbar, as I am willing to contribute.

@chimosky
Copy link
Member

Hey, Are you still planning to update the design of serach bar or in navbar, as I am willing to contribute.

Hi @nikkuAg, yes and you open a PR if you have a fix.

@quozl quozl closed this as not planned Won't fix, can't repro, duplicate, stale Feb 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants