Rendering Partials with Slim

Question

Current Slim.html:

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  =render partial: 'section_four'
  =render partial: 'section_five'

The issue I'm having is that I don't want to render partial: 'section_four' is this is being viewed on mobile.

I tried this:

#fullpage
  =render partial: 'section_one'
  =render partial: 'section_two'
  =render partial: 'section_three'
  - if $(window).width() >= 700
    =render partial: 'section_four'
  =render partial: 'section_five'

But it doesn't work. Any ideas?

Answer 1

Try to use request.user_agent to recognize mobile device. Also you should use inline if condition while checking for mobile device:

= render partial: 'section_four' if request.user_agent =~ /Mobile|webOS/

There can be some cases where request.user_agent =~ /Mobile|webOS/ will fail to return expected results due to browser's custom user_agent.

So, I recommend Mobile-Fu to work with it in better way.

Answer 2

$(window).width() >= 700 is a javascript code and you can't do it like this. Apart from using request.user_agent you can use css media-queries to selectively show or hide content inside your partial. Lets suppose your partial section_four has content like this:

#some_id
  .your_content

now you can target #some_id by css and show or hide it according to your device width

@media all and (max-width: 699px) {
  #some_id {
    display: none;
  }
}

For details check css media queries