-conflits resolve

client/components/main/spinner.jade

@@ -0,0 +1,5 @@
+template(name="spinner")
+  +Template.dynamic(template=getSpinnerTemplate)
+
+template(name="spinnerRaw")
+  +Template.dynamic(template=getSpinnerTemplateRaw)

client/components/main/spinner.js

@@ -0,0 +1,11 @@
+import { Spinner } from '/client/lib/spinner';
+
+(class extends Spinner {
+}.register('spinner'));
+
+(class extends Spinner {
+  getSpinnerTemplateRaw() {
+    let ret = super.getSpinnerTemplate() + 'Raw';
+    return ret;
+  }
+}.register('spinnerRaw'));

client/components/main/spinner.tpl.jade

@@ -1,6 +0,0 @@
-.sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
-  .sk-rect1
-  .sk-rect2
-  .sk-rect3
-  .sk-rect4
-  .sk-rect5

client/components/main/spinner_bounce.jade

@@ -0,0 +1,11 @@
+template(name="spinnerBounce")
+  .sk-spinner.sk-spinner-bounce(class=currentBoard.colorClass)
+    +spinnerBounceRaw
+
+template(name="spinnerBounceRaw")
+  .sk-bounce1
+  |  
+  .sk-bounce2
+  |  
+  .sk-bounce3
+  |  

client/components/main/spinner_bounce.styl

@@ -0,0 +1,44 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-bounce {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+
+  div {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .sk-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .sk-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

client/components/main/spinner_cube.jade

@@ -0,0 +1,8 @@
+template(name="spinnerCube")
+  .sk-spinner.sk-spinner-cube(class=currentBoard.colorClass)
+    +spinnerCubeRaw
+
+template(name="spinnerCubeRaw")
+  .sk-cube1
+  .sk-cube2
+  .sk-cube3

client/components/main/spinner_cube.styl

@@ -0,0 +1,52 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-cube {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-cube1, .sk-cube2 {
+  background-color: #333;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
+  animation: sk-cubemove 1.8s infinite ease-in-out;
+}
+
+.sk-cube2 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+@-webkit-keyframes sk-cubemove {
+  25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
+  50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
+  75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
+  100% { -webkit-transform: rotate(-360deg) }
+}
+
+@keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}

client/components/main/spinner_cube_grid.jade

@@ -0,0 +1,14 @@
+template(name="spinnerCubeGrid")
+  .sk-spinner.sk-spinner-cube-grid(class=currentBoard.colorClass)
+    +spinnerCubeGridRaw
+
+template(name="spinnerCubeGridRaw")
+  .sk-cube-grid.sk-cube-grid1
+  .sk-cube-grid.sk-cube-grid2
+  .sk-cube-grid.sk-cube-grid3
+  .sk-cube-grid.sk-cube-grid4
+  .sk-cube-grid.sk-cube-grid5
+  .sk-cube-grid.sk-cube-grid6
+  .sk-cube-grid.sk-cube-grid7
+  .sk-cube-grid.sk-cube-grid8
+  .sk-cube-grid.sk-cube-grid9

client/components/main/spinner_cube_grid.styl

@@ -0,0 +1,64 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-cube-grid {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+}
+
+.sk-spinner-cube-grid .sk-cube-grid {
+  width: 33%;
+  height: 33%;
+  background-color: #333;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-spinner-cube-grid .sk-cube-grid1 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-spinner-cube-grid .sk-cube-grid2 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-spinner-cube-grid .sk-cube-grid3 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s; }
+.sk-spinner-cube-grid .sk-cube-grid4 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-spinner-cube-grid .sk-cube-grid5 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-spinner-cube-grid .sk-cube-grid6 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-spinner-cube-grid .sk-cube-grid7 {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s; }
+.sk-spinner-cube-grid .sk-cube-grid8 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-spinner-cube-grid .sk-cube-grid9 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}

client/components/main/spinner_dot.jade

@@ -0,0 +1,7 @@
+template(name="spinnerDot")
+  .sk-spinner.sk-spinner-dot(class=currentBoard.colorClass)
+    +spinnerDotRaw
+
+template(name="spinnerDotRaw")
+  .sk-dot1
+  .sk-dot2

client/components/main/spinner_dot.styl

@@ -0,0 +1,51 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-dot {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  text-align: center;
+
+  -webkit-animation: sk-rotate 2.0s infinite linear;
+  animation: sk-rotate 2.0s infinite linear;
+}
+
+.sk-dot1, .sk-dot2 {
+  width: 40%;
+  height: 40%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  background-color: #333;
+  border-radius: 100%;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.sk-dot2 {
+  top: auto;
+  bottom: 0;
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
+@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}

client/components/main/spinner_double_bounce.jade

@@ -0,0 +1,7 @@
+template(name="spinnerDoubleBounce")
+  .sk-spinner.sk-spinner-double-bounce(class=currentBoard.colorClass)
+    +spinnerDoubleBounceRaw
+
+template(name="spinnerDoubleBounceRaw")
+  .sk-double-bounce1
+  .sk-double-bounce2

client/components/main/spinner_double_bounce.styl

@@ -0,0 +1,44 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-double-bounce {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 100px auto;
+}
+
+.sk-double-bounce1, .sk-double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.sk-double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}

client/components/main/spinner_rotateplane.jade

@@ -0,0 +1,6 @@
+template(name="spinnerRotateplane")
+  .sk-spinner.sk-spinner-rotateplane(class=currentBoard.colorClass)
+    +spinnerRotateplaneRaw
+
+template(name="spinnerRotateplaneRaw")
+  .sk-rotateplane1

client/components/main/spinner_rotateplane.styl

@@ -0,0 +1,38 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-rotateplane {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+
+  margin: 100px auto;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+
+  div {
+    background-color: #333;
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

client/components/main/spinner_scaleout.jade

@@ -0,0 +1,6 @@
+template(name="spinnerScaleout")
+  .sk-spinner.sk-spinner-scaleout(class=currentBoard.colorClass)
+    +spinnerScaleoutRaw
+
+template(name="spinnerScaleoutRaw")
+  .sk-scaleout1

client/components/main/spinner_scaleout.styl

@@ -0,0 +1,40 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-scaleout {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+
+  margin: 100px auto;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+
+  div {
+    background-color: #333;
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}

client/components/main/spinner_wave.jade

@@ -0,0 +1,15 @@
+template(name="spinnerWave")
+  .sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
+    +spinnerWaveRaw
+
+template(name="spinnerWaveRaw")
+  .sk-rect1
+  |  
+  .sk-rect2
+  |  
+  .sk-rect3
+  |  
+  .sk-rect4
+  |  
+  .sk-rect5
+  |  

client/components/main/spinner_wave.styl

@@ -1,21 +1,7 @@
 @import 'nib'
 
-/*
- * From https://github.com/tobiasahlin/SpinKit
- *
- * Usage:
- *
- *    <div class="sk-spinner sk-spinner-wave">
- *      <div class="sk-rect1"></div>
- *      <div class="sk-rect2"></div>
- *      <div class="sk-rect3"></div>
- *      <div class="sk-rect4"></div>
- *      <div class="sk-rect5"></div>
- *    </div>
- *
- */
-
-.sk-spinner {
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-wave {
   width: 50px;
   height: 50px;
   margin: auto;