RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Improve header layout: stack labels above controls for cleaner mobile appearance

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-01 23:24:36 -04:00
parent 95eb9d1598
commit 9051938fdc
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/QRCodeButton.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<button <button
@click="showModal = true" @click="showModal = true"
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" class="inline-flex flex-col items-center gap-1 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium"
> >
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
</svg> </svg>
QR Code <span class="text-xs">QR Code</span>
</button> </button>
<QRCodeModal <QRCodeModal

6
pages/[slug].vue
View File

@@ -6,9 +6,9 @@
<NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80"> <NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" /> <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
</NuxtLink> </NuxtLink>
<div class="flex items-center gap-4"> <div class="flex items-end gap-4">
<div class="flex items-center gap-2"> <div class="flex flex-col gap-1">
<label for="font-size" class="text-sm font-medium text-gray-700">Font Size:</label> <label for="font-size" class="text-xs font-medium text-gray-700">Font Size:</label>
<select <select
id="font-size" id="font-size"
v-model="fontSize" v-model="fontSize"