Compile jsx

[mreinhardt]

Implements #193

I wasn't sure if you wanted the compiled files checked in, so if you want that commit removed let me know.

[beveradb]

Nice one, thanks! However, what's the change to the minified CSS? I can't easily tell.

[mreinhardt]

I didn't change anything with it actually, maybe the latest build of the scss wasn't checked in? I can rip it out of the commit if need be since it's unclear what if anything has changed.

[mreinhardt]

I prettified the minified CSS and diffed the new and old versions. The file changed because I upgraded grunt-sass from 0.12.1 to 0.18.1 since it wouldn't compile on Mac OSX otherwise. Apparently between these versions it was discovered that minifying CSS by using a decimal without the leading zero is not completely cross-browser compatible, so they added it back in. (See diff below)

--- old css
+++ new css
@@ -471,30 +471,30 @@
 @-webkit-keyframes scaleDown
 {
   toopacity:0;
-  -webkit-transform:scale(.8);
+  -webkit-transform:scale(0.8);
 }  
 }

 @keyframes scaleDown
 {
   toopacity:0;
-  -webkit-transform:scale(.8);
-  transform:scale(.8);
+  -webkit-transform:scale(0.8);
+  transform:scale(0.8);
 }  
 }

 @-webkit-keyframes scaleUp
 {
   fromopacity:0;
-  -webkit-transform:scale(.8);
+  -webkit-transform:scale(0.8);
 }  
 }

 @keyframes scaleUp
 {
   fromopacity:0;
-  -webkit-transform:scale(.8);
-  transform:scale(.8);
+  -webkit-transform:scale(0.8);
+  transform:scale(0.8);
 }  
 }

@@ -531,30 +531,30 @@
 @-webkit-keyframes scaleDownCenter
 {
   toopacity:0;
-  -webkit-transform:scale(.7);
+  -webkit-transform:scale(0.7);
 }  
 }

 @keyframes scaleDownCenter
 {
   toopacity:0;
-  -webkit-transform:scale(.7);
-  transform:scale(.7);
+  -webkit-transform:scale(0.7);
+  transform:scale(0.7);
 }  
 }

 @-webkit-keyframes scaleUpCenter
 {
   fromopacity:0;
-  -webkit-transform:scale(.7);
+  -webkit-transform:scale(0.7);
 }  
 }

 @keyframes scaleUpCenter
 {
   fromopacity:0;
-  -webkit-transform:scale(.7);
-  transform:scale(.7);
+  -webkit-transform:scale(0.7);
+  transform:scale(0.7);
 }  
 }

@@ -1955,120 +1955,120 @@
 @-webkit-keyframes rotateCarouselLeftOut
 {
   toopacity:.3;
-  -webkit-transform:translateX(-150%) scale(.4) rotateY(-65deg);
+  -webkit-transform:translateX(-150%) scale(0.4) rotateY(-65deg);
 }  
 }

 @keyframes rotateCarouselLeftOut
 {
   toopacity:.3;
-  -webkit-transform:translateX(-150%) scale(.4) rotateY(-65deg);
-  transform:translateX(-150%) scale(.4) rotateY(-65deg);
+  -webkit-transform:translateX(-150%) scale(0.4) rotateY(-65deg);
+  transform:translateX(-150%) scale(0.4) rotateY(-65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselLeftIn
 {
   fromopacity:.3;
-  -webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
+  -webkit-transform:translateX(200%) scale(0.4) rotateY(65deg);
 }  
 }

 @keyframes rotateCarouselLeftIn
 {
   fromopacity:.3;
-  -webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
-  transform:translateX(200%) scale(.4) rotateY(65deg);
+  -webkit-transform:translateX(200%) scale(0.4) rotateY(65deg);
+  transform:translateX(200%) scale(0.4) rotateY(65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselRightOut
 {
   toopacity:.3;
-  -webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
+  -webkit-transform:translateX(200%) scale(0.4) rotateY(65deg);
 }  
 }

 @keyframes rotateCarouselRightOut
 {
   toopacity:.3;
-  -webkit-transform:translateX(200%) scale(.4) rotateY(65deg);
-  transform:translateX(200%) scale(.4) rotateY(65deg);
+  -webkit-transform:translateX(200%) scale(0.4) rotateY(65deg);
+  transform:translateX(200%) scale(0.4) rotateY(65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselRightIn
 {
   fromopacity:.3;
-  -webkit-transform:translateX(-200%) scale(.4) rotateY(-65deg);
+  -webkit-transform:translateX(-200%) scale(0.4) rotateY(-65deg);
 }  
 }

 @keyframes rotateCarouselRightIn
 {
   fromopacity:.3;
-  -webkit-transform:translateX(-200%) scale(.4) rotateY(-65deg);
-  transform:translateX(-200%) scale(.4) rotateY(-65deg);
+  -webkit-transform:translateX(-200%) scale(0.4) rotateY(-65deg);
+  transform:translateX(-200%) scale(0.4) rotateY(-65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselTopOut
 {
   toopacity:.3;
-  -webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
+  -webkit-transform:translateY(-200%) scale(0.4) rotateX(65deg);
 }  
 }

 @keyframes rotateCarouselTopOut
 {
   toopacity:.3;
-  -webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
-  transform:translateY(-200%) scale(.4) rotateX(65deg);
+  -webkit-transform:translateY(-200%) scale(0.4) rotateX(65deg);
+  transform:translateY(-200%) scale(0.4) rotateX(65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselTopIn
 {
   fromopacity:.3;
-  -webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
+  -webkit-transform:translateY(200%) scale(0.4) rotateX(-65deg);
 }  
 }

 @keyframes rotateCarouselTopIn
 {
   fromopacity:.3;
-  -webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
-  transform:translateY(200%) scale(.4) rotateX(-65deg);
+  -webkit-transform:translateY(200%) scale(0.4) rotateX(-65deg);
+  transform:translateY(200%) scale(0.4) rotateX(-65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselBottomOut
 {
   toopacity:.3;
-  -webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
+  -webkit-transform:translateY(200%) scale(0.4) rotateX(-65deg);
 }  
 }

 @keyframes rotateCarouselBottomOut
 {
   toopacity:.3;
-  -webkit-transform:translateY(200%) scale(.4) rotateX(-65deg);
-  transform:translateY(200%) scale(.4) rotateX(-65deg);
+  -webkit-transform:translateY(200%) scale(0.4) rotateX(-65deg);
+  transform:translateY(200%) scale(0.4) rotateX(-65deg);
 }  
 }

 @-webkit-keyframes rotateCarouselBottomIn
 {
   fromopacity:.3;
-  -webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
+  -webkit-transform:translateY(-200%) scale(0.4) rotateX(65deg);
 }  
 }

 @keyframes rotateCarouselBottomIn
 {
   fromopacity:.3;
-  -webkit-transform:translateY(-200%) scale(.4) rotateX(65deg);
-  transform:translateY(-200%) scale(.4) rotateX(65deg);
+  -webkit-transform:translateY(-200%) scale(0.4) rotateX(65deg);
+  transform:translateY(-200%) scale(0.4) rotateX(65deg);
 }  
 }

[mreinhardt]

@andrewthecoder did this fall off your radar?

[beveradb]

Hey, yeah sorry my radar has been non-existent over the last month or so, I'm spending every waking minute doing overtime to help pay for a wedding! Anyway I just merged this, but I can't actually update the live server just now (there's some more pressing half-finished structural changes such as an alternative to just dumping a 50MB JSON file for room data storage). I'll let you know when either me or Paul get round to actually deploying this. Cheers!

[pdaddyo]

This is now live FYI, thanks for your help with the grunt setup @mreinhardt - I've now made it watch the JSX files and recompile automatically when using "grunt dev"

[mreinhardt]

sweet! looking forward to trying it out tomorrow! cheers!