From 0d4db5b9780a810319fcc3726271142e8b15579f Mon Sep 17 00:00:00 2001
From: Jordie0608 <jordie0608@gmail.com>
Date: Mon, 17 Dec 2018 23:03:48 +1100
Subject: [PATCH] compatability for IE8's lack of css3 breaking panel
 checkboxes

---
 code/modules/admin/sql_ban_system.dm | 14 ++---
 html/admin/banpanel.css              | 81 +---------------------------
 html/admin/banpanel_css3.css         | 78 +++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 86 deletions(-)
 create mode 100644 html/admin/banpanel_css3.css

diff --git a/code/modules/admin/sql_ban_system.dm b/code/modules/admin/sql_ban_system.dm
index 2a3df8df7f4..5dc20a45d0a 100644
--- a/code/modules/admin/sql_ban_system.dm
+++ b/code/modules/admin/sql_ban_system.dm
@@ -87,7 +87,9 @@
 		panel_height = 240
 	var/datum/browser/panel = new(usr, "banpanel", "Banning Panel", 910, panel_height)
 	panel.add_stylesheet("banpanelcss", 'html/admin/banpanel.css')
-	panel.add_script("banpaneljs", 'html/admin/banpanel.js')
+	if(usr.client.prefs.tgui_fancy) //some browsers (IE8) have trouble with unsupported css3 elements and DOM methods that break the panel's functionality, so we won't load those if a user is in no frills tgui mode since that's for similar compatability support
+		panel.add_stylesheet("banpanelcss3", 'html/admin/banpanel_css3.css')
+		panel.add_script("banpaneljs", 'html/admin/banpanel.js')
 	var/list/output = list("<form method='get' action='?src=[REF(src)]'>[HrefTokenFormField()]")
 	output += {"<input type='hidden' name='src' value='[REF(src)]'>
 	<label class='inputlabel checkbox'>Key:
@@ -200,14 +202,14 @@
 				banned_from += query_get_banned_roles.item[1]
 			qdel(query_get_banned_roles)
 		var/break_counter = 0
-		output += "<div class='row'><div class='column'><label class='rolegroup command'><input type='checkbox' name='Command' class='hidden' onClick='toggle_checkboxes(this, \"_dep\")'>Command</label><div class='content'>"
+		output += "<div class='row'><div class='column'><label class='rolegroup command'><input type='checkbox' name='Command' class='hidden' [usr.client.prefs.tgui_fancy ? " onClick='toggle_checkboxes(this, \"_dep\")'" : ""]>Command</label><div class='content'>"
 		//all heads are listed twice so have a javascript call to toggle both their checkboxes when one is pressed
 		//for simplicity this also includes the captain even though it doesn't do anything
 		for(var/job in GLOB.command_positions)
 			if(break_counter > 0 && (break_counter % 3 == 0))
 				output += "<br>"
 			output += {"<label class='inputlabel checkbox'>[job]
-						<input type='checkbox' id='[job]_com' name='[job]' class='Command' onClick='toggle_head(this, \"_dep\")' value='1'>
+						<input type='checkbox' id='[job]_com' name='[job]' class='Command' value='1'[usr.client.prefs.tgui_fancy ? " onClick='toggle_head(this, \"_dep\")'" : ""]>
 						<div class='inputbox[(job in banned_from) ? " banned" : ""]'></div></label>
 			"}
 			break_counter++
@@ -221,9 +223,9 @@
 							"Silicon" = GLOB.nonhuman_positions) //another cheat for simplicity
 		for(var/department in job_lists)
 			//the first element is the department head so they need the same javascript call as above
-			output += "<div class='column'><label class='rolegroup [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' onClick='toggle_checkboxes(this, \"_com\")'>[department]</label><div class='content'>"
+			output += "<div class='column'><label class='rolegroup [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' [usr.client.prefs.tgui_fancy ? " onClick='toggle_checkboxes(this, \"_com\")'" : ""]>[department]</label><div class='content'>"
 			output += {"<label class='inputlabel checkbox'>[job_lists[department][1]]
-						<input type='checkbox' id='[job_lists[department][1]]_dep' name='[job_lists[department][1]]' class='[department]' onClick='toggle_head(this, \"_com\")' value='1'>
+						<input type='checkbox' id='[job_lists[department][1]]_dep' name='[job_lists[department][1]]' class='[department]' value='1'[usr.client.prefs.tgui_fancy ? " onClick='toggle_head(this, \"_com\")'" : ""]>
 						<div class='inputbox[(job_lists[department][1] in banned_from) ? " banned" : ""]'></div></label>
 			"}
 			break_counter = 1
@@ -246,7 +248,7 @@
 									ROLE_REV_HEAD, ROLE_SERVANT_OF_RATVAR, ROLE_SYNDICATE,
 									ROLE_TRAITOR, ROLE_WIZARD)) //ROLE_REV_HEAD is excluded from this because rev jobbans are handled by ROLE_REV
 		for(var/department in long_job_lists)
-			output += "<div class='column'><label class='rolegroup long [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' onClick='toggle_checkboxes(this, \"_com\")'>[department]</label><div class='content'>"
+			output += "<div class='column'><label class='rolegroup long [ckey(department)]'><input type='checkbox' name='[department]' class='hidden' [usr.client.prefs.tgui_fancy ? " onClick='toggle_checkboxes(this, \"_com\")'" : ""]>[department]</label><div class='content'>"
 			break_counter = 0
 			for(var/job in long_job_lists[department])
 				if(break_counter > 0 && (break_counter % 10 == 0))
diff --git a/html/admin/banpanel.css b/html/admin/banpanel.css
index db8f76736f5..853ffa77ce3 100644
--- a/html/admin/banpanel.css
+++ b/html/admin/banpanel.css
@@ -15,7 +15,7 @@
     width: 150px;
 }
 
-.row:after {
+.row {
     content: '';
     display: table;
     clear: both;
@@ -84,19 +84,6 @@
     background-color: #6d3f40;
 }
 
-.inputlabel {
-    position: relative;
-    display: inline;
-    cursor: pointer;
-    padding-left: 20px;
-}
-
-.inputlabel input {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-}
-
 .inputbox {
     position: absolute;
     top: 0px;
@@ -106,72 +93,6 @@
     background: #e6e6e6;
 }
 
-.radio .inputbox {
-    border-radius: 50%;
-}
-
-.inputlabel:hover input ~ .inputbox {
-    background: #b4b4b4;
-}
-
-.inputlabel input:checked ~ .inputbox {
-    background: #2196F3;
-}
-
-.inputlabel:hover input:not([disabled]):checked ~ .inputbox{
-    background: #0a6ebd;
-}
-
-.inputlabel input:disabled ~ .inputbox {
-    pointer-events: none;
-    background: #838383;
-}
-
-.banned {
-    background: #ff4e4e;
-}
-
-.inputlabel:hover input ~ .banned {
-    background: #ff0000;
-}
-
-.inputlabel input:checked ~ .banned {
-    background: #a80000;
-}
-
-.inputlabel:hover input:not([disabled]):checked ~ .banned{
-    background: #810000;
-}
-
-.inputbox:after {
-    position: absolute;
-    display: none;
-    content: '';
-}
-
-.inputlabel input:checked ~ .inputbox:after {
-    display: block;
-}
-
-.checkbox .inputbox:after {
-    top: 1px;
-    left: 5px;
-    width: 3px;
-    height: 9px;
-    transform: rotate(45deg);
-    border: solid #fff;
-    border-width: 0 2px 2px 0;
-}
-
-.radio .inputbox:after {
-    top: 4px;
-    left: 4px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #fff;
-}
-
 .select {
     position: relative;
     display: inline-block;
diff --git a/html/admin/banpanel_css3.css b/html/admin/banpanel_css3.css
new file mode 100644
index 00000000000..71861c88bb0
--- /dev/null
+++ b/html/admin/banpanel_css3.css
@@ -0,0 +1,78 @@
+.inputlabel {
+    position: relative;
+    display: inline;
+    cursor: pointer;
+    padding-left: 20px;
+}
+
+.inputlabel input {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+}
+
+.radio .inputbox {
+    border-radius: 50%;
+}
+
+.inputlabel:hover input ~ .inputbox {
+    background: #b4b4b4;
+}
+
+.inputlabel input:checked ~ .inputbox {
+    background: #2196F3;
+}
+
+.inputlabel:hover input:not([disabled]):checked ~ .inputbox{
+    background: #0a6ebd;
+}
+
+.inputlabel input:disabled ~ .inputbox {
+    pointer-events: none;
+    background: #838383;
+}
+
+.banned {
+    background: #ff4e4e;
+}
+
+.inputlabel:hover input ~ .banned {
+    background: #ff0000;
+}
+
+.inputlabel input:checked ~ .banned {
+    background: #a80000;
+}
+
+.inputlabel:hover input:not([disabled]):checked ~ .banned{
+    background: #810000;
+}
+
+.inputbox:after {
+    position: absolute;
+    display: none;
+    content: '';
+}
+
+.inputlabel input:checked ~ .inputbox:after {
+    display: block;
+}
+
+.checkbox .inputbox:after {
+    top: 1px;
+    left: 5px;
+    width: 3px;
+    height: 9px;
+    transform: rotate(45deg);
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+}
+
+.radio .inputbox:after {
+    top: 4px;
+    left: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #fff;
+}