squircle

commit 858cac6d2632bf484a620fc123e07e66fbf7b0c5
parent fc47313056101f52c5acfc65e499d0ac53624a6a
Author: George Francis <georgedoescode@gmail.com>
Date:   Sat,  1 Aug 2020 07:26:05 +0100

fix rotation export

Diffstat:
M
src/App.vue
 | 
4
++--
M
src/components/GeneratorControls.vue
 | 
2
+-
M
src/components/GeneratorExportOptions.vue
 | 
2
++
M
src/components/GeneratorPreview.vue
 | 
2
+-
M
src/components/SocialSharing.vue
 | 
2
+-
M
src/components/TheGenerator.vue
 | 
5
+++--
M
src/components/TheHeader.vue
 | 
2
+-
M
src/components/TheInfoSection.vue
 | 
2
+-

8 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -60,7 +60,7 @@ export default {
 }
 
 .generator {
-    max-width: 64rem;
+    max-width: 62rem;
     margin: 0 auto;
     margin-bottom: var(--spacing-8);
 }
@@ -73,7 +73,7 @@ export default {
     height: 540px;
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .generator {
         margin-bottom: var(--spacing-7);
     }
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -240,7 +240,7 @@ hr {
     margin: var(--spacing-1) 0;
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .generator-controls {
         padding: 0 var(--spacing-4);
         padding-bottom: var(--spacing-3);
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -46,9 +46,11 @@ export default {
 
             const pathD = originalPath.getAttribute('d');
             const pathFill = originalPath.getAttribute('fill');
+            const pathTransform = originalPath.getAttribute('transform');
 
             path.setAttribute('d', pathD);
             path.setAttribute('fill', pathFill);
+            path.setAttribute('transform', pathTransform);
 
             return svg.outerHTML;
         },
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -80,7 +80,7 @@ export default {
     height: 100%;
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .generator-preview {
         max-width: 280px;
         margin-bottom: var(--spacing-3);
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -72,7 +72,7 @@ export default {
     transform: scale(0.875);
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .social-sharing__icon {
         width: var(--spacing-3);
         height: var(--spacing-3);
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -40,7 +40,8 @@ export default {
             `;
         },
         handleControlChange({ id, value }) {
-            if (id === 'scale') value = ~~value;
+            if (id === 'scale' || id === 'rotation' || id === 'curvature')
+                value = parseFloat(value);
             this.squircleOpts[id] = value;
 
             this.setPath(
@@ -83,7 +84,7 @@ export default {
     border-radius: 48px;
 }
 
-@media screen and (max-width: 64rem) {
+@media screen and (max-width: 62rem) {
     .generator-wrapper {
         width: 100%;
     }
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -60,7 +60,7 @@ export default {
     justify-content: flex-end;
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .header {
         padding: var(--spacing-4);
         margin-bottom: var(--spacing-4);
diff --git a/src/components/TheInfoSection.vue b/src/components/TheInfoSection.vue
@@ -115,7 +115,7 @@ export default {
     }
 }
 
-@media only screen and (max-width: 64rem) {
+@media only screen and (max-width: 62rem) {
     .info-section {
         display: block;
     }