MyBB Community Forums

I am working on a responsive theme. When I can't find a single template that'd resize nicely both on desktop and mobile, or I want a considerably different effect, I put two alternate codes - that represent the same object, but one for desktop and one for mobile.

Example: on desktop I like my profiles big, vertical and hovering. On mobile, I want them smaller and horizontal above the post. So I do something like: 

<div class=desktopstuff"> <codes for the vertical postbit> </div>

<div class=mobilestuff"> <codes for the horizontal postbit> </div>

All good, except when you have some JS involved. To use our example, I noticed that the Quick Reply was broken. I moved it out of the double description above, since it was identical for both anyway.

As a result, it works but only on ONE of the two. And apparently, it depends on the one that I put first.

For instance: 

<div class=desktopstuff"> <codes for the vertical postbit> </div>

<div class=mobilestuff"> <codes for the horizontal postbit> </div>

<button bits>

means that Quick Reply will work on desktop, but not on mobile, while

<div class=mobilestuff"> <codes for the horizontal postbit> </div>

<div class=desktopstuff"> <codes for the vertical postbit> </div>

<button bits>

works on mobile and not on desktop.

Even if I assign both repetitions to the same device (well, screen width, actually), only the first one works.

It happened with the text editor. Even without the media queries, if I posted the HTML for the textarea twice on the same template, I got two text boxes. Both allowed me to write, but only the first one had the white field and the BCC bar, while the other had only the same basic features you get on Quick Reply.

Is that normal? What is the problem?

http://silenceandwhispers.icyboards.net/

Without getting too much into the technicalities of it, MyBB relies on those unique elements in order for the quick reply function to work. You can't just repeat the postbit twice and not expect to break anything.

I have a responsive postbit in my WIP theme with no repetition of the post. Maybe it can inspire you to find a different solution: http://beta.qc-harajuku.net/showthread.php?tid=17

It's not just the post bit, and other bits can't be dealt entirely by resizing. If it's only about those few functions I can live with that.

CSS is pretty powerful, using media queries and changing the markup a bit to work in your favor you can completely change the layout with it. Flexbox for example allows you to change the direction of the content from a column to a row easily.

Anyway, good luck with it, in 2.0 we should have simplified selectors in JS to improve customization quite a lot!

This is troubling me a lot on my theme as well. Unfortunately I don't think there is any way around it.

There is definitely a way around it. You pretty much use your template twice, desktop and mobile, which means JS elements get repeated and break.
With your CSS code, you simply hide your JS code, but don't eliminate it.

A solution would be to seperate your desktop and mobile templates. For example, you're going to use:

• index
  
• index_mobile
  
• index_tablet
  

etc..

If you're wondering how to do this: 

• Either request the templates once a certain viewpoint is met (Not sure if that's going to work)
  
• Detect the useragent of your device and display the according template. Mobile Detect should work fine for this.
  

The error is in the opening quote tags in your code

<div class=mobilestuff">
<div class=desktopstuff">

You forgot to open the quote tag for the class and I believe it's what causes the problem. The proper code should be:

<div class="desktopstuff"> <codes for the vertical postbit> </div>

<div class="mobilestuff"> <codes for the horizontal postbit> </div>

<button bits>