user3007294
user3007294

Reputation: 951

Rendering Partials with Slim

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?

Upvotes: 3

Views: 4830

Answers (2)

Mandeep
Mandeep

Reputation: 9173

$(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

Upvotes: 1

RAJ
RAJ

Reputation: 9747

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.

Upvotes: 5

Related Questions