Skip to content

refactor(feedback): replace jSimple Star Rating with progressive Font Awesome stars - #2812

Draft
mroderick wants to merge 1 commit into
masterfrom
feature/replace-jsimple-star-rating
Draft

refactor(feedback): replace jSimple Star Rating with progressive Font Awesome stars#2812
mroderick wants to merge 1 commit into
masterfrom
feature/replace-jsimple-star-rating

Conversation

@mroderick

@mroderick mroderick commented Aug 25, 2026

Copy link
Copy Markdown
Collaborator

What

Removes the abandoned jSimple Star Rating jQuery plugin and replaces it with a small vanilla-JS initializer that progressively enhances radio buttons into CSS-generated Unicode stars.

Why

jSimple Star Rating is unmaintained and was the only consumer of a hand-vendored, unversioned minified file. The new implementation is dependency-free, accessible, and works without JavaScript.

Font Awesome was not used for the stars because the project loads Font Awesome 5 with SVG+JS, which replaces <i> elements at runtime. Toggling far/fas classes on those tags after replacement has no visual effect, so the stars are rendered via CSS ::before content instead.

Changes

  • Add app/assets/javascripts/feedback-rating.js (vanilla JS initializer)
  • Replace f.hidden_field :rating with radio buttons in app/views/feedback/show.html.haml
  • Update app/assets/stylesheets/partials/_star-rating.scss to use CSS ::before star glyphs
  • Delete app/assets/javascripts/jsimple-star-rating.min.js
  • Delete app/assets/images/star-rating.gif
  • Update spec/features/member_feedback_spec.rb to click the star label and assert the persisted rating
  • Remove the inline :javascript block from the feedback view
  • Include the updated implementation plan under docs/plans/

Automated verification

  • bundle exec rubocop spec/features/member_feedback_spec.rb — clean
  • bundle exec haml-lint app/views/feedback/show.html.haml — clean
  • bundle exec rails runner 'puts "boot OK"' — boots
  • bundle exec rspec spec/controllers/feedback_controller_spec.rb spec/models/feedback_spec.rb — 11 examples, 0 failures
  • bundle exec rspec spec/features/member_feedback_spec.rb — 9 examples, 0 failures
  • RAILS_ENV=test bundle exec rails assets:precompile — succeeds
  • Browser snapshot: clicking the 4th star fills stars 1–4

Manual verification

  1. Start the server:

    bundle exec rails server
  2. In another terminal, open a Rails console and create a feedback request:

    member = Member.first
    workshop = Workshop.first
    coach = Member.where.not(id: member.id).first
    
    WorkshopInvitation.find_or_create_by!(workshop: workshop, member: coach, role: 'Coach') do |invitation|
      invitation.attending = true
      invitation.attended = true
    end
    
    Tutorial.first || Tutorial.create!(title: 'Test tutorial', url: 'http://example.com')
    
    fr = FeedbackRequest.create_with(submited: false).find_or_create_by!(member: member, workshop: workshop)
    puts "http://localhost:3000/feedback/#{fr.token}"
  3. Open the printed URL in a browser.

  4. Click stars — they should fill; click the same star again to clear; hover previews.

  5. Select a coach and tutorial, then submit. You should be redirected to the homepage with "Thank you for your feedback".

  6. Check that the rating was persisted:

    Feedback.find_by(workshop: workshop, coach: coach, tutorial: Tutorial.first).rating
  7. To test progressive enhancement, disable JavaScript in devtools and reload: the radio buttons should still let you pick a rating and submit.

@mroderick
mroderick force-pushed the feature/replace-jsimple-star-rating branch 2 times, most recently from 041e61d to 1a4a5ba Compare August 26, 2026 06:25
…stars

Remove the abandoned jSimple Star Rating jQuery plugin and replace it
with a small vanilla-JS initializer that progressively enhances radio
buttons into CSS-generated Unicode stars.

Why not Font Awesome: the project loads Font Awesome 5 with SVG+JS,
which replaces <i> elements at runtime. Toggling far/fas classes on
those <i> tags after replacement has no effect, so the widget is now
rendered via CSS ::before content instead.

Changes:
- Add app/assets/javascripts/feedback-rating.js
- Render radio buttons in feedback/show.html.haml instead of hidden input
- Update _star-rating.scss to use CSS ::before star glyphs
- Delete jsimple-star-rating.min.js and star-rating.gif
- Update member_feedback feature spec to select a star and assert the persisted rating
- Remove inline :javascript block

Verification:
- rubocop clean
- haml-lint clean
- rails runner boots
- controller/model specs: 11 examples, 0 failures
- feature spec: 9 examples, 0 failures
- assets:precompile succeeds
- browser snapshot: clicking star 4 fills stars 1-4
@mroderick
mroderick force-pushed the feature/replace-jsimple-star-rating branch from 1a4a5ba to baa3224 Compare August 26, 2026 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant