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

Add font size selector to sermon view page with Small, Medium, and Large options

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-01 23:18:42 -04:00
parent aa611a0e2c
commit 103e14dbc9
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
pages/[slug].vue
View File

@@ -6,7 +6,21 @@
<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>
<QRCodeButton v-if="sermon" :sermon="sermon" /> <div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<label for="font-size" class="text-sm font-medium text-gray-700">Font Size:</label>
<select
id="font-size"
v-model="fontSize"
class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
<QRCodeButton v-if="sermon" :sermon="sermon" />
</div>
</div> </div>
</div> </div>
</header> </header>
@@ -29,7 +43,7 @@
class="bg-blue-50 rounded-lg p-6" class="bg-blue-50 rounded-lg p-6"
> >
<div class="flex items-start justify-between gap-4"> <div class="flex items-start justify-between gap-4">
<p class="text-gray-800 text-lg leading-relaxed flex-1"> <p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
{{ ref.text }} {{ ref.text }}
</p> </p>
<div class="text-right text-sm text-gray-600 whitespace-nowrap"> <div class="text-right text-sm text-gray-600 whitespace-nowrap">
@@ -45,7 +59,7 @@
<section class="mb-8"> <section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Personal Appliance</h2> <h2 class="text-2xl font-semibold text-gray-900 mb-4">Personal Appliance</h2>
<div class="bg-green-50 rounded-lg p-6"> <div class="bg-green-50 rounded-lg p-6">
<p class="text-gray-800 whitespace-pre-wrap">{{ sermon.personal_appliance }}</p> <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.personal_appliance }}</p>
</div> </div>
</section> </section>
@@ -53,7 +67,7 @@
<section class="mb-8"> <section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Pastor's Challenge</h2> <h2 class="text-2xl font-semibold text-gray-900 mb-4">Pastor's Challenge</h2>
<div class="bg-purple-50 rounded-lg p-6"> <div class="bg-purple-50 rounded-lg p-6">
<p class="text-gray-800 whitespace-pre-wrap">{{ sermon.pastors_challenge }}</p> <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.pastors_challenge }}</p>
</div> </div>
</section> </section>
@@ -95,6 +109,9 @@ const slug = route.params.slug as string
const { data: sermon } = await useFetch(`/api/sermons/${slug}`) const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
// Font size state
const fontSize = ref('medium')
const bibleReferences = computed(() => { const bibleReferences = computed(() => {
if (!sermon.value?.bible_references) return [] if (!sermon.value?.bible_references) return []
try { try {
@@ -108,6 +125,18 @@ const bibleReferences = computed(() => {
} }
}) })
// Font size classes
const fontSizeClasses = computed(() => {
switch (fontSize.value) {
case 'small':
return 'text-sm'
case 'large':
return 'text-xl'
default:
return 'text-base'
}
})
function formatDate(dateString: string) { function formatDate(dateString: string) {
const date = new Date(dateString) const date = new Date(dateString)
return date.toLocaleDateString('en-US', { return date.toLocaleDateString('en-US', {