suttacentral
Redesign SERP and instant search input box to match latest Material Design
Description:
I noticed that although the site uses Material Design standards, the search input on the SERP as well as instant search doesn't match.
Here is the current SERP:
How about if we do something like this instead:
In theory, someone is only going to be able to get to this page if they have already entered a search term so I don't feel like there is any need for help text when the field is blank. But if needed, it could be something like:
This design assumes we have added a search icon/button at the end of the field. This relates to https://github.com/suttacentral/suttacentral/issues/2954, but I will create a new issue to deal with adding a button.
It also assumes that proper accessibility labels will be added for screen readers.
Here is a mockup for the instant search:
Notice that I have shortened the bar so that the search icon at the end of the field is not so far away. If we are limiting the search terms to 100 characters there is no point in the long bar. Also, it brings the search icon button into view. All the search bars I see now are long but not so extremely long as our instant search.
@ihongda Do you want this to be done by using the actual md component, or should we just be styling it to look like md?
OK, I have figured out that this is MD2 and it is just a text input box, md-filled-text-field.
The documentation is here: https://m2.material.io/components/text-fields#outlined-text-field
It appears that md2 does not have a dedicated search component. And that the mockup I did in the OP here looks much more like md3. I'm not even sure if an md2 text field can be styled to look like an md3.
We are currently using web components of md 3.
https://github.com/material-components/material-web
We are currently using web components of md 3.
But in packages.json under dependencies, we have
"@material/web": "1.3.0",
Which is md 2.
This is my confusion.
Assuming we are using md3, would you like this solved by using the md3 search component or do you just want to style the existing text input component?
Again, just re-upping this to see if it is still relevant. Quite happy to support proposed changes.
As a general point, we should have moved totally over to M3 and any remaining dependencies to earlier versions are residual and should be purged.
I apologize. I wasn't able to figure out all the overhead involved with implementing this. If someone is able to do this I would love to see it happen.
In the back of my mind, I've been kind of keeping tabs on all the amazing progress in search, and just enjoying seeing all these complex issues being discussed and resolved. At the same time, it seems to me that there are many small issues in the styling that could be tweaked for niceness. But I am kind of thinking, maybe wait until the feature development is mostly complete, then pretty it up a little bit.
What do you think: would now be the time for that? Or do you think there are still major feature changes in the pipeline?
What do you think: would now be the time for that? Or do you think there are still major feature changes in the pipeline?
I'd like to hear from @khemarato about his thoughts on this.
The most pressing search issue I see is the literal vs. non-literal search, https://github.com/suttacentral/suttacentral/issues/2981. I think it's a major problem that makes search behave in a way contrary to how most people expect, making it so that no results are given when there really should be.
For that, there is nothing in the interface that will change. I think that most of the work to be done relates to things under the hood, so tidying up the front end could be done without much fear that pending work will render it obsolete.
But if you are asking if dev resources are still needed on behind the scene's stuff, then I would say absolutely. From my perspective 1) I haven't really felt confident to push/lead on this and 2) my understanding was that dev resources needed to be dedicated to Bilara at the moment, so I kind of backed off.
Thanks, and yes, we do want to prioritize Bilara for now. Good news is, we are making headway, and we have an initial implementation of the final major new feature, notifications.
Never mind, let's leave the styling for now, I won't be able to do much work for the next six months anyway. I'm trying to clean off stuff while I can, but then I'll be travelling until basically March.
FYI, I just noticed that the M3 project has been dropped by Google, so I'll make an issue on that.