brian/activist
1
0
Fork 0
Code Activity Actions

Stop using pixels for sticker. Use svg image for QR code.

Browse source 
Move Sticker to it's own component.
This commit is contained in:
Brian D 2024-11-17 11:41:35 -05:00
parent add1f0eed5
commit 0cbe7bb91e
4 changed files with 71 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/QRCode.vue
View file

@ -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
View 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
View 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>

47
src/views/StickerView.vue
View file

@ -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>