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

feat: Improve UI of Create New Sermon page

Browse Source
This commit is contained in:
Ryderjj89
2025-10-01 18:58:10 -04:00
parent 0361c3fbe6
commit 07683824c2
1 changed files with 37 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
pages/admin.vue
View File

@@ -1,34 +1,31 @@
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-100">
<!-- Header --> <!-- Header -->
<header class="bg-white shadow-sm border-b"> <UCard class="rounded-none" :ui="{ body: { padding: 'py-2 px-4 sm:px-6 lg:px-8' } }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center">
<div class="flex justify-between items-center py-4"> <div class="flex items-center space-x-4">
<div class="flex items-center"> <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10" />
<img src="/logos/logo.png" alt="New Life Christian Church" class="logo-image" />
<UButton
@click="navigateTo('/')"
variant="ghost"
color="gray"
icon="i-heroicons-arrow-left"
class="mr-4"
>
Back to Sermons
</UButton>
<h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
</div>
<UButton <UButton
@click="handleLogout" @click="navigateTo('/')"
variant="outline" variant="ghost"
color="gray" color="gray"
icon="i-heroicons-arrow-left"
> >
Logout Back to Sermons
</UButton> </UButton>
<h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
</div> </div>
<UButton
@click="handleLogout"
variant="outline"
color="gray"
>
Logout
</UButton>
</div> </div>
</header> </UCard>
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <UContainer class="py-8">
<UCard> <UCard>
<template #header> <template #header>
<h2 class="text-xl font-semibold">Sermon Details</h2> <h2 class="text-xl font-semibold">Sermon Details</h2>
@@ -39,57 +36,50 @@
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Basic Information</h3> <h3 class="text-lg font-medium text-gray-900">Basic Information</h3>
<div class="flex flex-wrap items-end gap-x-4 gap-y-2 mb-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<UFormGroup label="Sermon Title" name="title" required class="w-full sm:max-w-xs"> <UFormGroup label="Sermon Title" name="title" required>
<UInput <UInput
v-model="form.title" v-model="form.title"
placeholder="Enter sermon title" placeholder="Enter sermon title"
:disabled="loading" :disabled="loading"
size="sm"
/> />
</UFormGroup> </UFormGroup>
<UFormGroup label="Sermon Date" name="date" required class="w-full sm:max-w-[150px]"> <UFormGroup label="Sermon Date" name="date" required>
<UInput <UInput
v-model="form.date" v-model="form.date"
type="date" type="date"
:disabled="loading" :disabled="loading"
size="sm"
/> />
</UFormGroup> </UFormGroup>
</div> </div>
<div class="bg-blue-50 p-4 rounded-lg"> <UFormGroup label="Generated URL" name="generatedUrl">
<p class="text-sm text-blue-800"> <UInput
<strong>Generated URL:</strong> :value="form.title && form.date ? generateSlug(form.title, form.date) : 'Enter title and date to see URL'"
<span v-if="form.title && form.date" class="font-mono"> :disabled="loading"
{{ generateSlug(form.title, form.date) }} readonly
</span> />
<span v-else class="text-blue-600">Enter title and date to see URL</span> </UFormGroup>
</p>
</div>
</div> </div>
<!-- Bible References --> <!-- Bible References -->
<div class="space-y-2"> <UFormGroup label="Bible References" name="bibleReferences">
<h3 class="text-lg font-medium text-gray-900">Bible References</h3>
<div <div
v-for="(reference, index) in form.bibleReferences" v-for="(reference, index) in form.bibleReferences"
:key="index" :key="index"
class="flex items-center gap-2" class="flex items-center gap-2 mb-2"
> >
<UInput <UInput
v-model="form.bibleReferences[index]" v-model="form.bibleReferences[index]"
:placeholder="`Bible reference ${index + 1}`" :placeholder="`Bible reference ${index + 1}`"
:disabled="loading" :disabled="loading"
class="flex-1" class="flex-1"
size="lg"
/> />
<UButton <UButton
@click="removeBibleReference(index)" @click="removeBibleReference(index)"
variant="ghost" variant="ghost"
color="red" color="red"
size="sm"
icon="i-heroicons-minus" icon="i-heroicons-minus"
:disabled="loading" :disabled="loading"
v-if="form.bibleReferences.length > 1" v-if="form.bibleReferences.length > 1"
@@ -102,33 +92,31 @@
icon="i-heroicons-plus" icon="i-heroicons-plus"
:disabled="loading" :disabled="loading"
:padded="false" :padded="false"
class="-ml-1 mt-2" class="-ml-1"
> >
Add another reference Add another reference
</UButton> </UButton>
</div> </UFormGroup>
<!-- Personal Application --> <!-- Personal Application -->
<div class="space-y-4"> <UFormGroup label="Personal Application" name="personalApplication">
<h3 class="text-lg font-medium text-gray-900">Personal Application</h3>
<UTextarea <UTextarea
v-model="form.personalApplication" v-model="form.personalApplication"
:rows="4" :rows="4"
placeholder="Describe how this sermon applies to daily life..." placeholder="Describe how this sermon applies to daily life..."
:disabled="loading" :disabled="loading"
/> />
</div> </UFormGroup>
<!-- Pastor's Challenge --> <!-- Pastor's Challenge -->
<div class="space-y-4"> <UFormGroup label="Pastor's Challenge" name="pastorChallenge">
<h3 class="text-lg font-medium text-gray-900">Pastor's Challenge</h3>
<UTextarea <UTextarea
v-model="form.pastorChallenge" v-model="form.pastorChallenge"
:rows="4" :rows="4"
placeholder="What challenge does the pastor give to the congregation?" placeholder="What challenge does the pastor give to the congregation?"
:disabled="loading" :disabled="loading"
/> />
</div> </UFormGroup>
<!-- Submit --> <!-- Submit -->
<div class="flex justify-end space-x-4"> <div class="flex justify-end space-x-4">