This commit is contained in:
parent
80ca3562f4
commit
00708174a9
GPG key ID:
579388D585F70417
|
|
@ -1,39 +1,17 @@
|
|||
<template>
|
||||
<div class="md:grid md:grid-cols-12 md:col-span-12">
|
||||
<div class="flex">
|
||||
<div
|
||||
class="col-span-3 lg:mr-4 tools"
|
||||
class="lg:mr-4 tools"
|
||||
ref="tools"
|
||||
>
|
||||
<div class="mb-2">
|
||||
<div class="mb-2 flex flex-row">
|
||||
<button
|
||||
v-for="(name, value) in tools"
|
||||
class="p-3 mr-2 rounded"
|
||||
:class="{'bg-slate-300': this.tool == 'heading'}"
|
||||
@click="this.tool = 'heading'"
|
||||
>Heading</button>
|
||||
|
||||
<button
|
||||
class="p-3 mr-2 rounded"
|
||||
:class="{'bg-slate-300': this.tool == 'author'}"
|
||||
@click="this.tool = 'author'"
|
||||
>Author</button>
|
||||
|
||||
<button
|
||||
class="p-3 mr-2 rounded"
|
||||
:class="{'bg-slate-300': this.tool == 'font'}"
|
||||
@click="this.tool = 'font'"
|
||||
>Font</button>
|
||||
|
||||
<button
|
||||
class="p-3 mr-2 rounded"
|
||||
:class="{'bg-slate-300': this.tool == 'background'}"
|
||||
@click="this.tool = 'background'"
|
||||
>Background</button>
|
||||
|
||||
<button
|
||||
class="p-3 rounded"
|
||||
:class="{'bg-slate-300': this.tool == 'size'}"
|
||||
@click="this.tool = 'size'"
|
||||
>Size</button>
|
||||
:class="{'bg-slate-300': this.tool == value}"
|
||||
@click="this.tool = value"
|
||||
v-text="name"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -232,7 +210,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="{hidden: this.tool !== 'size'}"
|
||||
:class="{hidden: this.tool !== 'sizes'}"
|
||||
class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
|
||||
>
|
||||
<div class="p-5">
|
||||
|
|
@ -240,7 +218,7 @@
|
|||
<label
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
for="width"
|
||||
>Size</label>
|
||||
>Sizes</label>
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-4">
|
||||
<InputForm
|
||||
|
|
@ -254,13 +232,22 @@
|
|||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-4 block text-sm font-medium text-gray-700">Recommendations</h3>
|
||||
|
||||
<button
|
||||
v-for="(sizes, name) in sizesRecommendations"
|
||||
class="bg-lime-300 rounded px-3 py-2 mt-1 mr-1"
|
||||
@click="this.setSizes(sizes[0], sizes[1])"
|
||||
v-text="name"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="ogwrapper"
|
||||
class="og-wrapper col-span-9 lg:pl-10"
|
||||
class="og-wrapper lg:pl-10"
|
||||
>
|
||||
<div class="og-wrapper-content">
|
||||
<div
|
||||
|
|
@ -348,8 +335,6 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -379,31 +364,43 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tool: localStorage.getItem('tool') ?? 'heading',
|
||||
author: localStorage.getItem('author'),
|
||||
authorPadding: localStorage.getItem('authorPadding') ?? 0,
|
||||
author: localStorage.getItem('author') ?? 'Author name',
|
||||
authorPadding: localStorage.getItem('authorPadding') ?? 10,
|
||||
authorAlign: localStorage.getItem('authorAlign') ?? 'left',
|
||||
authorTextColor: localStorage.getItem('authorTextColor') ?? 0,
|
||||
authorMarginBottom: localStorage.getItem('authorMarginBottom') ?? 0,
|
||||
authorBackgroundColor: localStorage.getItem('authorBackgroundColor') ?? '#000000',
|
||||
authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 0,
|
||||
heading: localStorage.getItem('heading'),
|
||||
subheading: localStorage.getItem('subheading'),
|
||||
authorTextColor: localStorage.getItem('authorTextColor') ?? '#fff9e6',
|
||||
authorMarginBottom: localStorage.getItem('authorMarginBottom') ?? 200,
|
||||
authorBackgroundColor: localStorage.getItem('authorBackgroundColor') ?? '#fc5705',
|
||||
authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 1,
|
||||
heading: localStorage.getItem('heading') ?? 'Heading',
|
||||
subheading: localStorage.getItem('subheading') ?? 'Subheading',
|
||||
headingAlign: localStorage.getItem('headingAlign') ?? 'left',
|
||||
font: localStorage.getItem('font') ?? 'Trebuchet MS',
|
||||
avatar: localStorage.getItem('avatar'),
|
||||
logo: localStorage.getItem('logo'),
|
||||
textColor: localStorage.getItem('textColor') ?? '#333333',
|
||||
textColor: localStorage.getItem('textColor') ?? '#fc5705',
|
||||
background: localStorage.getItem('background'),
|
||||
backgroundHover: localStorage.getItem('backgroundHover') ?? '#000000',
|
||||
backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 0,
|
||||
backgroundHover: localStorage.getItem('backgroundHover') ?? '#fff9e6',
|
||||
backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 1,
|
||||
headingSize: localStorage.getItem('headingSize') ?? 4,
|
||||
subheadingSize: localStorage.getItem('subheadingSize') ?? 2,
|
||||
width: localStorage.getItem('width') ?? 1920,
|
||||
height: localStorage.getItem('height') ?? 1080,
|
||||
contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
|
||||
width: localStorage.getItem('width') ?? 1200,
|
||||
height: localStorage.getItem('height') ?? 600,
|
||||
contentPadding: localStorage.getItem('contentPadding') ?? 20,
|
||||
allowHtml: localStorage.getItem('allowHtml'),
|
||||
ogMaxWidth: 100,
|
||||
|
||||
tools: {
|
||||
heading: 'Heading',
|
||||
author: 'Author',
|
||||
font: 'Font',
|
||||
background: 'Background',
|
||||
sizes: 'Sizes',
|
||||
},
|
||||
sizesRecommendations: {
|
||||
Mastodon: [1200, 600],
|
||||
LinkedIn: [1200, 627],
|
||||
Instagram: [1200, 630],
|
||||
X: [1200, 675],
|
||||
},
|
||||
fonts: [
|
||||
{label: 'Arial (sans-serif)', value : 'Arial'},
|
||||
{label: 'Brush Script MT (cursive)', value : 'Brush Script MT'},
|
||||
|
|
@ -588,6 +585,10 @@ export default {
|
|||
paddingLeft: `${this.contentPadding}px`,
|
||||
}
|
||||
},
|
||||
setSizes(width, height) {
|
||||
this.width = width
|
||||
this.height = height
|
||||
},
|
||||
downloadAsPng() {
|
||||
return this.download(toPng, 'image.png')
|
||||
},
|
||||
|
|
@ -626,11 +627,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tool {
|
||||
max-height: calc(100vh - 250px);
|
||||
overflow: auto;
|
||||
|
|
@ -638,12 +634,17 @@ export default {
|
|||
|
||||
.tools {
|
||||
height: calc(100vh - 250px);
|
||||
width: 443px;
|
||||
}
|
||||
|
||||
.og {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.og-wrapper {
|
||||
width: calc(100vw - 540px);
|
||||
}
|
||||
|
||||
.og-wrapper-content {
|
||||
background-color: #c1c1c1;
|
||||
background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
|
||||
|
|
|
|||
Loading…
Reference in a new issue