commit be1ecdfea445ae0ba8f9b7349c686e11593f7a91
parent 47ab7a91e5f499788d2f2db5fa3e04b3b5c659c8
Author: George Francis <georgedoescode@gmail.com>
Date: Sat, 4 Jul 2020 08:17:41 +0100
tweak styling of generator controls, make svg a fixed size of 320px where possible, add simple mobile styles for generator
Diffstat:
7 files changed, 63 insertions(+), 55 deletions(-)
diff --git a/src/assets/img/code.svg b/src/assets/img/code.svg
@@ -1 +0,0 @@
-<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-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-\ No newline at end of file
diff --git a/src/assets/img/download.svg b/src/assets/img/download.svg
@@ -1 +0,0 @@
-<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-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
-\ No newline at end of file
diff --git a/src/assets/img/trash.svg b/src/assets/img/trash.svg
@@ -1 +0,0 @@
-<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-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
-\ No newline at end of file
diff --git a/src/components/ColorSwatch.vue b/src/components/ColorSwatch.vue
@@ -27,13 +27,16 @@ export default {
.color-swatch {
display: flex;
justify-content: space-between;
+ align-items: center;
flex-wrap: wrap;
}
+
.color-swatch__color {
- width: var(--spacing-4);
+ width: calc(20% - 0.5rem);
height: var(--spacing-4);
- border-radius: 50%;
- align-self: center;
+ border-radius: 8px;
cursor: pointer;
+ justify-self: center;
+ flex-shrink: 0;
}
</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -1,24 +1,14 @@
<script>
-import CodeIcon from '@/assets/img/code.svg';
-import DownloadIcon from '@/assets/img/download.svg';
-
export default {
name: 'GeneratorExportOptions',
- components: {
- CodeIcon,
- DownloadIcon,
- },
+ components: {},
};
</script>
<template>
<div class="generator-export-controls">
- <button class="generator-export-controls__btn">
- <DownloadIcon />
- </button>
- <button class="generator-export-controls__btn">
- <CodeIcon />
- </button>
+ <button class="generator-export-controls__btn"></button>
+ <button class="generator-export-controls__btn"></button>
</div>
</template>
@@ -31,20 +21,24 @@ export default {
.generator-export-controls__btn {
align-self: flex-end;
- width: var(--spacing-4);
- height: var(--spacing-4);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: var(--spacing-6);
+ height: var(--spacing-6);
margin-left: var(--spacing-5);
padding: 0;
- border: 0;
border-radius: 50%;
outline: none;
cursor: pointer;
+ background: #fff;
+ border: 1px solid var(--grey-100);
transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
}
.generator-export-controls__btn svg {
- width: 100%;
- height: 100%;
+ width: 24px;
+ height: 24px;
stroke: var(--grey-900);
}
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -6,13 +6,13 @@ export default {
<template>
<div class="generator-preview">
- <svg>
+ <svg width="320" height="320" viewbox="0 0 320 320">
<rect
x="25%"
y="25%"
width="50%"
height="50%"
- fill="#1f2933"
+ fill="#f5f7fa"
></rect>
</svg>
</div>
@@ -22,8 +22,17 @@ export default {
.generator-preview {
position: relative;
width: 100%;
- border: 1px dashed var(--grey-100);
- border-radius: 16px;
+}
+
+.generator-preview::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: '';
+ border: 2px dashed var(--grey-100);
+ border-radius: 24px;
}
.generator-preview::before {
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -21,10 +21,7 @@ export default {
</div>
<div class="generator__control-section">
<GeneratorControls />
- <div class="generator__control-section-footer">
- <button class="generator-reset-btn">Reset</button>
- <GeneratorExportOptions />
- </div>
+ <GeneratorExportOptions class="generator__export-opts" />
</div>
</div>
</div>
@@ -32,42 +29,53 @@ export default {
<style scoped>
.generator-wrapper {
- max-width: var(--spacing-15);
+ width: var(--spacing-15);
margin: 0 auto;
}
.generator {
+ position: relative;
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 320px 1fr;
+ grid-gap: var(--spacing-5);
margin: 0 auto;
padding: var(--spacing-5);
background: #fff;
- border-radius: 16px;
-}
-
-.generator__preview-section {
- position: relative;
- flex-shrink: 0;
- margin-right: var(--spacing-5);
+ border-radius: 24px;
}
.generator__control-section {
flex-grow: 1;
+ display: flex;
+ flex-direction: column;
min-height: 100%;
- padding: var(--spacing-2);
+ justify-content: center;
+ padding: 0 var(--spacing-3);
}
-.generator__control-section-footer {
- display: flex;
- height: var(--spacing-5);
- margin-top: var(--spacing-5);
+.generator__export-opts {
+ position: absolute;
+ bottom: -24px;
+ right: calc(var(--spacing-5));
}
-.generator-reset-btn {
- align-self: flex-end;
- padding: 0;
- font-size: var(--font-size-1);
- border: 0;
- cursor: pointer;
+@media screen and (max-width: 48rem) {
+ .generator-wrapper {
+ width: 100%;
+ }
+
+ .generator {
+ grid-template-columns: 1fr;
+ }
+
+ .generator__preview-section {
+ width: 100%;
+ max-width: 320px;
+ justify-self: center;
+ }
+
+ .generator__control-section {
+ padding: 0;
+ }
}
</style>
