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