From 3de30ce618172313a4187cdc351024855055080a Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 29 Nov 2016 23:24:12 -0500
Subject: [PATCH] 3.5.384. Fix mod cards. Fix unloaded chat badges.

---
 changelog.html               | 22 ++++-----
 old_changes.html             | 12 +++++
 src/badges.js                |  2 +-
 src/ember/moderation-card.js | 41 +++++++++++-----
 src/main.js                  |  2 +-
 src/ui/logviewer.js          | 14 +++---
 style.css                    | 93 +++++++++++++++---------------------
 7 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/changelog.html b/changelog.html
index 064f1d5f..f317abf3 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,13 @@
+<div class="list-header">3.5.384 <time datetime="2016-11-29">(2016-11-29)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Issue causing empty chat lines when badge data has not yet loaded.</li>
+</ul>
+
+<div class="list-header">3.5.383 <time datetime="2016-11-29">(2016-11-29)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Update moderation card after Twitch made some changes.</li>
+</ul>
+
 <div class="list-header">3.5.382 <time datetime="2016-11-28">(2016-11-28)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Bits breaking chat.</li>
@@ -63,17 +73,5 @@
 	<li>API Fixed: Pass all attributes through when registering badges and emote sets.</li>
 </ul>
 
-<div class="list-header">3.5.372 <time datetime="2016-11-16">(2016-11-16)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Changed: Chat Font Family and Font Size now appear to Pinned Cheers.</li>
-	<li>Fixed: Pinned Cheers had too much padding and the Expand Pinned Cheers option wasn't functioning perfectly.</li>
-	<li>Fixed: Dark CSS tweaks. (Notably, had to completely re-do the search slideout again...)</li>
-</ul>
-
-<div class="list-header">3.5.371 <time datetime="2016-11-14">(2016-11-14)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Properly darken new clips UI.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>
\ No newline at end of file
diff --git a/old_changes.html b/old_changes.html
index c88586ff..8dfed6e7 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,15 @@
+<div class="list-header">3.5.372 <time datetime="2016-11-16">(2016-11-16)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Chat Font Family and Font Size now appear to Pinned Cheers.</li>
+	<li>Fixed: Pinned Cheers had too much padding and the Expand Pinned Cheers option wasn't functioning perfectly.</li>
+	<li>Fixed: Dark CSS tweaks. (Notably, had to completely re-do the search slideout again...)</li>
+</ul>
+
+<div class="list-header">3.5.371 <time datetime="2016-11-14">(2016-11-14)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Properly darken new clips UI.</li>
+</ul>
+
 <div class="list-header">3.5.370 <time datetime="2016-11-13">(2016-11-13)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Temporary setting to remove messages with banned words from chat to hold people over until I finish proper chat filtering.</li>
diff --git a/src/badges.js b/src/badges.js
index 528bb173..d11427ef 100644
--- a/src/badges.js
+++ b/src/badges.js
@@ -498,7 +498,7 @@ FFZ.prototype.get_twitch_badges = function(badge_tag, room_id) {
 			click_url: binfo && binfo.click_action === 'visit_url' && binfo.click_url,
 			no_invert: ! (versions && versions.allow_invert) && NO_INVERT_BADGES.indexOf(badge) !== -1,
 			no_color: ! CSS_BADGES.hasOwnProperty(badge),
-			invert_invert: versions.invert_invert || INVERT_INVERT_BADGES.indexOf(badge) !== -1,
+			invert_invert: (versions && versions.invert_invert) || INVERT_INVERT_BADGES.indexOf(badge) !== -1,
 			transparent: TRANSPARENT_BADGES.indexOf(badge) !== -1
 		};
 
diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js
index b30cb3d5..12de10cd 100644
--- a/src/ember/moderation-card.js
+++ b/src/ember/moderation-card.js
@@ -974,9 +974,25 @@ FFZ.prototype.modify_moderation_card = function(component) {
 			});
 
 
+			// Move the default buttons.
+			var def_actions = el.querySelector('.moderation-card__actions');
+			if ( def_actions ) {
+				var def_line = def_actions.querySelector('.clearfix'),
+					bad_line = def_actions.querySelector('.moderation-card__controls'),
+					children = bad_line.querySelectorAll('button');
+
+				for(var i=0; i < children.length; i++) {
+					bad_line.removeChild(children[i]);
+					def_line.appendChild(children[i]);
+				}
+
+				bad_line.classList.add('hidden');
+			}
+
+
 			// Alias Display
 			if ( alias ) {
-				var name = el.querySelector('h4.name a');
+				var name = el.querySelector('.moderation-card__name a');
 				if ( name ) {
 					name.classList.add('ffz-alias');
 					var results = f.format_display_name(controller.get('cardInfo.user.display_name'), user_id);
@@ -994,7 +1010,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 			// Info-tize it!
 			if ( f.settings.mod_card_info ) {
 				var info = utils.createElement('div', 'info channel-stats'),
-					after = el.querySelector('h4.name');
+					after = el.querySelector('.moderation-card__name');
 				if ( after ) {
 					el.classList.add('ffz-has-info');
 					after.parentElement.insertBefore(info, after.nextSibling);
@@ -1004,7 +1020,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 			// Additional Buttons
 			if ( is_mod && f.settings.mod_card_buttons && f.settings.mod_card_buttons.length ) {
-				line = utils.createElement('div', 'extra-interface interface clearfix');
+				line = utils.createElement('div', 'extra-interface moderation-card__actions clearfix');
 
 				var build_cmd = function(user, room, cmd) {
 						var lines = utils.replace_cmd_variables(cmd, user, room).split(/\s*<LINE>\s*/g),
@@ -1191,7 +1207,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 				if ( f.settings.mod_card_durations && f.settings.mod_card_durations.length ) {
 					// Extra Moderation
-					line = utils.createElement('div', 'extra-interface interface clearfix');
+					line = utils.createElement('div', 'extra-interface moderation-card__actions clearfix');
 					line.appendChild(btn_make(1));
 
 					var s = utils.createElement('span', 'right');
@@ -1209,7 +1225,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 				if ( f.settings.mod_card_reasons && f.settings.mod_card_reasons.length ) {
 					// Moderation Reasons
-					line = utils.createElement('div', 'extra-interface interface clearfix');
+					line = utils.createElement('div', 'extra-interface moderation-card__actions clearfix');
 					ban_reasons = utils.createElement('select', 'ffz-ban-reasons', '<option value="">Select a Ban ' + (f.settings.mod_card_hotkeys ? '(R)' : 'R') + 'eason</option>');
 					line.appendChild(ban_reasons);
 
@@ -1261,9 +1277,10 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 
 			// Whisper and Message Buttons
-			var msg_btn = el.querySelector(".interface > button.message-button");
+			var msg_btn = el.querySelector("button.message-button");
 			if ( msg_btn ) {
 				msg_btn.innerHTML = 'W';
+				msg_btn.classList.remove('button--hollow');
 				msg_btn.classList.add('button--icon-only');
 				msg_btn.classList.add('message');
 
@@ -1271,7 +1288,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				jQuery(msg_btn).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 
 
-				var real_msg = utils.createElement('button', 'message-button button button--icon-only message html-tooltip');
+				var real_msg = utils.createElement('button', 'message-button button float-left button--icon-only message html-tooltip');
 				real_msg.innerHTML = '<figure class="icon">' + MESSAGE + '</figure>';
 				real_msg.title = "Message User";
 
@@ -1284,7 +1301,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 
 			// Alias Button
-			var alias_btn = utils.createElement('button', 'alias button button--icon-only html-tooltip');
+			var alias_btn = utils.createElement('button', 'alias button float-left button--icon-only html-tooltip');
 			alias_btn.innerHTML = '<figure class="icon">' + constants.EDIT + '</figure>';
 			alias_btn.title = "Set Alias";
 
@@ -1327,14 +1344,14 @@ FFZ.prototype.modify_moderation_card = function(component) {
 			if ( msg_btn )
 				msg_btn.parentElement.insertBefore(alias_btn, msg_btn);
 			else {
-				var follow_btn = el.querySelector(".interface > .follow-button");
+				var follow_btn = el.querySelector(".friend-button");
 				if ( follow_btn )
 					follow_btn.parentElement.insertBefore(alias_btn, follow_btn.nextSibling);
 			}
 
 
 			// Tabbed Content
-			var tabs = utils.createElement('ul', 'interface menu clearfix'),
+			var tabs = utils.createElement('ul', 'moderation-card__actions menu clearfix'),
 				tab_container = utils.createElement('div', 'ffz-tab-container');
 
 			for(var page_id in FFZ.mod_card_pages) {
@@ -1353,7 +1370,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				}
 			}
 
-			el.insertBefore(tab_container, el.querySelector('.interface'));
+			el.insertBefore(tab_container, el.querySelector('.moderation-card__actions'));
 			el.insertBefore(tabs, tab_container);
 
 			el.classList.add('ffz-default-tab');
@@ -1435,7 +1452,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				history = el.querySelector('.chat-history.live-history');
 
 			if ( ! history ) {
-				history = utils.createElement('ul', 'interface chat-history live-history');
+				history = utils.createElement('ul', 'moderation-card__actions chat-history live-history');
 				el.appendChild(history);
 			} else
 				history.innerHTML = '';
diff --git a/src/main.js b/src/main.js
index f261b6cb..4d3cf0f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 382,
+	major: 3, minor: 5, revision: 384,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/src/ui/logviewer.js b/src/ui/logviewer.js
index 10053701..ee75c17f 100644
--- a/src/ui/logviewer.js
+++ b/src/ui/logviewer.js
@@ -420,7 +420,7 @@ FFZ.mod_card_pages.history = {
 			history.innerHTML = '';
 		else {
 			var btn_hide = utils.createElement('li', 'button ffz-back-button', '<span class="ffz-chevron"></span> Back'),
-				btn_container = utils.createElement('ul', 'interface chat-history chat-back-button', btn_hide);
+				btn_container = utils.createElement('ul', 'moderation-card__actions chat-history chat-back-button', btn_hide);
 
 			btn_hide.addEventListener('click', function() {
 				el.removeChild(history);
@@ -428,7 +428,7 @@ FFZ.mod_card_pages.history = {
 				old_history.classList.remove('hidden');
 			})
 
-			history = utils.createElement('ul', 'interface chat-history adjacent-history');
+			history = utils.createElement('ul', 'moderation-card__actions chat-history adjacent-history');
 			el.appendChild(btn_container);
 			el.appendChild(history);
 		}
@@ -492,7 +492,7 @@ FFZ.mod_card_pages.history = {
 			room_id = controller && controller.get('currentRoom.id'),
 			ffz_room = this.rooms[room_id],
 
-			history = utils.createElement('ul', 'interface chat-history lv-history');
+			history = utils.createElement('ul', 'moderation-card__actions chat-history lv-history');
 
 		el.appendChild(history);
 
@@ -550,7 +550,7 @@ FFZ.mod_card_pages.stats = {
 			user_id = mod_card.get('cardInfo.user.id'),
 			ffz_room = f.rooms && f.rooms[room_id];
 
-		var container = utils.createElement('ul', 'interface version-list');
+		var container = utils.createElement('ul', 'moderation-card__actions version-list');
 		el.appendChild(container);
 
 		if ( ffz_room.has_logs && mod_card.lv_view ) {
@@ -561,7 +561,7 @@ FFZ.mod_card_pages.stats = {
 				container.innerHTML = '<li>Messages <span>' + utils.number_commas(data.user.messages) + '</span></li><li>Timeouts <span> ' + utils.number_commas(data.user.timeouts) + '</span></li>';
 			});
 
-			var notice = utils.createElement('div', 'interface');
+			var notice = utils.createElement('div', 'moderation-card__actions');
 			notice.innerHTML = 'Chat Log Source: <a target="_blank" href="https://cbenni.com/' + room_id + '?user=' + user_id + '">CBenni\'s Logviewer</a>';
 			el.appendChild(notice);
 		}
@@ -689,7 +689,7 @@ FFZ.mod_card_pages.notes = {
 			user_id = mod_card.get('cardInfo.user.id'),
 
 			ffz_room = this.rooms[room_id],
-			history = utils.createElement('ul', 'interface chat-history user-notes');
+			history = utils.createElement('ul', 'moderation-card__actions chat-history user-notes');
 
 		el.appendChild(history);
 
@@ -726,7 +726,7 @@ FFZ.mod_card_pages.notes = {
 
 		if ( mod_card.lv_write_notes ) {
 			var textarea = utils.createElement('textarea', 'chat_text_input mousetrap note-text-input'),
-				note_container = utils.createElement('div', 'interface textarea-contain note-input', textarea),
+				note_container = utils.createElement('div', 'moderation-card__actions textarea-contain note-input', textarea),
 				btn_submit = utils.createElement('a', 'button float-right', 'Add Note'),
 				btn_container = utils.createElement('div', 'chat-buttons-container clearfix', btn_submit),
 
diff --git a/style.css b/style.css
index 90324118..0a96ff2a 100644
--- a/style.css
+++ b/style.css
@@ -1289,20 +1289,16 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 
 /* Fix Moderation Cards */
 
-img.channel_background[src=""],
-img.channel_background[src="null"] { display: none; }
-
 .ffz-moderation-card {
 	border: 2px solid #cbcbcb;
 	width: 340px;
 }
 
-.ember-chat .ffz-moderation-card .close-button {
-	right: 7px;
-	width: 20px;
+.moderation-card__close-button {
+	margin-right: 0 !important;
 }
 
-.ember-chat .ffz-moderation-card .extra-interface {
+.ffz-moderation-card .extra-interface {
 	padding-top: 0;
 }
 
@@ -1310,24 +1306,17 @@ img.channel_background[src="null"] { display: none; }
 	margin-top: -10px;
 }
 
-.ffz-moderation-card.ffz-has-info h4.name {
-	/*margin-top: -2px;*/
-	margin-bottom: 0;
-	padding-top: 0;
-	white-space: nowrap;
-}
+.ffz-moderation-card.ffz-has-info .moderation-card__name .intl-login { display: inline }
 
-.ffz-moderation-card.ffz-has-info .name .intl-login {
-	margin: -2px 0 -4px;
-}
+.ffz-moderation-card.ffz-has-info .flex { position: relative }
 
-.ffz-moderation-card .info {
-	float: none;
-	position: relative;
-	z-index: 4;
-	margin-left: 50px;
+.ffz-moderation-card .flex .info {
+	position: absolute;
+	bottom: 0;
+	left: 50px;
 	height: 18px;
 	line-height: 18px;
+	z-index: 4;
 	pointer-events: none;
 }
 
@@ -1353,12 +1342,9 @@ img.channel_background[src="null"] { display: none; }
 	color: #6441a4;
 }
 
-.ffz-moderation-card .mod-controls button figure { padding: 0 }
+.ffz-moderation-card .button.ignore { margin-left: 0 !important }
 
-.ember-chat .ffz-moderation-card .mod-controls button {
-	width: auto;
-	margin-right: 10px;
-}
+.ffz-moderation-card .moderation-card__controls button figure { padding: 0 }
 
 .ffz-moderation-card .follow-button,
 .ffz-moderation-card .friend-button { max-height: 30px }
@@ -1373,10 +1359,12 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 }
 
 .ffz-moderation-card .button.button--icon-only {
-	padding: 0 !important;
+	padding: 0 2.5px 0 2.5px !important;
 	margin-right: 5px;
 }
 
+.ffz-moderation-card .button.button--icon-only figure { padding: 0 !important }
+
 .ffz-moderation-card button:not(.button--icon-only):hover,
 .ffz-moderation-card button:not(.button--icon-only):focus {
 	color: #fff;
@@ -1387,8 +1375,10 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 	height: 30px;
 }
 
-.ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type,
-.ffz-moderation-card .interface span.right {
+.ffz-moderation-card.ffz-is-mod .button.ban,
+.ffz-moderation-card.ffz-is-mod .button.mod,
+.ffz-moderation-card.ffz-is-mod .button.unban,
+.ffz-moderation-card span.right {
 	float: right;
 }
 
@@ -1398,25 +1388,18 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 	/*box-shadow: #000 0 0 5px;*/
 }
 
-.ffz-moderation-card ul.menu + .interface { border-top: none }
+.ffz-moderation-card ul.menu + .moderation-card__actions { border-top: none }
 
-.ffz-moderation-card .interface:last-child,
-.ffz-moderation-card .interface:not(:last-of-type) {
+.ffz-moderation-card .moderation-card__actions:last-child,
+.ffz-moderation-card .moderation-card__actions:not(:last-of-type) {
 	border-bottom: none;
 }
 
-.ffz-moderation-card h4.name { display: inline-block; }
-
 .ffz-moderation-card .info,
-.ffz-moderation-card h4.name {
+.ffz-moderation-card .moderation-card__name {
 	text-shadow: black 0 0 5px;
 }
 
-.ember-chat .ffz-moderation-card .channel_background {
-	width: 100%;
-	top: 0;
-}
-
 .ffz-moderation-card .ffz-ban-reasons {
 	margin-top: 10px;
 	width: 100%;
@@ -1434,10 +1417,10 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 .ffz-dark .ffz-following-row,
 .theatre .ffz-following-row,
 
-.ffz-dark .moderation-card .interface,
-.theatre .moderation-card .interface,
-.dark .moderation-card .interface,
-.force-dark .moderation-card .interface,
+.ffz-dark .moderation-card .moderation-card__actions,
+.theatre .moderation-card .moderation-card__actions,
+.dark .moderation-card .moderation-card__actions,
+.force-dark .moderation-card .moderation-card__actions,
 
 .ffz-dark .ffz-moderation-card ul.menu,
 .theatre .ffz-moderation-card ul.menu,
@@ -1480,7 +1463,7 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 
 .ffz-moderation-card ul.menu li.active { border-bottom-color: #6441a4 }
 
-.ffz-moderation-card:not(.ffz-default-tab) > .interface:not(.menu) {
+.ffz-moderation-card:not(.ffz-default-tab) > .moderation-card__actions:not(.menu) {
 	display: none
 }
 
@@ -1499,20 +1482,20 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 	border-color: #cbcbcb;
 }
 
-.dark .ffz-moderation-card .interface,
-.force-dark .ffz-moderation-card .interface,
-.theatre .ffz-moderation-card .interface {
+.dark .ffz-moderation-card .moderation-card__actions,
+.force-dark .ffz-moderation-card .moderation-card__actions,
+.theatre .ffz-moderation-card .moderation-card__actions {
 	background-color: #232329;
 }
 
 .ffz-no-blue .cn-hosting,
-.ffz-no-blue .dark .ember-chat .moderation-card .interface,
-.ffz-no-blue .force-dark .ember-chat .moderation-card .interface,
-.ffz-no-blue .theatre .ember-chat .moderation-card .interface {
+.ffz-no-blue .dark .ember-chat .moderation-card .moderation-card__actions,
+.ffz-no-blue .force-dark .ember-chat .moderation-card .moderation-card__actions,
+.ffz-no-blue .theatre .ember-chat .moderation-card .moderation-card__actions {
 	background-color: #232323;
 }
 
-.moderation-card h4.name a { color: #fff !important; }
+.moderation-card .moderation-card__name a { color: #fff !important; }
 
 
 /* purge icon */
@@ -2087,8 +2070,8 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 	overflow: hidden;
 }
 
-.chat-history.interface li:first-child { padding-top: 10px; }
-.chat-history.interface li:last-child { padding-bottom: 10px; }
+.chat-history.moderation-card__actions li:first-child { padding-top: 10px; }
+.chat-history.moderation-card__actions li:last-child { padding-bottom: 10px; }
 
 .chat-history .chat-line {
 	overflow: hidden;
@@ -2104,7 +2087,7 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 	font-size: 1.1rem;
 }
 
-.ember-chat .moderation-card .interface.chat-history .chat-line.action {
+.ember-chat .moderation-card .moderation-card__actions.chat-history .chat-line.action {
 	float: none;
 	margin-right: 0px;
 }