karkinge/gyoza2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Basic preview & print settings

Browse Source
This commit is contained in:
mcarquigny
2025-03-29 14:03:32 +01:00
parent 25e5dbe94a
commit 57e62912b1
1 changed files with 51 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/PrintSettings.vue
View File

@ -1,11 +1,18 @@
<template> <template>
<q-page padding> <q-page padding class="main-grid">
<!-- content --> <q-toolbar class="print-settings">
PRINT SETTINGS <q-btn @click="openPrintPage">Open Print Page</q-btn>
<q-btn @click="openPrintPage">Open Print Page</q-btn> <q-input type="number" v-model="itemsW" min="1"></q-input>
<pre> <q-input type="number" v-model="itemsH" min="1"></q-input>
{{items}} <q-slider v-model="pageMargin" :min="1" label></q-slider>
</pre> <q-slider v-model="pageGap" :min="1" label></q-slider>
</q-toolbar>
<div class="print-preview">
<div class="grid-container" :style="{gridTemplateColumns: `repeat(${itemsW}, 1fr)`, gridTemplateRows: `repeat(${itemsH}, 1fr)`, gap: `${pageGap/10}% ${pageGap*1.414/10}%`, padding: `${pageMargin/10}%`}">
<div v-for="i in (itemsW*itemsH)" :key="i" class="grid-item">
</div>
</div>
</div>
</q-page> </q-page>
</template> </template>
@ -17,7 +24,11 @@ export default {
data () { data () {
return { return {
items: null, items: null,
qrCodes: [] qrCodes: [],
itemsW: 3,
itemsH: 4,
pageMargin: 10,
pageGap: 10
} }
}, },
computed: { computed: {
@ -101,3 +112,35 @@ export default {
} }
} }
</script> </script>
<style scoped>
.main-grid {
display: grid;
gap: 10px;
height: 100%;
max-height: 100vh;
}
.print-preview {
height: 50vh;
aspect-ratio: 1/1.414;
position: relative;
}
.grid-container {
display: grid;
gap: 10px;
height: 100%;
width:100%;
page-break-after: always;
border: 1px solid gray;
}
.grid-item {
border: 1px solid gray;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
}
</style>