brian/activist
1
0
Fork 0
Code Activity Actions

Get 4 layouts mostly working.

Browse source
This commit is contained in:
Brian D 2024-11-17 14:11:18 -05:00
parent 0cbe7bb91e
commit 1106ba403c
2 changed files with 121 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/components/Sticker.vue
View file

@ -1,18 +1,60 @@
<script setup lang="ts">
import QRCode from "@/components/QRCode.vue";
import {computed} from "vue";
const { message1, message2 } = defineProps(['message1', 'message2'])
const {
layout,
message1, message2,
message3, message4,
} = defineProps([
'layout',
'message1', 'message2',
'message3', 'message4',
])
const layout1Class = computed(() => ({
hidden: layout !== 'layout1',
layout1: layout === 'layout1',
}))
const layout2Class = computed(() => ({
hidden: layout !== 'layout2',
layout2: layout === 'layout2',
}))
const layout3Class = computed(() => ({
hidden: layout !== 'layout3',
layout3: layout === 'layout3',
}))
const layout4Class = computed(() => ({
hidden: layout !== 'layout4',
layout4: layout === 'layout4',
}))
</script>
<template>
<div class="sticker">
<QRCode class="qr-code"></QRCode>
<div class="message">{{ message1 }}</div>
<div class="message">{{ message2 }}</div>
<div class="content">
<div v-bind:class="layout1Class">
<div class="message">{{ message1 }}</div>
</div>
<div v-bind:class="layout2Class">
<div class="message">{{ message1 }}</div>
<div class="message">{{ message2 }}</div>
</div>
<div v-bind:class="layout3Class">
<div class="message">{{ message1 }}</div>
<div class="message">{{ message2 }}</div>
<div class="message">message3</div>
</div>
<div v-bind:class="layout4Class">
<div class="message">{{ message1 }}</div>
<div class="message">{{ message2 }}</div>
<div class="message">{{ message3 }}</div>
<div class="message">{{ message4 }}</div>
</div>
</div>
</div>
</template>
<style scoped>
.message {
font-size: 2rem;
color: white;
font-weight: bold;
}
@ -22,8 +64,49 @@ const { message1, message2 } = defineProps(['message1', 'message2'])
.sticker {
aspect-ratio: 6 / 1;
background-color: darkblue;
//outline: solid 1px red;
display: flex;
//padding: 10px;
overflow: hidden;
.content {
padding: 5px;
width: 100%;
> div > div {
outline: 1px solid #CCC;
}
.layout1 {
font-size: 140%;
height: 100%;
> div {
height: 100%;
}
}
.layout2 {
display: flex;
flex-direction: column;
font-size: 70%;
gap: 5px;
height: 100%;
> div {
flex: auto 1 0;
}
}
.layout3 {
display: flex;
gap: 5px;
height: 100%;
> div {
width: 33%;
}
}
.layout4 {
/* TODO: overflow issue. Turn on outline to see. */
display: grid;
font-size: 70%;
grid-template-columns: 50% 50%;
gap: 5px;
//grid-auto-rows: minmax(100px, auto);
//grid-auto-rows: auto;
height: 100%;
}
}
}
</style>

41
src/views/StickerView.vue
View file

@ -43,10 +43,15 @@ const resolver = () => {
};
const layout = defineModel('layout');
layout.value = 'layout1';
const message1 = defineModel('message1');
message1.value = "I SUPPORT M4A";
const message2 = defineModel('message2');
message2.value = "";
message2.value = "m2";
const message3 = defineModel('message3');
message3.value = "m3";
const message4 = defineModel('message4');
message4.value = "";
const color = defineModel('background-color');
function onFormSubmit() {
@ -59,9 +64,18 @@ function onFormSubmit() {
<h1>Sticker</h1>
<div id="StickerWrapper">
<p>6-inch sticker</p>
<Sticker id="Sticker1" v-bind:message1=message1 v-bind:message2=message2 />
<Sticker
id="Sticker1" v-bind:layout
v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4
/>
<p>8-inch sticker</p>
<Sticker id="Sticker2" v-bind:message1=message1 v-bind:message2=message2 />
<Sticker
id="Sticker2"
v-bind:layout
v-bind:message1 v-bind:message2
v-bind:message3 v-bind:message4
/>
</div>
<Button type="submit" severity="secondary" label="Take a snapshot" />
<Card>
@ -73,22 +87,22 @@ function onFormSubmit() {
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-10 md:px-12 lg:px-5">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<label for="nickname2">Layout</label>
<label for="nickname2">Layout {{layout}}</label>
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="layout" inputId="layout1" name="pizza" value="Cheese" />
<RadioButton v-model="layout" inputId="layout1" name="layout" value="layout1" />
<label for="layout1"><IconLayout1Vue /></label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="layout" inputId="layout2" name="pizza" value="Mushroom" />
<RadioButton v-model="layout" inputId="layout2" name="layout" value="layout2" />
<label for="layout2"><IconLayout2Vue /></label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="layout" inputId="layout3" name="pizza" value="Pepper" />
<RadioButton v-model="layout" inputId="layout3" name="layout" value="layout3" />
<label for="layout3"><IconLayout3Vue /></label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="layout" inputId="layout4" name="pizza" value="Onion" />
<RadioButton v-model="layout" inputId="layout4" name="layout" value="layout4" />
<label for="layout4"><IconLayout4Vue /></label>
</div>
</div>
@ -102,7 +116,16 @@ function onFormSubmit() {
</div>
<div class="col-span-12 md:col-span-6">
<label for="message2">Message 2</label>
<InputText class="w-full" id="message2" name="message1" type="text" v-model="message2" fluid />
<InputText class="w-full" id="message2" name="message2" type="text" v-model="message2" fluid />
</div>
<div class="col-span-12 md:col-span-6">
<label for="message1">Message 3</label>
<InputText class="w-full" id="message3" name="message3" type="text" v-model="message3" fluid />
</div>
<div class="col-span-12 md:col-span-6">
<label for="message4">Message 4</label>
<InputText class="w-full" id="message4" name="message4" type="text" v-model="message4" fluid />
</div>
<div class="divider" />