In 2.x version of this module the overall score indicator does not show the different colors for good, bad and okay as would be expected. Instead the indicator always stays grey regardless of current overall score. although the label of the overall status is fine and shows the current overall score.

See this screenshot for reference:
Overall Score Indication

This is resulting from taking the overall status label as is for the css class that is used for coloring the indicator. I would propose to use clean_class on this. In addition there is also a difference between the label "Okay" and the css class "ok" (maybe this is something that is originating from the 1.x version), I would propose to adjust this too.

I will provide a patch for this.

CommentFileSizeAuthor
#4 3075756_patched.png86.81 KBbramdriesen
#3 overall_score_indicator_does_not_show_color-3075756-003.patch2.04 KBEnnoKirchhoff
#2 overall_score_indicator_does_not_show_color-3075756-002.patch1.37 KBstefan.korn
overall_score_indicator.jpg17.36 KBstefan.korn

Comments

stefan.korn created an issue. See original summary.

stefan.korn’s picture

stefan.korn
Primary language German
Location Jossgrund
commented
Assigned: stefan.korn » Unassigned
Status: Active » Needs review
StatusFileSize
new overall_score_indicator_does_not_show_color-3075756-002.patch1.37 KB
EnnoKirchhoff’s picture

EnnoKirchhoff commented
StatusFileSize
new overall_score_indicator_does_not_show_color-3075756-003.patch2.04 KB

We have tested with version 8.x-2.x-alpha8 and updated the patch with a minor bugfix in JS which adds the class of the score indication while saving the seo form.

--- a/js/yoast_seo.js
+++ b/js/yoast_seo.js
@@ -292,6 +292,8 @@
       rating = ( score / 10 );
     }

document.getElementById(this.config.targets.overall_score).className= "overallScore";
document.getElementById(this.config.targets.overall_score).classList.add(this.scoreToRating(rating).toLowerCase()); document.getElementById(this.config.targets.overall_score).getElementsByClassName('score_value')[0].innerHTML = this.scoreToRating(rating); document.querySelector('[data-drupal-selector="' + this.config.fields.seo_status + '"]').setAttribute('value', rating); };
bramdriesen’s picture

bramdriesen
he/him
Primary language Dutch
Location Belgium 🇧🇪🇪🇺
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3075756_patched.png86.81 KB

Tested this on the alpha9 release and confirm that the patch fixed the issue.

Linked my duplicate issue as well and attached a screenshot showing the patch does what it promises.

kingdutch’s picture

kingdutch
he/him
Primary language English
commented
Status: Reviewed & tested by the community » Fixed

Edit: copy pasted the wrong field while refreshing.

Patch in #3 did not apply for me but I realise the intention is to fix #3075784: Overall score indicator is not updated during on Page refresh of analysis.

I added a bit more JavaScript to fix the issue but make sure we don't blow away all the classes that are set in the Twig template. We can use the current label from the innerHTML to get the current score class and replace it properly :)

Thanks!

Status: Fixed » Closed (fixed)

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