1

I'm building a react application and using bootstrap. Unfortunately, one of my pages features a google map + list on desktop, but on mobile I want to show EITHER the map or the list (using a toggle).

On desktop, the map takes up about 75% of the container width, and the list takes up the remaining 25%.

My solution right now involves using three classes - desktop, mobile-list (shows only the list), and mobile-map (shows only the map). I use display: none on the desktop class when its mobile view.

On the mobile breakpoints, the view changes based on the current state in my reducer based on whether the user has toggled list or not.

Is there a more elegant way to do this? I'm worried that if the styles fail for some reason its going to look awful.

a person
  • 986
  • 10
  • 21
  • You could accomplish this through JS too, but in the end, if your styles fail for some reason, everything is going to look awful... – Chris Happy Jan 19 '17 at 05:33

1 Answers1

1

You can create a function and changed layout based on width like - 

generateTemplate: function(){
        if( mobile ) {

            return (
                <div className="media">
                    Hello Mobile
                </div>
            );
        } else {

         return (
                <div className="media">
                    Hello Desktop
                </div>
            );
      }
    },

and in the render use it like - 

render: function() {

        let template = this.generateTemplate();

        return (
            <div>
                {template}
            </div>
        );
  }
Rohan Veer
  • 670
  • 6
  • 16
  • Thanks. Do you think this is preferable to the CSS solution? – a person Jan 19 '17 at 05:39
  • Yes you can create different layouts for mobile and desktop. – Rohan Veer Jan 19 '17 at 05:40
  • Also I want to mention that I'm rendering the component on the server (not the map results, of course those happen after its loaded in the client). I can't determine width on the server, so how can I handle that? – a person Jan 19 '17 at 05:40
  • You can determine width on the client side. Refer to this - [link](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – Rohan Veer Jan 19 '17 at 05:45
  • Thanks. I think I will have to figure out a way to defer the actual map part, but I will do it using JS. That way at least I have two failsafe. – a person Jan 19 '17 at 05:50