Created attachment 169222 [details] Screenshot showing re-styling of placeholder text In order to make the OPAC search bar's placeholder text easily distinguishable from regular text we should style it differently. To avoid using a lighter and thus less readable text color I propose to make the placeholder italic and right-aligned.
Created attachment 169224 [details] [review] Bug 37412: Style placeholder text in the OPAC This patch adds a custom style to input placeholder text so that it is visibly different from the style of text entered in the input. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) Go to the OPAC and check the appearance of the placeholder text in the main search bar. Sign off if the vibes are right. Sponsored-by: Athens County Public Libraries
Created attachment 169231 [details] [review] Bug 37412: Style placeholder text in the OPAC This patch adds a custom style to input placeholder text so that it is visibly different from the style of text entered in the input. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) Go to the OPAC and check the appearance of the placeholder text in the main search bar. Sign off if the vibes are right. Sponsored-by: Athens County Public Libraries Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Not trusting myself with these files - could you please rebase?
Created attachment 170995 [details] [review] Bug 37412: Style placeholder text in the OPAC This patch adds a custom style to input placeholder text so that it is visibly different from the style of text entered in the input. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) Go to the OPAC and check the appearance of the placeholder text in the main search bar. Sign off if the vibes are right. Sponsored-by: Athens County Public Libraries Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Created attachment 172481 [details] [review] Bug 37412: Style placeholder text in the OPAC This patch adds a custom style to input placeholder text so that it is visibly different from the style of text entered in the input. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) Go to the OPAC and check the appearance of the placeholder text in the main search bar. Sign off if the vibes are right. Sponsored-by: Athens County Public Libraries Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Just a question, the intention here was to apply this styling to every ::placeholder, right?
So also for the search input in tables for example.
Great. Maybe add left align in rigth-to-left CSS (I cant find were it is in OPAC)
Providing my opinion here. I think the italic makes sense, but is text-align: right here necessary? It looks quite different. I don't have scientific evidence to support my claims but I don't think it's often the case that search input placeholders are aligned to the right in web interfaces.
(In reply to Pedro Amorim from comment #9) > Providing my opinion here. I think the italic makes sense, but is > text-align: right here necessary? It looks quite different. > I don't have scientific evidence to support my claims but I don't think it's > often the case that search input placeholders are aligned to the right in > web interfaces. I think this is only a matter of preference and can easily be adjusted with CSS if your prefer left vs right.
(In reply to Pedro Amorim from comment #9) > Providing my opinion here. I think the italic makes sense, but is > text-align: right here necessary? It looks quite different. > I don't have scientific evidence to support my claims but I don't think it's > often the case that search input placeholders are aligned to the right in > web interfaces. I agree that it isn't typical. My goal was to achieve two things: 1. Style the placeholder with enough color contrast to comply with accessibility guidelines. 2. Style the placeholder in such a way that it doesn't look like actual text in the text field.
I agree the right-align is a bit uncommon, but let's go with that and gather some feedback maybe.
Pushed for 24.11! Well done everyone, thank you!