CSS Conditional statements in Ruby

Question

I need to change the color of my div button when the the user is logged in.

enter image description here

Once the user is logged in i want him seeing the "Download button" in red, like the "play now" button in the img.

This is the code now:

      #play_buttons
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"

.button is the class for the button "Download now" on the left and :id => "ho_roulette" gives the style for the "Play now" button on the right.

Ok this is my solution to achieve the Download now button style like the Play Now button when the user is logged in:

       #play_buttons
     - if logged_in 
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now" :id => "ho_roulette"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"
    - else 
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"

Basically i have used conditional statements adding :id => "ho_roulette" to my div button when the user is logged in.

Is this solution correct? i thought also i can use the status class active as other solution, but i did not want to touch my SASS file.

= "#{t()}" is the bad form for: = t()

apneadiving
– apneadiving

2013-02-24 19:02:20 +00:00
Commented Feb 24, 2013 at 19:02 — apneadiving
– apneadiving, Commented Feb 24, 2013 at 19:02

apneadiving · Accepted Answer · 2013-02-24 19:29:13Z

3

There are two things I would revise about your solution:

HTML id tags should be unique, so you shouldn't have two different elements with the same ID. You definitely want to use class instead.

You're repeating a whole lot of code here. It would be much better to use the conditional inside of your tag, and take advantage of the fact that HAML ignores keys with nil values:

play_buttons
  #instant_play.play_button
  %p
    = t :"asiaplus.download_client"
  .button
    = t :"asianplus.download_now", :class => ("active" if logged_in)
  #play_now.play_button
  %p
    %span.highlight
      = t :"asiaplus.web_based"
    = t :"asiaplus.live_dealer"
  = link_to t("asiaplus.play_now"), live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => ["button", ("active" if logged_in)], :title => t('asiaplus.play_now'), :id => "ho_roulette"}

edited Feb 24, 2013 at 19:29

apneadiving

116k26 gold badges225 silver badges215 bronze badges

answered Feb 24, 2013 at 19:17

charleyc

1,70912 silver badges10 bronze badges

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

3 Comments

mathieugagne Over a year ago

Even though I agree 100% with you, he said he didn't want to touch his css file.

Koala7 Over a year ago

i have not understoood why you repeat :id => "ho_roulette" at the end if you have already add :class => ["button", ("active" if logged_in)]

charleyc Over a year ago

I added that because I'm assuming that he's using that id tag as an actual id for an element (e.g. for more styling or to trigger some Javascript). If it's only being used for this particular styling effect then it can go away.

mathieugagne · Accepted Answer · 2013-02-25 02:59:10Z

2

Your solution is good. Conditional CSS is the easiest solution. You should dry it up though. Instead of having the whole thing in the if/else statement, simply do it for your id:

  #instant_play.play_button
    %p
      = t(:"asiaplus.download_client")
    .button
      = t(:"asianplus.download_now"), :id => ('ho_roulette' if logged_in)
  #play_now.play_button
    %p
      %span.highlight
        = t(:"asiaplus.web_based")
      = t(:"asiaplus.live_dealer")
    %a{:href => live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => "button", :title => t(:'asiaplus.play_now'), :id => "ho_roulette"}
      = t(:"asiaplus.play_now")

To consider:

You should follow @apneadiving's advice to reformat your t().
@charleyc is 100% right with regards to having id unique. Consider using his solution and changing your SASS file... and your approach to your use of id tags to define CSS rules. States (like 'active' or 'ho_roulette') should always be CSS classes.

edited Feb 25, 2013 at 2:59

answered Feb 24, 2013 at 19:13

mathieugagne

2,4951 gold badge19 silver badges18 bronze badges

2 Comments

Koala7 Over a year ago

What is best to use inside the bracket : "" or ''? you have used '' but @charleyc use "" For example class => ('active', if logged_in) or class => ("active" if logged_in)

mathieugagne Over a year ago

It is entirely up to you. I prefer to use single quotes everywhere I can and only use double when doing string interpolation. In most cases, it doesn't matter.

Collectives™ on Stack Overflow

CSS Conditional statements in Ruby

2 Answers 2

3 Comments

To consider:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

To consider:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related