Make comparison table color blind safe.

anders · anders · commit 2f6156013f45 · 2014-03-26T22:53:48.000+01:00
The CSS classes "green" and "red" were renamed to "equal" and "inequal".
The red background has been replaced with white.

Signed-off-by: Anders Bergh &lt;anders1@gmail.com&gt;
diff --git a/coffee/comparison_table.coffee b/coffee/comparison_table.coffee
@@ -111,7 +111,7 @@ supportsCanvas = do ->
       [evalStr, tf] = valX.testResults(valY, comparator)
       td.attr("title", "#{evalStr} // #{tf}")
       if tf
-        td.addClass("green")
+        td.addClass("equal")
   $table
 
 @buildComparisonTableForIf = (values)->
@@ -122,7 +122,7 @@ supportsCanvas = do ->
     $td = $("<td>", class: "cell").html($("<div>", html: "&nbsp;")).appendTo($tr)
     val = (new Function("if(#{comp.asString}){return true}else{return false}"))()
     if val
-      $td.addClass("green")
+      $td.addClass("equal")
     expression = " if (#{comp.asString}) { /* #{if val then 'executes' else 'does not execute'} */ } "
     $("<td>", class: "expression").html(expression).appendTo($tr)
   $table
diff --git a/comparison-table.js b/comparison-table.js
@@ -35,12 +35,12 @@ var EqualityTable = (function(cmpStr){
           _curRow.append($("<td />", {'class':'row header'}).html("If (<i>value</i>)"))
           var elem;
           $.each(comparisons, function(i){
-              elem = $("<td />", {'class':'cell green'}).html("<div />")
+              elem = $("<td />", {'class':'cell equal'}).html("<div />")
               if(comparisons[i]) {
-                  elem.addClass('green');
+                  elem.addClass('equal');
                   elem.attr('title', "if("+comparisons[i]+"){/*--executes--*/}")
               } else {
-                  elem.addClass('red');
+                  elem.addClass('inequal');
                   elem.attr('title', "if("+comparisons[i]+"){/*--does not execute--*/}")
               }
               _curRow.append(elem)
@@ -56,18 +56,18 @@ var EqualityTable = (function(cmpStr){
     		    elem = $("<td />", {'class': 'cell'}).html("<div />");
     			if(cmpStr==="===") {
     			    if(comparisons[i]===comparisons[j]) {
-    			        elem.addClass('green');
+    			        elem.addClass('equal');
                         elem.attr('title', ""+representations[i]+"==="+representations[j]+"  » true ")
     			    } else {
-    			        elem.addClass('red');
+    			        elem.addClass('inequal');
                         elem.attr('title', ""+representations[i]+"==="+representations[j]+"  » false ")
     			    }
     			} else if(cmpStr==="=="){
     			    if(comparisons[i]==comparisons[j]) {
-    			        elem.addClass('green');
+    			        elem.addClass('equal');
                         elem.attr('title', ""+representations[i]+"=="+representations[j]+"  » true ")
     			    } else {
-    			        elem.addClass('red');
+    			        elem.addClass('inequal');
                         elem.attr('title', ""+representations[i]+"=="+representations[j]+"  » false ")
     			    }
     			}
diff --git a/index.html b/index.html
@@ -52,7 +52,7 @@ <h2>=== <smaller>(negated: !==)</smaller></h2>
 			</p>
 		</div>
 		<div id="if-statement">
-			<h2>A standard IF statement. If(<i>value</i>) {/*- green -*/} else { /*- red -*/ }</h2>
+			<h2>A standard IF statement. If(<i>value</i>) {/*- green -*/} else { /*- white -*/ }</h2>
 			<p>Note: This row does not match up with any of the rows in the other table.</p>
 		</div>
 		<div style="padding: 2px 20px">
diff --git a/js/comparison_table.js b/js/comparison_table.js
diff --git a/simple.css b/simple.css
@@ -18,10 +18,10 @@ table.comparisons td.cell div {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
-  	background-color: #ed9e98;
-  	border-color: #be120d;
+  	background-color: white;
+  	border-color: #b1b1b1;
 }
-table.comparisons td.cell.green div {
+table.comparisons td.cell.equal div {
   background-color: #5bbe5b;
   border-color: #0b6c0b;
 }

Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,10 @@ table.comparisons td.cell div {`
`18`	`18`	`-moz-border-radius: 3px;`
`19`	`19`	`-webkit-border-radius: 3px;`
`20`	`20`	`border-radius: 3px;`
`21`		`- background-color: #ed9e98;`
`22`		`- border-color: #be120d;`
	`21`	`+ background-color: white;`
	`22`	`+ border-color: #b1b1b1;`
`23`	`23`	`}`
`24`		`-table.comparisons td.cell.green div {`
	`24`	`+table.comparisons td.cell.equal div {`
`25`	`25`	`background-color: #5bbe5b;`
`26`	`26`	`border-color: #0b6c0b;`
`27`	`27`	`}`