Pascal/fs_namensschilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Engschrift woff, fix card sizes, add more presets, replace button group with grid, add print button

Browse Source
This commit is contained in:
Pascal
2025-04-11 00:57:21 +02:00
parent ff1984a469
commit 01b5a2f70a
8 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+22 -8
View File
@@ -5,7 +5,6 @@ import { useCards } from '@/stores/cards.ts'
import { ref } from 'vue'
import {
VaButton,
VaButtonGroup,
VaCard,
VaCardContent,
VaColorInput,
@@ -24,11 +23,15 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
}
const active = ref(-1)
const print = () => window.print()
</script>
<template>
<div class="grid grid-cols-3">
<div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-3">
<div
class="noPrint flex flex-col gap-3 md:border-r-4 bg-gray-100 md:mr-4 pb-8 md:pb-0 h-screen overflow-y-auto"
>
<VaCard
v-for="(card, i) in cardStore.cards"
:key="i"
@@ -39,14 +42,14 @@ const active = ref(-1)
:stripe-color="active === i ? 'success' : card.bgColor"
>
<VaCardContent class="flex flex-col gap-4">
<VaInput v-model="card.title" label="Title" clearable />
<VaInput v-model="card.title" :label="`Title Card ${i + 1}`" clearable />
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<VaInput v-model="card.name" label="Name" class="col-span-2" clearable />
<VaCounter
v-model="card.textSize"
type="number"
min="1"
max="10"
max="15"
label="Name Text Size"
/>
</div>
@@ -59,7 +62,7 @@ const active = ref(-1)
</div>
<VaDivider />
<h3 class="text-lg font-bold uppercase text-center">Apply a preset:</h3>
<VaButtonGroup class="mx-auto">
<div class="mx-auto grid grid-cols-3 content-center gap-1">
<VaButton
v-for="(preset, key) in presets"
:key="key"
@@ -69,11 +72,22 @@ const active = ref(-1)
>
{{ preset.title }}
</VaButton>
</VaButtonGroup>
</div>
</VaCardContent>
</VaCard>
<VaButton
class="bottom-0 m-2 w-32 md:right-0 md:mr-8"
style="position: fixed"
title="print"
round
icon="print"
@click="print"
>Print</VaButton
>
</div>
<div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
<div
class="hidden col-span-2 md:grid print:grid grid-cols-2 page gap-2 h-screen overflow-y-auto"
>
<card
v-for="(_, i) in cardStore.cards"
:key="i"
src/assets/fonts/DINEngschriftStd.otf → src/assets/DINEngschriftStd.otf
View File
src/assets/DINEngschriftStd.woff
BIN
View File
Binary file not shown.
src/assets/DINMittelschriftStd.woff
BIN
View File
Binary file not shown.
src/assets/main.css
+25 -7
View File
@@ -1,16 +1,34 @@
/*@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';*/
@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import 'tailwindcss';
.card {
width: 9cm;
height: 6.5cm;
@font-face {
font-family: 'Engschrift';
font-style: normal;
font-weight: normal;
src:
local('DIN 1451 Std Engschrift'),
url('@/assets/DINEngschriftStd.woff') format('woff'),
url('@/assets/DINEngschriftStd.otf') format('opentype');
}
@font-face {
font-family: 'DINEngschrift';
src: url('@/assets/fonts/DINEngschriftStd.otf') format('opentype');
font-family: 'Mittelschrift';
font-style: normal;
font-weight: normal;
src:
local('DIN 1451 Std Mittelschrift'),
url('@/assets/DINMittelschriftStd.woff') format('woff');
}
.eng {
font-family: 'Engschrift', 'sans-serif';
}
.card {
height: 185pt;
width: 255pt;
}
@media print {
.noPrint {
display: none;
@@ -38,6 +56,6 @@
gap: 0;
}
.card {
border-color: var(--color-gray-200) !important;
border-width: 0;
}
}
src/colors.ts
+15 -1
View File
@@ -7,8 +7,15 @@ export const presets = {
nameColor: '#000000',
title: 'Fachschaft 4',
},
inverted: {
bgColor: '#ffffff',
color: '#000000',
textColor: '#000000',
nameColor: '#ffffff',
title: 'Fachschaft 4',
},
helping: {
bgColor: '#383838',
bgColor: '#000000',
color: '#ffffff',
textColor: '#ffffff',
nameColor: '#000000',
@@ -21,6 +28,13 @@ export const presets = {
nameColor: '#ffffff',
title: 'Awareness',
},
security: {
bgColor: '#8d851c',
color: '#e8db0b',
textColor: '#000000',
nameColor: '#000000',
title: 'Security',
},
// TODO: add new types
} satisfies Record<string, Preset>
src/components/card.vue
+5 -6
View File
@@ -15,25 +15,24 @@ const props = defineProps<{
:style="{ backgroundColor: card.color }"
>
<div
class="h-16 bg-gray-600 flex flex-row space-between align-center relative"
class="h-14 bg-gray-600 flex flex-row space-between align-center relative"
:style="{ backgroundColor: card.bgColor }"
>
<logo class="absolute top-0 left-0" :color="card.textColor" />
<p
class="text-center w-full mx-16 align-center h-fit my-auto text-white text-5xl"
:style="{ color: card.textColor, fontFamily: 'DINEngschrift' }"
class="text-center w-full mx-16 align-center h-fit my-auto text-white text-5xl font-bold eng font-medium pt-3"
:style="{ color: card.textColor }"
>
{{ card.title }}
</p>
</div>
<p
class="my-auto text-center max-w-full overflow-hidden name overflow-ellipsis"
class="my-auto text-center max-w-full overflow-hidden font-bold name overflow-ellipsis eng font-medium pt-5"
style="font-size: var(--normalSize); @media print {font-size: var(--printSize)}"
:style="{
color: card.nameColor,
'--normalSize': `${card.textSize * 0.18}cm`,
'--normalSize': `${card.textSize * 0.3}cm`,
'--printSize': `${card.textSize}vw`,
fontFamily: 'DINEngschrift',
}"
>
{{ card.name }}
src/components/logo.vue
+1 -1
View File
@@ -10,7 +10,7 @@ const { color } = defineProps<{ color: string }>()
height="1000"
viewBox="0 0 1000 999.99996"
xmlns="http://www.w3.org/2000/svg"
class="w-16 h-16"
class="w-14 h-14 ml-4"
:style="`--color: ${color || 'white'}`"
>
<g id="layer-MC1" transform="translate(-57.60569,-0.68580814)" style="display: inline">