From 0cbe7bb91e480dddc95f13f7bcae13fddd28a05c Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 17 Nov 2024 11:41:35 -0500
Subject: [PATCH] Stop using pixels for sticker.  Use svg image for QR code.

Move Sticker to it's own component.
---
 src/components/QRCode.vue      | 18 +++++--------
 src/components/QRCodeImage.vue | 11 ++++++++
 src/components/Sticker.vue     | 29 +++++++++++++++++++++
 src/views/StickerView.vue      | 47 +++++++++++++++++-----------------
 4 files changed, 71 insertions(+), 34 deletions(-)
 create mode 100644 src/components/QRCodeImage.vue
 create mode 100644 src/components/Sticker.vue

diff --git a/src/components/QRCode.vue b/src/components/QRCode.vue
index 676342f..cf8fa4e 100644
--- a/src/components/QRCode.vue
+++ b/src/components/QRCode.vue
@@ -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);
diff --git a/src/components/QRCodeImage.vue b/src/components/QRCodeImage.vue
new file mode 100644
index 0000000..293d878
--- /dev/null
+++ b/src/components/QRCodeImage.vue
@@ -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>
diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
new file mode 100644
index 0000000..3ef304a
--- /dev/null
+++ b/src/components/Sticker.vue
@@ -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>
diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue
index 19dff3c..7f27d2d 100644
--- a/src/views/StickerView.vue
+++ b/src/views/StickerView.vue
@@ -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>