[Bug 37412] New: Style placeholder text in the OPAC
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Bug ID: 37412 Summary: Style placeholder text in the OPAC Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: ASSIGNED Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: oleonard@myacpl.org QA Contact: testopia@bugs.koha-community.org Depends on: 36651 Created attachment 169222 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169222&action=edit 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. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=36651 [Bug 36651] Add placeholder text to the search bar in the OPAC -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff Patch complexity|--- |Trivial patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 169224 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169224&action=edit 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...) 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169224|0 |1 is obsolete| | --- Comment #2 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169231 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169231&action=edit 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...) 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Patch doesn't apply --- Comment #3 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Not trusting myself with these files - could you please rebase? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169231|0 |1 is obsolete| | --- Comment #4 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 170995 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170995&action=edit 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...) 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170995|0 |1 is obsolete| | --- Comment #5 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 172481 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=172481&action=edit 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...) 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |paul.derscheid@lmscloud.de --- Comment #6 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Just a question, the intention here was to apply this styling to every ::placeholder, right? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #7 from Paul Derscheid <paul.derscheid@lmscloud.de> --- So also for the search input in tables for example. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |fridolin.somers@biblibre.co | |m --- Comment #8 from Fridolin Somers <fridolin.somers@biblibre.com> --- Great. Maybe add left align in rigth-to-left CSS (I cant find were it is in OPAC) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Pedro Amorim <pedro.amorim@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |pedro.amorim@ptfs-europe.co | |m --- Comment #9 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #10 from Lucas Gass <lucas@bywatersolutions.com> --- (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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #11 from Owen Leonard <oleonard@myacpl.org> --- (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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |me@paulderscheid.xyz |y.org | CC| |martin.renvoize@ptfs-europe | |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #12 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- I agree the right-align is a bit uncommon, but let's go with that and gather some feedback maybe. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |24.11.00 released in| | Status|Passed QA |Pushed to main -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #13 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 24.11! Well done everyone, thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Martin Renvoize (ashimema) <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |release-notes-needed -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Resolution|--- |FIXED Status|Pushed to main |RESOLVED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Text to go in the| |This enhancement adds a release notes| |custom style to the | |placeholder text shown in | |the OPAC's main search bar | |when it is empty. | |Previously the placeholder | |text color was very close | |to the color of | |user-entered text, making | |it difficult to distinguish | |the state of the form. | |Rather than adjusting the | |color of the placeholder | |text in a way that makes | |the contrast unacceptable, | |this changes the text to | |right-aligned italic text. Keywords|release-notes-needed | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37412 --- Comment #14 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- For anyone wanting this placeholder text to be left-aligned, you can add this to OPACUserCSS: #translControl1::placeholder { text-align: left; } -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org