commit aa3079026bcf24edea7502e04322a76e8ae92db0
parent 3b8cfae91cb14cbb408a9e6c0ab74402ca3ebc80
Author: George Francis <georgedoescode@gmail.com>
Date: Wed, 8 Jul 2020 09:03:43 +0100
add detail toggle and adjust width / spacing of control panel
Diffstat:
7 files changed, 119 insertions(+), 12 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -52,7 +52,7 @@ export default {
display: grid;
grid-template-columns:
minmax(0, 1fr)
- minmax(0, var(--spacing-15))
+ minmax(0, 56rem)
minmax(0, 1fr);
grid-auto-rows: max-content;
max-width: 1280px;
diff --git a/src/components/BaseThreeBtnToggle.vue b/src/components/BaseThreeBtnToggle.vue
@@ -0,0 +1,74 @@
+<script>
+export default {
+ name: 'BaseThreeBtnToggle',
+ props: {
+ toggleState: {
+ type: Array,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <div class="base-three-btn-toggle">
+ <div
+ v-for="option in toggleState"
+ :key="option.id"
+ class="base-three-btn-toggle__option"
+ >
+ <input
+ :id="option.id"
+ type="checkbox"
+ :name="option.id"
+ :checked="option.checked ? 'checked' : ''"
+ @click="$emit('change', $event)"
+ />
+ <label :for="option.id">{{ option.label }}</label>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.base-three-btn-toggle {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-auto-columns: 1fr;
+ align-items: center;
+ height: var(--spacing-5);
+ border: 1px solid var(--grey-200);
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.base-three-btn-toggle__option {
+ width: 100%;
+ height: 100%;
+}
+
+.base-three-btn-toggle label {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.base-three-btn-toggle > div:nth-of-type(2) {
+ border-left: 1px solid var(--grey-200);
+ border-right: 1px solid var(--grey-200);
+}
+
+.base-three-btn-toggle input {
+ position: absolute;
+ width: 0;
+ height: 0;
+ opacity: 0;
+}
+
+.base-three-btn-toggle input:checked + label {
+ background: var(--grey-000);
+}
+</style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -17,6 +17,23 @@ export default {
data() {
return {
fill: this.initialFill,
+ detailToggleState: [
+ {
+ id: 'low',
+ label: 'Low',
+ checked: false,
+ },
+ {
+ id: 'med',
+ label: 'Med',
+ checked: true,
+ },
+ {
+ id: 'high',
+ label: 'High',
+ checked: false,
+ },
+ ],
};
},
watch: {
@@ -31,6 +48,19 @@ export default {
handleControlChange(e) {
this.$emit('controls-changed', e.target);
},
+ handleDetailChange(e) {
+ const { id } = e.target;
+
+ for (const propertyIndex in this.detailToggleState) {
+ const state = this.detailToggleState[~~propertyIndex];
+
+ if (state.id === id) {
+ state.checked = true;
+ } else {
+ state.checked = false;
+ }
+ }
+ },
},
};
</script>
@@ -85,7 +115,12 @@ export default {
<label for="quality" class="generator-controls__label">
Detail
</label>
- <div class="generator-controls__detail"></div>
+
+ <BaseThreeBtnToggle
+ :toggle-state="detailToggleState"
+ class="generator-controls__detail"
+ @change="handleDetailChange"
+ />
</div>
</div>
</template>
@@ -104,7 +139,7 @@ export default {
.generator-controls__inputs {
display: grid;
grid-template-columns: max-content 1fr;
- grid-auto-rows: minmax(var(--spacing-5), max-content);
+ grid-auto-rows: minmax(var(--spacing-6), max-content);
grid-row-gap: var(--spacing-5);
justify-content: center;
width: 100%;
@@ -146,12 +181,10 @@ export default {
}
.generator-controls__detail {
- height: var(--spacing-5);
- border: 1px solid var(--grey-200);
- border-radius: 8px;
+ align-self: center;
}
-@media only screen and (max-width: 48rem) {
+@media only screen and (max-width: 56rem) {
.generator-controls {
padding: 0 var(--spacing-4);
padding-bottom: var(--spacing-6);
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -56,7 +56,7 @@ export default {
height: 100%;
}
-@media only screen and (max-width: 48rem) {
+@media only screen and (max-width: 56rem) {
.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: 48rem) {
+@media only screen and (max-width: 56rem) {
.social-sharing__icon {
width: var(--spacing-3);
height: var(--spacing-3);
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -72,7 +72,7 @@ export default {
.generator {
position: relative;
display: grid;
- grid-template-columns: 320px 1fr;
+ grid-template-columns: 368px 1fr;
grid-gap: var(--spacing-4);
padding: var(--spacing-4);
background: #fff;
@@ -86,7 +86,7 @@ export default {
right: calc(var(--spacing-5));
}
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: 56rem) {
.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: 48rem) {
+@media only screen and (max-width: 56rem) {
.header {
padding: var(--spacing-4);
margin-bottom: var(--spacing-4);
