Problem/Motivation

The placeholder text in header search field has font-family of serif - looks like sans-serif would be better.

<input title="Enter the terms you wish to search for." placeholder="Search by keyword or phrase." data-drupal-selector="edit-keys" type="search" id="edit-keys--2" name="keys" value="" size="15" maxlength="128" class="form-search form-element form-element--type-search form-element--api-search">

D 9.1.0, Olivero 9.1.0 (not -dev!), Gin admin theme

Steps to reproduce

Logged in or not, click search icon in header bar and observe font of placeholder text

Proposed resolution

Change font family to sans-serif

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#27 font-narrow-after.png267.94 KBmherchel
#27 font-after.png487.45 KBmherchel
#27 fontbefore.png430.33 KBmherchel
#26 3187908-26-9.4.x.patch2.12 KBcapysara
#25 3187908-25-10.0.x.patch2.13 KBcapysara
#23 After--patch--pic__.png56.01 KBvikashsoni
#23 Before--patch--pic__.png47.95 KBvikashsoni
#18 sans-serif-font-3187908-18.patch2.08 KBgauravvvv
#15 3187908-15.jpg127.54 KBkleiton_rodrigues
#12 Screenshot from 2021-02-19 19-17-52.png401.59 KBMadhu kumar
#10 after-patch.png50.4 KBdjsagar
#10 before-patch.png32.67 KBdjsagar
#10 3187908-10.patch997 bytesdjsagar
#6 After--patch.jpg585.29 KBranjith_kumar_k_u
#6 Before--patch.jpg590.87 KBranjith_kumar_k_u
#5 Before-Patch.png911.93 KBkomalk
#5 After-Patch.png747.79 KBkomalk
#5 3187908-5.patch2.14 KBkomalk

Comments

Jons created an issue. See original summary.

jons’s picture

jons commented

If agreed, need to change .search-wide__wrapper input[type="search"] and .search-narrow__wrapper input[type="search"] in web/core/themes/olivero/css/components/header-search-wide.css & header-search-narrow.css respectively

komalk’s picture

komalk commented
Assigned: Unassigned » komalk

Looking into this.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Version: 9.1.x-dev » 9.2.x-dev
Priority: Normal » Minor
Issue tags: +CSS

Per the designs, the font should be Lora (which is a serif). The CSS is currently font-family: serif;, so it should definitely be updated. Good catch!

komalk’s picture

komalk commented
Assigned: komalk » Unassigned
Status: Active » Needs review
StatusFileSize
new 3187908-5.patch2.14 KB
new After-Patch.png747.79 KB
new Before-Patch.png911.93 KB

Worked on #4.
Attached screenshot for reference.
Review the patch.

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new Before--patch.jpg590.87 KB
new After--patch.jpg585.29 KB

The above patch works as expected .RTBC.

Before patch
before patch

After patch
after patch

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
Status: Needs review » Reviewed & tested by the community
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review 
+++ b/core/themes/olivero/css/components/header-search-narrow.pcss.css
@@ -38,7 +38,7 @@
+    font-family: "Lora", "georgia", serif;

+++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
@@ -52,7 +52,7 @@
+    font-family: "Lora", "georgia", serif;

Where does the "georgia" fallback font come from?

jons’s picture

jons commented

Thanks @mherchel @ komalk, but personally I think sans-serif looks better (as in intial comment). Could the spec be changed if others agree?

djsagar’s picture

djsagar commented
StatusFileSize
new 3187908-10.patch997 bytes
new before-patch.png32.67 KB
new after-patch.png50.4 KB

Hi all,

I Used the default font-family for this please see and share your feedback.

Thanks!

jons’s picture

jons commented

thanks @djsagar - looks good to me

Madhu kumar’s picture

Madhu kumar commented
StatusFileSize
new Screenshot from 2021-02-19 19-17-52.png401.59 KB

Applied 3187908-5.patch working as per the requirement
placeholder

Madhu kumar’s picture

Madhu kumar commented
Status: Needs review » Reviewed & tested by the community
kleiton_rodrigues’s picture

kleiton_rodrigues commented
Assigned: Unassigned » kleiton_rodrigues

work on it!

kleiton_rodrigues’s picture

kleiton_rodrigues commented
Assigned: kleiton_rodrigues » Unassigned
StatusFileSize
new 3187908-15.jpg127.54 KB

@Madhu - looks good to me
+1 RTBC

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work

The patch is failing on the CI because the CSS files are not built correctly. See https://www.drupal.org/node/3084859 for instructions on how to build the CSS files from PostCSS.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

We should also discuss #9.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new sans-serif-font-3187908-18.patch2.08 KB

I have changed the font-family to sans-serif as suggested in #9. I have provided the patch, please review it.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

We are not going to change the font in the design without designer approval.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Issue tags: -CSS +Needs design review, +Needs design
vikashsoni’s picture

vikashsoni commented
StatusFileSize
new Before--patch--pic__.png47.95 KB
new After--patch--pic__.png56.01 KB

Applied patch in drupal-9.3.x-dev Successfully applied
@Gauravmahlawat Thanks for the patch
for ref sharing screenshot ....

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

capysara’s picture

capysara commented
Version: 9.4.x-dev » 10.0.x-dev
Status: Needs work » Needs review
StatusFileSize
new 3187908-25-10.0.x.patch2.13 KB

Attached is a patch for 10.0.x that uses the css variable for the font.

capysara’s picture

capysara commented
StatusFileSize
new 3187908-26-9.4.x.patch2.12 KB

And here is the 9.4.x patch

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs design review, -Needs design
StatusFileSize
new fontbefore.png430.33 KB
new font-after.png487.45 KB
new font-narrow-after.png267.94 KB

#25 and #26 look perfect. I worked with @capysara on this at the code sprint at Florida DrupalCamp.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Version: 10.0.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed d3cbad7 and pushed to 10.0.x. Thanks!
Committed and pushed ff07146556 to 9.4.x. Thanks!

  • alexpott committed d3cbad7 on 10.0.x 
    Issue #3187908 by capysara, komalk, djsagar, Gauravmahlawat, mherchel,...

  • alexpott committed ff07146 on 9.4.x 
    Issue #3187908 by capysara, komalk, djsagar, Gauravmahlawat, mherchel,...
volkswagenchick’s picture

volkswagenchick
she/her
Primary language English
Location San Francisco Bay Area
commented
Issue tags: +FLDC2022

Adding the FLDC2022 tag so we can track issues we worked on during Florida DrupalCamp contrib day, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.