MediaWiki:Common.js - Revision history

Thadius856: ok, this div id being wrong explains a whole lot

2022-01-25T08:33:08Z

ok, this div id being wrong explains a whole lot

← Older revision		Revision as of 08:33, 25 January 2022
Line 7:		Line 7:
	return;		return;
	}		}
	var $content = $('#~~content~~');		var $content = $('#bodyContent');
	var $header = $('#box-wikiheader');		var $header = $('#box-wikiheader');

Thadius856: 2nd math test

2022-01-24T13:02:48Z

2nd math test

← Older revision		Revision as of 13:02, 24 January 2022
Line 44:		Line 44:
	.toggleClass('width-e', ($width <= 1140-$offset) )		.toggleClass('width-e', ($width <= 1140-$offset) )
	.toggleClass('width-f', ($width <= 1040-$offset) )		.toggleClass('width-f', ($width <= 1040-$offset) )
	.toggleClass('width-g', ($width <= ~~980-~~$offset) )		.toggleClass('width-g', ($width <= 1200+$offset) )
	.toggleClass('width-h', ($width <= ~~790~~+$offset) )		.toggleClass('width-h', ($width <= 1000+$offset) )
	.toggleClass('width-i', ($width <= ~~595~~+$offset) )		.toggleClass('width-i', ($width <= 800+$offset) )
	.toggleClass('width-j', ($width <= ~~400~~+$offset) );		.toggleClass('width-j', ($width <= 600+$offset) );

	$('#box-3b')		$('#box-3b')

Thadius856: fix offset, test math skills

2022-01-24T12:58:41Z

fix offset, test math skills

← Older revision		Revision as of 12:58, 24 January 2022
Line 12:		Line 12:
	$(window).on('resize', function(){		$(window).on('resize', function(){
	var $width = $content.width();		var $width = $content.width();
	var $offset = ~~$width > 980 ?~~ 208 ~~: ($width > 500 ? 42: 12);~~ // (browser width - largest possible content width)		var $offset = 208 // (browser width - largest possible content width)

	//header		//header
Line 45:		Line 45:
	.toggleClass('width-f', ($width <= 1040-$offset) )		.toggleClass('width-f', ($width <= 1040-$offset) )
	.toggleClass('width-g', ($width <= 980-$offset) )		.toggleClass('width-g', ($width <= 980-$offset) )
	.toggleClass('width-h', ($width <= ~~870-~~$offset) )		.toggleClass('width-h', ($width <= 790+$offset) )
	.toggleClass('width-i', ($width <= ~~620-~~$offset) )		.toggleClass('width-i', ($width <= 595+$offset) )
	.toggleClass('width-j', ($width <= ~~450-~~$offset) );		.toggleClass('width-j', ($width <= 400+$offset) );

	$('#box-3b')		$('#box-3b')

Thadius856: adjust offset to darkvector skin

2022-01-24T12:19:53Z

adjust offset to darkvector skin

← Older revision		Revision as of 12:19, 24 January 2022
Line 12:		Line 12:
	$(window).on('resize', function(){		$(window).on('resize', function(){
	var $width = $content.width();		var $width = $content.width();
	var $offset = $width > 980 ? ~~250~~ : ($width > 500 ? 42: 12); // (~~fullwidth~~ - content width) ~~on hydra skin.~~		var $offset = $width > 980 ? 208 : ($width > 500 ? 42: 12); // (browser width - largest possible content width)

	//header		//header

Thadius856: Auto-detect screen width and modify the CSS classes based on the result

2022-01-24T09:39:27Z

Auto-detect screen width and modify the CSS classes based on the result

New page

/* Any JavaScript here will be loaded for all users on every page load. */

//Main page responsive layout.
$(function() {
var $btn = $('#box-wikiheader #box-wikiheader-toggle-link');
if(!$btn.length) {
return;
}
var $content = $('#content');
var $header = $('#box-wikiheader');

$(window).on('resize', function(){
var $width = $content.width();
var $offset = $width > 980 ? 250 : ($width > 500 ? 42: 12); // (fullwidth - content width) on hydra skin.

//header
$header.toggleClass('collapsable', $width < 1300);
$header.toggleClass('collapsed', $width < 730);

//row breaks of flexboxes
$content
.toggleClass('box-row-l', ($width <= 3500-$offset) && ($width >= 2400-$offset) )
.toggleClass('box-row-m', ($width <= 2399-$offset) && ($width >= 1670-$offset) )
.toggleClass('box-row-s', ($width <= 1669-$offset) );

$('#box-1')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 1670-$offset) )
.toggleClass('width-c', ($width <= 1669-$offset) )
.toggleClass('width-d', ($width <= 1200-$offset) )
.toggleClass('width-e', ($width <= 1160-$offset) )
.toggleClass('width-f', ($width <= 700-$offset) )
.toggleClass('width-g', ($width <= 540-$offset) );

$('#box-2')
.toggleClass('width-a', ($width >= 1750-$offset) || ($width <= 1669-$offset) )
.toggleClass('width-b', ($width <= 400-$offset) );

$('#box-3a')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
.toggleClass('width-b', ($width <= 1769-$offset) )
.toggleClass('width-c', ($width <= 1669-$offset) )
.toggleClass('width-d', ($width <= 1320-$offset) )
.toggleClass('width-e', ($width <= 1140-$offset) )
.toggleClass('width-f', ($width <= 1040-$offset) )
.toggleClass('width-g', ($width <= 980-$offset) )
.toggleClass('width-h', ($width <= 870-$offset) )
.toggleClass('width-i', ($width <= 620-$offset) )
.toggleClass('width-j', ($width <= 450-$offset) );

$('#box-3b')
.toggleClass('width-a', ($width <= 3250-$offset) && ($width >= 2560-$offset) )
.toggleClass('width-b', ($width <= 1769-$offset) )
.toggleClass('width-c', ($width <= 1669-$offset) )
.toggleClass('width-d', ($width <= 1320-$offset) )
.toggleClass('width-e', ($width <= 1140-$offset) )
.toggleClass('width-f', ($width <= 1040-$offset) )
.toggleClass('width-g', ($width <= 980-$offset) )
.toggleClass('width-h', ($width <= 830-$offset) )
.toggleClass('width-i', ($width <= 630-$offset) )
.toggleClass('width-j', ($width <= 428-$offset) );

$('#box-4a')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) || $width <= 1470-$offset )
.toggleClass('width-b', ($width <= 1769-$offset) && ($width >= 1670-$offset) )
.toggleClass('width-c', ($width <= 1080-$offset) )
.toggleClass('width-d', ($width <= 750-$offset) )
.toggleClass('width-e', ($width <= 550-$offset) )
.toggleClass('width-f', ($width <= 359-$offset) );

$('#box-4b')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 2560-$offset) )
.toggleClass('width-c', ($width <= 1470-$offset) )
.toggleClass('width-d', ($width <= 1080-$offset) )
.toggleClass('width-e', ($width <= 720-$offset) )
.toggleClass('width-f', ($width <= 570-$offset) )
.toggleClass('width-g', ($width <= 350-$offset) );

$('#box-5a')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 2560-$offset) )
.toggleClass('width-c', ($width <= 1669-$offset) )
.toggleClass('width-d', ($width <= 1365-$offset) )
.toggleClass('width-e', ($width <= 800-$offset) )
.toggleClass('width-f', ($width <= 720-$offset) )
.toggleClass('width-g', ($width <= 480-$offset) );

$('#box-5b')
.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
.toggleClass('width-b', ($width <= 1669-$offset) )
.toggleClass('width-c', ($width <= 1365-$offset) )
.toggleClass('width-d', ($width <= 800-$offset) )
.toggleClass('width-e', ($width <= 720-$offset) )
.toggleClass('width-f', ($width <= 650-$offset) )
.toggleClass('width-g', ($width <= 540-$offset) );

$('#sect-6')
.toggleClass('width-a', $width >= 2300-$offset );

$('#box-7')
.toggleClass('width-a', ($width <= 2299-$offset) )
.toggleClass('width-b', ($width <= 1100-$offset) )
.toggleClass('width-c', ($width <= 680-$offset) );

$('#box-8')
.toggleClass('width-a', ($width <= 2299-$offset) )
.toggleClass('width-b', ($width <= 1499-$offset) )
.toggleClass('width-c', ($width <= 680-$offset) );
}).triggerHandler('resize');
$btn.on('click', function(){
$header.toggleClass('collapsed');
});
});