added dynamic row offset and spin animation back

zesameri · zesameri · commit e91aeb113038 · 2019-03-13T19:54:19.000-04:00
diff --git a/css/secrets.css b/css/secrets.css
@@ -13,13 +13,13 @@ svg {
 }
 
 .cell:hover, .cell:visited, .cell:focus {
-  /* animation: loaderAnim 5s ease-in-out infinite normal forwards; */
+  animation: spinFlowers 5s ease-in-out infinite normal forwards;
   padding: 0;
   margin: 0;
 }
 
 
-/* @keyframes loaderAnim {
+@keyframes spinFlowers {
   0% {
     transform:rotate(0deg);
   }
@@ -29,7 +29,7 @@ svg {
   100% {
     transform:rotate(0deg);
   }
-} */
+}
 
 /* @media only screen and (max-width: 600px) {
   .row:nth-child(2n) {
diff --git a/js/2secrets.js b/js/2secrets.js
@@ -28,6 +28,7 @@ function setup() {
   makeGrid(rows, cols);
   shapes = makeFlowers(radius);
   addSvgsToCells(size, padding);
+  offsetEvenRows(size + padding);
   // fixCellPosiiton();
   // addOnClickToCells();
 }
@@ -80,6 +81,15 @@ function addOnClickToCells() {
   });
 }
 
+function offsetEvenRows(size) {
+  $(".row").each(function (index, object) {
+    if (index % 2) {
+      $(object).css("position", "relative");
+      $(object).css("left", size / 2 * -1 + "px");
+    }
+  });
+}
+
 function makeGrid(rows, cols) {
   $('body').empty();
   for (var r = 0; r < rows; r++) {
diff --git a/secrets.html b/secrets.html
@@ -8,5 +8,5 @@
  </head>
  <body>
  </body>
- <script src="./js/secrets.js"></script>
+ <script src="./js/2secrets.js"></script>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -13,13 +13,13 @@ svg {`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.cell:hover, .cell:visited, .cell:focus {`
`16`		`- /* animation: loaderAnim 5s ease-in-out infinite normal forwards; */`
	`16`	`+ animation: spinFlowers 5s ease-in-out infinite normal forwards;`
`17`	`17`	`padding: 0;`
`18`	`18`	`margin: 0;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`
`22`		`-/* @keyframes loaderAnim {`
	`22`	`+@keyframes spinFlowers {`
`23`	`23`	`0% {`
`24`	`24`	`transform:rotate(0deg);`
`25`	`25`	`}`
`@@ -29,7 +29,7 @@ svg {`
`29`	`29`	`100% {`
`30`	`30`	`transform:rotate(0deg);`
`31`	`31`	`}`
`32`		`-} */`
	`32`	`+}`
`33`	`33`
`34`	`34`	`/* @media only screen and (max-width: 600px) {`
`35`	`35`	`.row:nth-child(2n) {`