pihkaal/simple-qr
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): mobile view

Browse Source
This commit is contained in:
Pihkaal
2024-10-16 23:22:15 +02:00
parent b9fb3eff17
commit 5b41520812
4 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app.vue
View File

@@ -20,11 +20,11 @@ useSeoMeta({
</script>
<template>
<div role="main" class="flex h-[100vh] items-center justify-center">
<div role="main" class="flex min-h-[100vh] items-center justify-center">
<NuxtRouteAnnouncer />
<div
class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
>
<AppHeader />
<AppBody />

2
components/body/AppBody.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex justify-between space-x-8">
<div class="flex flex-col sm:flex-row justify-between gap-4">
<QRCodePreview />
<QRCodeForm />

2
components/body/QRCodePreview.vue
View File

@@ -5,6 +5,6 @@ const app = useAppStore();
<template>
<img
:src="app.qrCode"
class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
/>
</template>

2
components/header/AppHeader.vue
View File

@@ -2,7 +2,7 @@
<div
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
>
<h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
<h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>
<ClientOnly>
<div class="flex gap-x-1 animate-fadeIn">