Raw Source Toggle Dropdown

• Minified Source

maloomf9 / Furstre.am narrower

// ==UserScript==
// @name        Furstre.am narrower
// @namespace   http://www.furaffinity.net/user/Maloo
// @description Rearranges furstream to take up less space and stack vertically, for side-by-side use on a widescreen monitor.
// @include     *furstre.am/stream/*
// @version     2.5
// @grant       none
// ==/UserScript==

var vHeight = (window.innerWidth / 16 * 9);
if (vHeight > 576) vHeight = 576;
var cHeight = window.innerHeight - vHeight; //300;

function addGlobalStyle(css) {
	try {
		var elmHead, elmStyle;
		while (document.getElementsByTagName('head')[0] === null)
		{
			/*var ms;
			ms = 10;
			ms += new Date().getTime();
			while (new Date() < ms){}*/
		}
		elmHead = document.getElementsByTagName('head')[0];
		elmStyle = document.createElement('style');
		elmStyle.type = 'text/css';
		elmHead.appendChild(elmStyle);
		elmStyle.innerHTML = css;
	} catch (e) {
		if (!document.styleSheets.length) {
			document.createStyleSheet();
		}
		document.styleSheets[0].cssText += css;
	}
}

var lInLabels = ["Profile", "Stream", "Dashboard", "Home", "Stream Directory", "Forum"];
var lOutLabels = ["Login", "Register", "Home", "Stream Directory", "Forum"];
var topBar = document.createElement("span");
var sideNav = document.querySelector('.side-nav');
sideNav.style = "background-color:#222; text-align: center; padding: 5px;";
topBar.appendChild(sideNav);
var buttons = sideNav.querySelectorAll('p');
for(var i=0; i<buttons.length; i++) {
    var button = buttons[i];
	bIcon = button.querySelector('a');
	bIcon.style = "color: #E0E0E0; padding-right: 10px; padding-left: 10px; display:inline-block;";
	if (buttons.length == 5) bIcon.appendChild(document.createTextNode(lOutLabels[i]));
	else bIcon.appendChild(document.createTextNode(lInLabels[i]));
	sideNav.appendChild(bIcon);
	sideNav.removeChild(button);
}
sideNav.removeChild(sideNav.querySelector('.sep'));


var streamDiv = document.querySelector('.body');
streamDiv.insertBefore(topBar,streamDiv.firstChild);
var elem = document.querySelector('.side-menu-stream');
elem.parentNode.removeChild(elem);

var chatbox = document.querySelector('#chat');
var insPoint = document.querySelector('.player-wrap');
insPoint.parentNode.insertBefore(chatbox, insPoint.nextSibling);

addGlobalStyle(
".body.stream {margin-right: 0px !important; margin-left: 0px !important; background-position: center 30px !important;}" +
".center {width:auto !important; max-width: 1024px; padding: 0px !important;}" +
"div#chat {position:static; width:100%;height:"+cHeight+"px;}" +
".player-wrap {width: 100% !important; height: auto !important; margin-top: 0px !important;}" +
"#player { padding-top: 56.25% !important;}" +
".col-md-2 {float: left;}" +
".col-md-8 {width:66.6667% !important; float: left;}" +
".panel {width: 102px;}" +
".body > div:nth-child(4) {height: auto !important; position: relative !important;}" + 
".glyphicon {margin-right: 5px !important;}"

);

function chRes() { //Resize chat height when window is resized.
	var vHeight = (window.innerWidth / 16 * 9);
	if (vHeight > 576) vHeight = 576;
	var cHeight = window.innerHeight - vHeight;
	if (cHeight < 200) cHeight = 200;
	document.querySelector('div#chat').style = ('Height: ' + cHeight + 'px !important;');
}
window.addEventListener("resize", chRes, true);