MyBB Community Forums

Nice, I didn't use Bootstrap on tables tho, just stripped <td> columns out and then used floats for content which adjusts for resolution seeing as MyBB does tables pretty good.

Reckon it's still do-able like that or better off using bootstrap tables for calendar?

Well, I replaced the whole thing, cos I am obsessive and because the customer wanted it that way On another theme I used javascript to toggle columns away on tables, that worked well, except that of course MyBB actually does the tables wrong. The thead is used as a display bar, and then the first row of tds is used as what most tables would call the thead. Tsk tsk.

The calendar uses almost no tables from bootstrap; I just used the existing templates and made the MyBB thead a div and then the tcats into theads. I didnt use responsive tables from the bootstrap code because I dont like them. However, I did use a tweaked version of the bootstrap tables typography cos I am NOT loading a framework and then not using it, so there is very little extra code in the mybb stylesheet; its mainly color tweaks on MyBB classes, and of course the whole header and footer.

(2015-04-06, 03:16 AM)Leefish Wrote: [ -> ]The calendar uses almost no tables from bootstrap; I just used the existing templates and made the MyBB thead a div and then the tcats into theads.

Sounds quite easy. I assumed it would be much harder.

Yea, I spent a fair bit of time planning, then the actual template changes and css was very quick. I think there might be a hardcoded br between the mini-calendars though - very annoying.

I'll start on it once I've finished the modcp, do you know if it's possible to use a media querie to hide certain things for all mobiles / tablets instead of doing it the resolution way?

That would be browser sniffing really. But you can set your breakpoints and do it like that; consider using modernizr to catch devices based on their abilities, though Window8 is a PITA really.

This is an interesting approach : http://davidwalsh.name/device-state-dete...javascript

or this : http://hgoebl.github.io/mobile-detect.js/

But really, the answer is to design from mobile up and that way the transitions using media queries wont be that jarring.

Forgot about modernizr , used it before but will have to do.

Was just looking for a quick solution for hiding logo, search box in header instantly on all small devices, thanks anyway.

For my responsive design I use something like:

<script>
$(document).ready(function() {
	resizeEvent();
});
$(window).resize(function () {
	resizeEvent();
});
function resizeEvent () {
	if (window.matchMedia('(max-width: 768px)').matches) {
		//compress menu
	}
	else {
		//uncompress menu
	};
}

I use js to collapse the menu of course - but class based with a no-js fallback. That code of your Omar - does it require a matchmedia polyfill?

(2015-04-07, 11:06 AM)Leefish Wrote: [ -> ]does it require a matchmedia polyfill?

Probably not unless you care about legacy browsers support.

https://developer.mozilla.org/en-US/docs...matchMedia
http://caniuse.com/#feat=matchmedia