Add responsive styles for interactives on mobile devices and browsers

[lukehollis]

[sameeriitkgp]

Hey, I would like to work on this. Can we use react-grid-layout ?

[lukehollis]

React-grid-layout looks good but since we're already using Bootstrap, I think we should stick with their grid system. Are there other features with react-grid-layout that you're thinking of and aren't available in the Bootstrap grid?

[sameeriitkgp]

Nope. Not much. I thought it would be easier with react-grid-layout. But since we're already using it, Will do with Bootstrap.

[lukehollis]

Okay, cool, I can be persuaded otherwise if you have a strong idea of how we should use react-grid-layout too. Thanks for taking a look at this! I think one of the biggest questions in my mind is how we treat the data in the left and right columns (definitions and commentary/translations) on mobile devices. I was thinking about having fixed rows that fill up the bottom 50%-60% of the screen and can be scrolled. I imagine our solutions here will have to evolve as the full-sized browser view evolves as well.

[sameeriitkgp]

I was thinking about configuring the bootstrap grid first, and if that does not work, we can try other options. The layout will be easy. As you mentioned, the related material panels or columns will be a challenge. I like your idea of splitting the screen, but it would be rather convenient if the layout is flexible. Have a look at this - react-split-pane