Stop using pixels for sticker. Use svg image for QR code.
Move Sticker to it's own component.
This commit is contained in:
parent
add1f0eed5
commit
0cbe7bb91e
4 changed files with 71 additions and 34 deletions
|
|
@ -1,22 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import QRCodeImage from './QRCodeImage.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="qr-code">
|
||||
<span class="grid">QR</span>
|
||||
<span class="uuid">1337-9339</span>
|
||||
<QRCodeImage class="qr-code-image" />
|
||||
<!-- <span class="uuid">1337-9339</span>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.grid {
|
||||
font-size: 200%;
|
||||
}
|
||||
.qr-code {
|
||||
align-items: center;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
}
|
||||
.uuid {
|
||||
color: rgba(51, 51, 51, 0.91);
|
||||
|
|
|
|||
11
src/components/QRCodeImage.vue
Normal file
11
src/components/QRCodeImage.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 296 296">
|
||||
<path d="M32,236v-28h56v56H32V236L32,236z M80,236v-20H40v40h40V236L80,236z M48,236v-12h24v24H48V236L48,236z M104,260v-4h-8v-16h8v-24h8v-8H96v-8H64v-8h8v-8H56v16h-8v-8H32v-8h16v-16h-8v8h-8v-16h16v8h8v8h8v-8h8v8h16v-8h-8v-8H56v-8h24v-8H56v-8h-8v8H32v-24h8v8h48v-8h-8v-8H64v8h-8v-8H40V96h16v16h8v-8h16v-8h8v8h-8v8h8v8h8v-16h8v-8h-8V72h16v8h8v8h-8v8h8v48h-16v-8h-8v8h-8v8h-8v8h8v8h8v8h16v-8h-8v-8h-8v-8h16v16h8v-16h8v16h8v-24h8v-8h8v8h-8v8h8v8h24v-8h-8v-8h-8v-16h-8v-8h8v-8h8v-8h-8v-8h-8v16h-8v-8h-8v8h-8v-8h8v-8h-8V72h-8v-8h8v8h8V40h8v16h16v-8h-8V32h16v8h-8v8h16v-8h8v-8h16v24h-16v-8h-8v16h8v24h8v-8h8v40h16v-8h-8V96h16v24h16v-8h-8V96h8v16h8v-8h16v16h-8v-8h-8v8h-8v24h8v8h-8v8h-16v8h-8v8h-16v-8h-8v-8h-8v16h8v8h24v8h16v-8h-8v-8h8v-8h8v8h8v8h8v-16h-8v-8h16v24h-8v16h8v16h-8v24h8v8h-24v16h-24v-8h16v-8h-16v-16h-8v16h-8v8h8v8h-16v-24h-8v16h-8v-8h-8v-32h8v24h8v-24h8v-16h-8v-8h-8v-8h8v-8h-8v-8h-8v32h8v8h-16v16h-8v16h8v8h-8v8h16v8h-16v-8h-8v-8h-8v16h-32V260L104,260z M128,248v-8h8v-24h-16v8h8v8h-16v8h-8v8h8v8h16V248L128,248z M240,240v-8h8v-16h8v-8h-8v-24h-8v24h8v8h-8v8h-8v24h8V240L240,240z M200,236v-4h-8v8h8V236L200,236z M152,220v-4h-8v8h8V220L152,220z M224,212v-12h-24v24h24V212L224,212z M208,212v-4h8v8h-8V212L208,212z M144,204v-4h16v-8h-16v-8h-8v8h8v8h-16v-8h-8v8h-8v-8h-8v-8h-8v-8h-8v8h-8v8h8v-8h8v8h8v8h8v8h32V204L144,204z M120,180v-4h-8v8h8V180L120,180z M160,176v-8h-16v8h8v8h8V176L160,176z M208,164v-4h-8v8h8V164L208,164z M224,156v-4h8v-24h-8v8h-8v8h-8v-8h-16v-8h-8v-8h8V96h-8v-8h-8v-8h-8v8h-8V64h8v8h8v-8h-8v-8h-8v8h-8v24h8v8h8v-8h8v24h-8v8h-8v8h8v16h8v-8h16v8h8v8h16v8h8V156L224,156z M216,148v-4h8v8h-8V148L216,148z M88,140v-4h8v-8h-8v8h-8v8h8V140L88,140z M112,124v-4h-8v8h8V124L112,124z M112,84v-4h-8v8h8V84L112,84z M144,80v-8h-8v16h8V80L144,80z M192,44v-4h-8v8h8V44L192,44z M256,260v-4h8v8h-8V260L256,260z M256,144v-8h-8v-8h8v8h8v16h-8V144L256,144z M32,60V32h56v56H32V60L32,60zM80,60V40H40v40h40V60L80,60z M48,60V48h24v24H48V60L48,60z M208,60V32h56v56h-56V60L208,60z M256,60V40h-40v40h40V60L256,60zM224,60V48h24v24h-24V60L224,60z M96,60v-4h8v8h-8V60L96,60z M112,52v-4h-8V32h8v8h8v-8h8v8h-8v16h-8V52L112,52z"/>
|
||||
</svg>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
29
src/components/Sticker.vue
Normal file
29
src/components/Sticker.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import QRCode from "@/components/QRCode.vue";
|
||||
|
||||
const { message1, message2 } = defineProps(['message1', 'message2'])
|
||||
</script>
|
||||
<template>
|
||||
<div class="sticker">
|
||||
<QRCode class="qr-code"></QRCode>
|
||||
<div class="message">{{ message1 }}</div>
|
||||
<div class="message">{{ message2 }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.message {
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.qr-code {
|
||||
height: 100%;
|
||||
}
|
||||
.sticker {
|
||||
aspect-ratio: 6 / 1;
|
||||
background-color: darkblue;
|
||||
//outline: solid 1px red;
|
||||
display: flex;
|
||||
//padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,9 +10,9 @@ import IconLayout1Vue from '@/components/layouts/IconLayout1.vue';
|
|||
import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
|
||||
import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
|
||||
import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
|
||||
import QRCode from "@/components/QRCode.vue";
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Select from 'primevue/select';
|
||||
import Sticker from '@/components/Sticker.vue';
|
||||
import ToggleSwitch from 'primevue/toggleswitch';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ const resolver = () => {
|
|||
|
||||
const layout = defineModel('layout');
|
||||
const message1 = defineModel('message1');
|
||||
message1.value = "I AM A TREEHUGGER";
|
||||
message1.value = "I SUPPORT M4A";
|
||||
const message2 = defineModel('message2');
|
||||
message2.value = "";
|
||||
const color = defineModel('background-color');
|
||||
|
|
@ -58,14 +58,13 @@ function onFormSubmit() {
|
|||
<div id="StickerPage">
|
||||
<h1>Sticker</h1>
|
||||
<div id="StickerWrapper">
|
||||
<div id="Sticker">
|
||||
<QRCode></QRCode>
|
||||
<div class="message">{{ message1 }}</div>
|
||||
<div class="message">{{ message2 }}</div>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Take a snapshot" />
|
||||
<p>6-inch sticker</p>
|
||||
<Sticker id="Sticker1" v-bind:message1=message1 v-bind:message2=message2 />
|
||||
<p>8-inch sticker</p>
|
||||
<Sticker id="Sticker2" v-bind:message1=message1 v-bind:message2=message2 />
|
||||
</div>
|
||||
<Card style="width: 75%">
|
||||
<Button type="submit" severity="secondary" label="Take a snapshot" />
|
||||
<Card>
|
||||
<template #content>
|
||||
<Form v-slot="$form"
|
||||
v-bind:initialValues
|
||||
|
|
@ -175,29 +174,31 @@ function onFormSubmit() {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
label {
|
||||
@apply font-medium text-surface-900 dark:text-surface-0 mb-1 block;
|
||||
}
|
||||
.divider {
|
||||
@apply border-surface border-t opacity-50 mb-4 col-span-12;
|
||||
}
|
||||
.message {
|
||||
font-size: 2.5rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
#Sticker {
|
||||
background-color: darkgreen;
|
||||
#StickerPage {
|
||||
display: flex;
|
||||
left: 30px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
top: 30px;
|
||||
width: 500px;
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
#StickerWrapper {
|
||||
background-color: #CCC;
|
||||
display: flex;
|
||||
margin: 30px;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 10px;
|
||||
#Sticker1 {
|
||||
width: 300px;
|
||||
}
|
||||
#Sticker2 {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue