hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

QR fontSize; routing

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-05 16:24:59 +01:00
parent 37e8710f70
commit 44b4605324
6 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Qr.tsx
View File

@ -9,6 +9,21 @@ export default function Qr()
{
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
const [fontSize, setFontSize] = useState(100);
function incrementFontSize()
{
if(fontSize < 200)
{
setFontSize(fontSize + 1);
}
}
function decrementFontSize()
{
if(fontSize > 1)
{
setFontSize(fontSize - 1);
}
}
if(user && dog.success === undefined)
{
@ -30,6 +45,15 @@ export default function Qr()
<h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link>
<div>
<button onClick={incrementFontSize}>up</button>
<div>{fontSize}</div>
<button onClick={decrementFontSize}>down</button>
</div>
{/* <div>Logged in als:</div>
<div>{user?.email}</div>
<div>{user?.qr_id}</div>
@ -41,7 +65,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -54,7 +78,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont order2'>{dog.data.name}</div>
<div className='vertFont order3'>{dog.data.phone}</div>
<div className='vertFont order1'>{dog.data.email}</div>
@ -65,7 +89,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -78,7 +102,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -89,7 +113,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -102,7 +126,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>