How to render to different DOM structures in Rails based on view port

Hi,

I have a webpage that I want to render two different designs on based on if you are on a mobile device or laptop. I can easily use CSS to display or hide the classes but my main problem is that I have some datatables I am adding to the DOM but I need to target by ID. Here is what i have in my application.html.slim file

 body
    .ui.tab_desktop
      #left-column
        = render partial: 'layouts/sidebar'
      #right-column
        = render partial: 'layouts/header'
        = render 'layouts/flash'
        div id="context-#{controller_name}"
          = yield
        = render partial: 'layouts/footer'
    .ui.mobile
      = render partial: 'layouts/mobile_header'
      = render partial: 'layouts/mobile_sidebar'
      = render 'layouts/flash'
      div id="context-#{controller_name}"
        = yield
      = render partial: 'layouts/mobile_footer'

Since we know that ID is supposed to be unique, the tables will only show on the desktop. Is there are better way to only render this part below once for both the mobile and desktop view?

div id="context-#{controller_name}"
        = yield

Blog

How to render to different DOM structures in Rails based on view port

Mbonu Blessing

Join Our Newsletter. No Spam, Only the good stuff.

Related