Rails conditional CSS in view helper

Question

I have a simple rails app and I'm trying to write a view helper that does the following.

Compares two values. If the current_month amount is greater than the forecast amount then make the text green. If the current_month amount is less than the forecast amount then make the text red.

I wrote out this simple helper to append text to the output of the the rails method, but I'm unsure of how to inject CSS/styling into this.

def target_hit(forecast, current)
  (if current.amount > forecast.amount
    number_to_currency(current.amount.to_s) + " Yay"
  elsif current.amount < forecast.amount
    number_to_currency(current.amount.to_s) + " No dice"
  end).html_safe
end

I'm pretty proficient on the backend but when it comes to front-end stuff I'm stumbling a lot. Any help would be greatly appreciated.

example view code

<p class='total'>Current: <%= target_hit(@forecast, @current) %></p>

You can call a helper method from a class. Or in your target_hit method you could use content_tag to define the class. I'd need to see your view to provide an example. — margo
– margo, Commented Aug 14, 2015 at 22:57
@margo I provided a excerpt of my view on how I would call the method. — nulltek
– nulltek, Commented Aug 15, 2015 at 2:55

margo · Accepted Answer · 2015-08-15 15:26:27Z

1

The rails helper content_tag http://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag, is useful and means you don't have to use html_safe. I try to move all the logic from the views to helpers to make the view easy to read e.g.

def target_hit(current_amt, forecast_amt)
  content_tag(:p, "#{number_to_currency(current_amt.to_s)} target_content(current_amt, forecast_amt)", class: "total #{target_class(current_amt, forecast_amt)}")
end

def target_content(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "Yay" : "No dice"
end

def target_class(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "green" : "red"
end

def forecast_reached?(current_amt, forecast_amt)
  current_amt >= forecast_amt
end

in the view, you just call the helper method

<%= target_hit(@current.amount, @forecast.amount) %>

answered Aug 15, 2015 at 15:26

margo

2,9371 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nulltek Over a year ago

This is much simpler than what I had came up with on my own. I really like this answer. Will upvote as soon as possible :)

Collectives™ on Stack Overflow

Rails conditional CSS in view helper

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related