Skip to content

Instantly share code, notes, and snippets.

@shameen
Last active February 22, 2016 18:28
Show Gist options
  • Save shameen/0defdade3687070d13f5 to your computer and use it in GitHub Desktop.
Save shameen/0defdade3687070d13f5 to your computer and use it in GitHub Desktop.
Twitch responsive thin mode (video above chat)
// ==UserScript==
// @name Twitch thin mode video above chat
// @namespace http://shameen.info/
// @version 0.4
// @description Puts video above chat when the window is thin (below 900px)
// @author Shameen
// @match *.twitch.tv/*
// @exclude *.twitch.tv/*/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @downloadURL https://gist.github.com/shameen/0defdade3687070d13f5/raw/81d68c9ff0cb7084ed027d7ad4eed3dd99487474/twitchthin.user.js
// @grant GM_addStyle
// ==/UserScript==
if( typeof GM_addStyle != 'function' ) {
function GM_addStyle(css)
{
var style = document.createElement('style');
style.innerHTML = css;
style.type='text/css';
document.getElementsByTagName('head')[0].appendChild(style);
}
}
var widthThreshold = 900;
var minifiedCss = "@media screen and (max-width:"+widthThreshold+"px){"
+ "#left_col,#main_col,#right_col{display:block!important;margin:0!important}#main_col{width:100%}#small_nav,div#left_col{position:static!important;float:left}#right_col,.chat-container,.rightcol-content,.tab-container{position:static!important;min-height:300px;height:400px;min-width:100%}#channel{padding:0}#left_col,#nav_small,#small_nav{min-height:400px}#right_col{min-width:calc(100% - 50px);width:calc(100% - 50px);margin-left:50px!important}#broadcast-meta,.stats-and-actions{margin:5px!important;padding:0!important}#channel_panels_contain{display:none}"
+ "}";
$(document).ready(function() {
var isMobileMode = false;
var moveColsAround = function() {
if (isMobileMode === false && $(window).width() <= 900) {
$('#right_col').insertAfter($('.stats-and-actions'));
$('#left_col').insertAfter($('.stats-and-actions'));
}
else if (isMobileMode) {
$('#right_col').insertAfter($('#main_col'));
$('#left_col').insertBefore($('#main_col'));
}
};
$(window).resize(moveColsAround);
setTimeout(function() {
$(window).resize();
GM_addStyle(minifiedCss);
console && typeof(console.info) === "function" && console.info("Twitch thin mode ready");
},2000);
});
/* ====================
* == unminified css ==
* ====================
@media screen and (max-width:900px) {
#left_col,
#main_col,
#right_col {
display: block!important;
margin: 0!important;
}
#main_col {
width: 100%
}
div#left_col, #small_nav {
position: static !important;
float: left;
}
#right_col,
.chat-container,
.rightcol-content,
.tab-container {
position: static!important;
min-height: 300px;
height: 400px;
min-width: 100%
}
#channel {
padding:0;
}
#left_col, #small_nav, #nav_small {min-height:400px;}
#right_col {
min-width: calc(100% - 50px);
width: calc(100% - 50px);
margin-left:50px !important;
}
.stats-and-actions, #broadcast-meta {
margin:5px !important;padding:0 !important;
}
#channel_panels_contain {
display:none;
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment