Skip to content

Commit 0f17688

Browse files
rogdenrogden
committed
UI cleanup
1 parent e697d36 commit 0f17688

File tree

10 files changed

+107
-73
lines changed

10 files changed

+107
-73
lines changed

‎src/components/Canvas/Canvas.vue‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="bg-gray-100">
2+
<div class="bg-white">
33
<div
44
v-if="!config"
55
style="height: calc(100vh - 63px);"
@@ -23,18 +23,20 @@
2323
</form>
2424
</div>
2525
<template v-if="config">
26-
<div class="pt-8 flex">
27-
<nav class="w-56 flex-none pt-12 px-3 h-full top-0 sticky">
28-
<a
29-
v-for="section in configTransformed"
30-
:key="section.title"
31-
:href="`#${section.title}`"
32-
class="block py-2 px-3 text-gray-600 hover:text-gray-900 text-base rounded-sm"
33-
>
34-
{{ section.title }}
35-
</a>
36-
</nav>
37-
<div class="pr-4">
26+
<div class="pt-8 px-3 flex">
27+
<div class="hidden md:block flex-none h-full overflow-y-auto top-0 sticky max-h-screen">
28+
<nav class="w-56 py-12 px-3 h-full">
29+
<a
30+
v-for="section in configTransformed"
31+
:key="section.title"
32+
:href="`#${section.title}`"
33+
class="block py-2 text-gray-600 hover:text-gray-900 text-base rounded-sm"
34+
>
35+
{{ section.title }}
36+
</a>
37+
</nav>
38+
</div>
39+
<div>
3840
<CanvasSection
3941
v-for="section in configTransformed"
4042
:key="section.title"

‎src/components/Canvas/Sections/BorderRadius.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="flex">
3-
<div v-for="(value, prop) in data" :key="prop" class="mr-4">
2+
<div class="flex flex-wrap -mb-4">
3+
<div v-for="(value, prop) in data" :key="prop" class="mr-4 mb-4">
44
<div
55
class="bg-gray-400 mb-2 w-40 h-40"
66
:style="{

‎src/components/Canvas/Sections/BorderWidth.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div class="flex">
2+
<div class="flex flex-wrap -mb-4">
33
<div
44
v-for="(value, prop) in data"
55
:key="prop"
6-
class="mr-4"
6+
class="mr-4 mb-4"
77
>
88
<div
99
class="mb-2 w-40 h-40 bg-gray-200 border-gray-400"

‎src/components/Canvas/Sections/Colors.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
<div>
33
<div class="flex mb-6">
44
<button
5-
class="w-32 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
6-
:class="{'bg-gray-400': selectedProp === 'bg'}"
5+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
6+
:class="{'bg-gray-300': selectedProp === 'bg'}"
77
@click="selectedProp = 'bg'">Background</button>
88
<button
9-
class="w-32 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
10-
:class="{'bg-gray-400': selectedProp === 'text'}"
9+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
10+
:class="{'bg-gray-300': selectedProp === 'text'}"
1111
@click="selectedProp = 'text'">Text</button>
1212
<button
13-
class="w-32 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
14-
:class="{'bg-gray-400': selectedProp === 'border'}"
13+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
14+
:class="{'bg-gray-300': selectedProp === 'border'}"
1515
@click="selectedProp = 'border'">Border</button>
1616
</div>
17-
<div class="flex flex-wrap">
17+
<div class="flex flex-wrap -mb-4">
1818
<div
1919
v-for="(value, prop) in data"
2020
:key="prop"

‎src/components/Canvas/Sections/FontSizes.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="">
2+
<div class="-mb-4">
33
<div
44
v-for="(value, prop) in data"
55
class="mb-4"
66
:key="prop"
77
>
8-
<div class="border p-4 rounded">
8+
<div class="border-b py-4 rounded">
99
<p
1010
class="mb-2 leading-none"
1111
:style="{

‎src/components/Canvas/Sections/FontWeight.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="">
2+
<div class="-mb-4">
33
<div
44
v-for="(value, prop) in data"
55
class="mb-4"
66
:key="prop"
77
>
8-
<div class="border p-4 rounded">
8+
<div class="border-b py-4">
99
<p
1010
class="mb-2 leading-none text-2xl"
1111
:style="{

‎src/components/Canvas/Sections/LetterSpacing.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="">
2+
<div class="-mb-4">
33
<div
44
v-for="(value, prop) in data"
55
class="mb-4"
66
:key="prop"
77
>
8-
<div class="border p-4 rounded">
8+
<div class="border-b py-4">
99
<p
1010
class="mb-2 text-2xl leading-none"
1111
:style="{

‎src/components/Canvas/Sections/LineHeight.vue‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
<template>
2-
<div class="">
2+
<div class="-mt-4 space-y-4 divide-y">
33
<div
44
v-for="(value, prop) in data"
5-
class="mb-4"
5+
class="pt-4"
66
:key="prop"
77
>
8-
<div class="border p-4 rounded">
9-
<div
10-
class="text-lg mb-2"
11-
:style="{
12-
lineHeight: value
13-
}"
14-
>
15-
<p>The quick brown fox jumped over the lazy dog.</p>
16-
<p>The quick brown fox jumped over the lazy dog.</p>
17-
</div>
18-
<CanvasBlockLabel
19-
:label="`leading-${prop}`"
20-
:value="value"
21-
/>
8+
<div
9+
class="text-lg mb-2"
10+
:style="{
11+
lineHeight: value
12+
}"
13+
>
14+
<p>The quick brown fox jumped over the lazy dog.</p>
15+
<p>The quick brown fox jumped over the lazy dog.</p>
2216
</div>
17+
<CanvasBlockLabel
18+
:label="`leading-${prop}`"
19+
:value="value"
20+
/>
2321
</div>
2422
</div>
2523
</template>
@@ -39,3 +37,9 @@ export default {
3937
}
4038
}
4139
</script>
40+
41+
<style scoped>
42+
.row:not(:last-child) {
43+
@apply border-b;
44+
}
45+
</style>

‎src/components/Canvas/Sections/MaxHeight.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}"
1313
/>
1414
<CanvasBlockLabel
15-
:label="`h-${prop}`"
15+
:label="`max-h-${prop}`"
1616
:value="value"
1717
/>
1818
</div>

‎src/components/Canvas/Sections/Spacing.vue‎

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,43 @@
11
<template>
22
<div class="">
3-
<div class="flex mb-6">
4-
<button
5-
class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
6-
:class="{'bg-gray-400': selectedProp === 'p'}"
7-
@click="selectedProp = 'p'">Padding</button>
8-
<button
9-
class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
10-
:class="{'bg-gray-400': selectedProp === 'm'}"
11-
@click="selectedProp = 'm'">Margin</button>
12-
<button
13-
class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
14-
:class="{'bg-gray-400': selectedProp === '-m'}"
15-
@click="selectedProp = '-m'">Negative Margin</button>
16-
<select
17-
class="ml-2 bg-gray-200 border border-gray-400 rounded w-40"
18-
v-model="dimensionProp">
19-
<option value="">All</option>
20-
<option value="t">Top</option>
21-
<option value="r">Right</option>
22-
<option value="b">Bottom</option>
23-
<option value="l">Left</option>
24-
<option value="x">Horizontal</option>
25-
<option value="y">Vertical</option>
26-
</select>
3+
<div class="lg:flex mb-6">
4+
<div class="flex w-full lg:w-auto mb-2 lg:mb-0">
5+
<button
6+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
7+
:class="{'bg-gray-300': selectedProp === 'p'}"
8+
@click="selectedProp = 'p'">Padding</button>
9+
<button
10+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
11+
:class="{'bg-gray-300': selectedProp === 'm'}"
12+
@click="selectedProp = 'm'">Margin</button>
13+
<button
14+
class="w-full lg:w-40 hover:bg-gray-300 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
15+
:class="{'bg-gray-300': selectedProp === '-m'}"
16+
@click="selectedProp = '-m'">Negative Margin</button>
17+
</div>
18+
<div class="relative w-full lg:w-40 lg:ml-2">
19+
<svg
20+
class="absolute pointer-events-none"
21+
style="right: 10px; top: calc(50% - 6px);"
22+
width="11" height="11" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.657 4.243h3.76a.2.2 0 0 1 .141.341l-3.76 3.76a.2.2 0 0 1-.283 0l-3.76-3.76a.2.2 0 0 1 .142-.341h3.76z" fill="#B8C2CC"></path></svg>
23+
<select
24+
class="h-full w-full px-4 py-2 border bg-white border-gray-400 rounded text-sm appearance-none"
25+
v-model="dimensionProp">
26+
<option value="">All</option>
27+
<option value="t">Top</option>
28+
<option value="r">Right</option>
29+
<option value="b">Bottom</option>
30+
<option value="l">Left</option>
31+
<option value="x">Horizontal</option>
32+
<option value="y">Vertical</option>
33+
</select>
34+
</div>
2735
</div>
2836
<div>
2937
<div
30-
v-for="(value, prop) in data"
38+
v-for="({value, prop}) in spacing"
3139
:key="prop"
32-
class="mb-6x py-3 border-t"
40+
class="mb-6x py-3 border-b"
3341
>
3442
<div
3543
class="mb-2 bg-gray-400"
@@ -48,6 +56,7 @@
4856
</template>
4957

5058
<script>
59+
import { remToPx } from '@/utils'
5160
import CanvasBlockLabel from '../CanvasBlockLabel'
5261
5362
export default {
@@ -67,6 +76,25 @@ export default {
6776
selectedProp: 'p',
6877
dimensionProp: ''
6978
}
79+
},
80+
81+
computed: {
82+
spacing () {
83+
return Object
84+
.keys(this.data)
85+
.sort((keyA, keyB) => {
86+
const aInPx = this.data[keyA].indexOf('rem') !== -1 ? remToPx(this.data[keyA]) : parseFloat(this.data[keyA])
87+
const bInPx = this.data[keyB].indexOf('rem') !== -1 ? remToPx(this.data[keyB]) : parseFloat(this.data[keyB])
88+
console.log(this.data[keyA], aInPx, bInPx)
89+
return aInPx - bInPx
90+
})
91+
.map(key => {
92+
return {
93+
prop: key,
94+
value: this.data[key]
95+
}
96+
})
97+
}
7098
}
7199
}
72100
</script>

0 commit comments

Comments
 (0)