commit 799ac80cb3491bfd8e9319316d63636547c08ba8
parent 70720d86947b8be91ccc30c581f5bcaa2bbb2275
Author: George Francis <30405123+georgedoescode@users.noreply.github.com>
Date: Tue, 4 Aug 2020 20:36:27 +0100
Merge pull request #3 from smknstd/master
[WIP] add new rotation option
Diffstat:
8 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -60,7 +60,7 @@ export default {
}
.generator {
- max-width: 56rem;
+ 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: 56rem) {
+@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
@@ -14,6 +14,10 @@ export default {
type: String,
required: true,
},
+ rotation: {
+ type: Number,
+ required: true,
+ },
scale: {
type: Number,
required: true,
@@ -68,6 +72,18 @@ export default {
<template>
<div class="generator-controls">
<div class="generator-controls__inputs">
+ <label for="rotation" class="generator-controls__label">
+ Rotation
+ </label>
+ <BaseRangeInput
+ name="rotation"
+ class="generator-controls__slider"
+ :min="-45"
+ :max="45"
+ :value="rotation"
+ :step="1"
+ @change="handleControlChange"
+ />
<label for="scale" class="generator-controls__label">
Scale
</label>
@@ -224,7 +240,7 @@ hr {
margin: var(--spacing-1) 0;
}
-@media only screen and (max-width: 56rem) {
+@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
@@ -10,6 +10,10 @@ export default {
type: String,
required: true,
},
+ rotation: {
+ type: Number,
+ required: true,
+ },
scale: {
type: Number,
required: true,
@@ -28,8 +32,12 @@ export default {
>
<path
:d="path"
- :transform="`translate(
- ${(200 - scale) / 2}
+ :transform="`rotate(
+ ${rotation},
+ 100,
+ 100
+ ) translate(
+ ${(200 - scale) / 2}
${(200 - scale) / 2}
)`"
:fill="fill"
@@ -72,7 +80,7 @@ export default {
height: 100%;
}
-@media only screen and (max-width: 56rem) {
+@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: 56rem) {
+@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
@@ -13,6 +13,7 @@ export default {
squircleOpts: {
curvature: 0.75,
scale: 150,
+ rotation: 0,
fill: '#FADB5F',
},
path: '',
@@ -39,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(
@@ -58,10 +60,12 @@ export default {
:path="path"
:fill="squircleOpts.fill"
:scale="squircleOpts.scale"
+ :rotation="squircleOpts.rotation"
/>
<GeneratorControls
:initial-fill="squircleOpts.fill"
:scale="squircleOpts.scale"
+ :rotation="squircleOpts.rotation"
:curvature="squircleOpts.curvature"
@controls-changed="handleControlChange"
/>
@@ -72,7 +76,7 @@ export default {
.generator {
position: relative;
display: grid;
- grid-template-columns: 368px 1fr;
+ grid-template-columns: 418px 1fr;
grid-gap: var(--spacing-6);
padding: var(--spacing-5);
background: #fff;
@@ -80,7 +84,7 @@ export default {
border-radius: 48px;
}
-@media screen and (max-width: 56rem) {
+@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: 56rem) {
+@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: 56rem) {
+@media only screen and (max-width: 62rem) {
.info-section {
display: block;
}
