commit 0da18dc081326b04229bf71f1f3b19c59ec87373
parent 9732f211a6a09758947da41524a01afb2ce5fec0
Author: George Francis <georgedoescode@gmail.com>
Date: Tue, 7 Jul 2020 07:21:01 +0100
add color swatch
Diffstat:
6 files changed, 65 insertions(+), 24 deletions(-)
diff --git a/postcss.config.js b/postcss.config.js
@@ -7,6 +7,9 @@ module.exports = ({ file, options, env }) => {
'postcss-import': {},
'postcss-preset-env': {
importFrom: './src/assets/styles/app.css',
+ features: {
+ 'custom-properties': false,
+ },
},
cssnano: mode === 'production' ? {} : false,
},
diff --git a/src/assets/img/share.svg b/src/assets/img/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
+\ No newline at end of file
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -1,6 +1,12 @@
<script>
+import VSwatches from 'vue-swatches';
+import 'vue-swatches/dist/vue-swatches.css';
+
export default {
name: 'GeneratorControls',
+ components: {
+ VSwatches,
+ },
data() {
return {
color: '#1f2933',
@@ -17,23 +23,11 @@ export default {
<template>
<div class="generator-controls">
<div class="generator-controls__inputs">
- <label for="width" class="generator-controls__label">
- Width
- </label>
- <BaseRangeInput
- name="width"
- class="generator-controls__slider"
- :min="0"
- :max="100"
- :value="50"
- :step="1"
- @change="handleControlChange"
- />
- <label for="height" class="generator-controls__label">
- Height
+ <label for="scale" class="generator-controls__label">
+ Scale
</label>
<BaseRangeInput
- name="height"
+ name="scale"
class="generator-controls__slider"
:min="0"
:max="100"
@@ -53,6 +47,29 @@ export default {
:step="0.01"
@change="handleControlChange"
/>
+ <label for="colorHex" class="generator-controls__label">
+ Fill
+ </label>
+ <div class="generator-controls__swatch">
+ <input
+ id="colorHex"
+ v-model="color"
+ class="generator-conrols__swatch-text"
+ type="text"
+ name="colorHex"
+ />
+ <VSwatches
+ v-model="color"
+ :trigger-style="{
+ width: '48px',
+ height: '32px',
+ borderRadius: '0 8px 8px 0',
+ }"
+ />
+ </div>
+ <label for="quality" class="generator-controls__label">
+ Quality
+ </label>
</div>
</div>
</template>
@@ -93,14 +110,34 @@ export default {
grid-column: -1 / 1;
}
+.generator-controls__swatch {
+ grid-column: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: var(--spacing-3);
+ height: var(--spacing-5);
+ background: var(--grey-000);
+ border-radius: 8px;
+}
+
+.generator-conrols__swatch-text {
+ border: 0;
+ background: transparent;
+ outline: none;
+ width: 100%;
+}
+
@media only screen and (max-width: 48rem) {
.generator-controls {
padding: 0 var(--spacing-4);
padding-bottom: var(--spacing-6);
}
+
.generator-controls__inputs {
- grid-row-gap: var(--spacing-5);
+ grid-row-gap: var(--spacing-4);
}
+
.generator-controls__label {
font-size: var(--font-size-3);
}
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -76,7 +76,7 @@ export default {
.social-sharing__icon {
width: var(--spacing-3);
height: var(--spacing-3);
- margin-left: var(--spacing-3);
+ margin-left: var(--spacing-4);
}
}
</style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -14,8 +14,7 @@ export default {
return {
squircleOpts: {
curvature: 8,
- scaleX: 50,
- scaleY: 50,
+ scale: 50,
},
points: [],
};
@@ -26,15 +25,15 @@ export default {
methods: {
setPoints() {
this.points = [];
- for (let angle = 0; angle < Math.PI * 2; angle += 0.05) {
+ for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
const na = 2 / this.squircleOpts.curvature;
const x =
Math.pow(Math.abs(Math.cos(angle)), na) *
- this.squircleOpts.scaleX *
+ this.squircleOpts.scale *
this.sgn(Math.cos(angle));
const y =
Math.pow(Math.abs(Math.sin(angle)), na) *
- this.squircleOpts.scaleY *
+ this.squircleOpts.scale *
this.sgn(Math.sin(angle));
this.points.push([x, y]);
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -62,8 +62,8 @@ export default {
@media only screen and (max-width: 48rem) {
.header {
- padding: var(--spacing-5) var(--spacing-4);
- margin-bottom: var(--spacing-3);
+ padding: var(--spacing-4);
+ margin-bottom: var(--spacing-4);
}
.header__logo {
