CSS fixes

templates/channeloptions.jade

@@ -9,8 +9,9 @@ mixin rcheckbox(id, label)
   .form-group
     .col-sm-8.col-sm-offset-4
       .checkbox
-        label.control-label(for=id)= label
+        label(for=id)
           input(type="checkbox", id=id)
+          = label
 
 mixin textbox(id, label, placeholder)
   .form-group
@@ -32,8 +33,9 @@ mixin rcheckbox-auto(id, label)
   .form-group
     .col-sm-8.col-sm-offset-4
       .checkbox
-        label.control-label(for=id)= label
+        label(for=id)
           input.cs-checkbox(type="checkbox", id=id)
+          = label
 
 mixin textbox-auto(id, label, placeholder)
   .form-group

templates/useroptions.jade

@@ -9,8 +9,9 @@ mixin rcheckbox(id, label)
   .form-group
     .col-sm-8.col-sm-offset-4
       .checkbox
-        label.control-label(for=id)= label
+        label(for=id)
           input(type="checkbox", id=id)
+          = label
 
 mixin textbox(id, label, placeholder)
   .form-group
@@ -77,7 +78,7 @@ mixin us-playback
       mixin rcheckbox("us-playlistbuttons", "Hide playlist buttons by default")
       mixin rcheckbox("us-oldbtns", "Old style playlist buttons")
       .form-group
-        label.control-label.col-sm-4(for="#us-default-quality") Default YouTube/Vimeo/Dailymotion quality
+        label.control-label.col-sm-4(for="#us-default-quality") Quality Preference
         .col-sm-8
           select#us-default-quality.form-control
             option(value="auto") Auto

www/css/cytube.css

@@ -590,3 +590,11 @@ table td {
     max-width: 200px;
     word-wrap: break-word;
 }
+
+#cs-chatfilters table .form-group {
+    max-width: 25%;
+}
+
+#cs-chatfilters table .form-group > input {
+    max-width: 100%;
+}

www/js/ui.js

@@ -766,12 +766,6 @@ applyOpts();
         });
 
         mr.observe($("#videowrap").find(".embed-responsive")[0], { childList: true });
-
-        var mr2 = new MutationObserver(function (records) {
-            handleVideoResize();
-        });
-
-        mr2.observe(document.body, { attributes: true, attributeFilter: ["class"] });
     } else {
         /*
          * DOMNodeInserted is deprecated.  This code is here only as a fallback
@@ -780,11 +774,5 @@ applyOpts();
         $("#videowrap").find(".embed-responsive")[0].addEventListener("DOMNodeInserted", function (ev) {
             if (ev.target.id === "ytapiplayer") handleVideoResize();
         });
-
-        document.body.addEventListener("DOMAttrModified", function (ev) {
-            if (ev.target !== document.body || ev.attrName !== "class") return;
-            console.log(ev);
-            handleVideoResize();
-        });
     }
 })();

www/js/util.js

@@ -1532,12 +1532,14 @@ function compactLayout() {
     }
 
     $("body").addClass("compact");
+    handleVideoResize();
 }
 
 function fluidLayout() {
     $(".container").removeClass("container").addClass("container-fluid");
     $("footer .container-fluid").removeClass("container-fluid").addClass("container");
     $("body").addClass("fluid");
+    handleVideoResize();
 }
 
 function synchtubeLayout() {
@@ -1601,6 +1603,7 @@ function hdLayout() {
     $("#mainpage").css("padding-top", "0");
 
     $("body").addClass("hd");
+    handleVideoResize();
 }
 
 function chatOnly() {
@@ -1644,7 +1647,7 @@ function handleWindowResize() {
 }
 
 function handleVideoResize() {
-    console.trace();
+    //console.trace();
     var intv, ticks = 0;
     var resize = function () {
         if (++ticks > 10) clearInterval(intv);
@@ -1652,7 +1655,7 @@ function handleVideoResize() {
         clearInterval(intv);
 
         var height = $("#ytapiplayer").height() - $("#chatline").outerHeight() - 2;
-        //console.log(height);
+        console.log(height);
         $("#messagebuffer").height(height);
         $("#userlist").height(height);
 
@@ -2267,8 +2270,7 @@ function formatCSChatFilterList() {
                 .appendTo(wrap);
             var addTextbox = function (placeholder) {
                 var div = $("<div/>").addClass("form-group").appendTo(form)
-                    .css("margin-right", "10px")
+                    .css("margin-right", "10px");
-                    .css("max-width", "25%");
                 var input = $("<input/>").addClass("form-control")
                     .attr("type", "text")
                     .attr("placeholder", placeholder)